这篇文章给大家聊聊关于html音乐网站成品源码分享，以及html制作简单音乐网站对应的知识点，希望对各位有所帮助，不要忘了收藏本站哦。
效果图
各位朋友大家好，
今天给大家带来的是CSS3墨水喷墨特效源码！
是不是很炫酷，大家可以按照自己的意愿进行修改！
有想要文件版源码的可以私聊小编哦
废话不多说，上源码！
CSS:
/*http://meyerweb.com/eric/tools/css/reset/
v2.0|20110126
License:none(publicdomain)
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
vertical-align:baseline;
}
/*HTML5display-roleresetforolderbrowsers*/
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,main{
display:block;
}
body{
line-height:1;
}
ol,ul{
list-style:none;
}
blockquote,q{
quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
content:”;
content:none;
}
table{
border-collapse:collapse;
border-spacing:0;
}
CSS:
/*——————————–
Primarystyle
——————————–*/
*,*::after,*::before{
box-sizing:border-box;
}
html{
font-size:62.5%;
}
body{
font-size:1.6rem;
font-family:”PTSans”,sans-serif;
color:ffffff;
}
a{
color:ffffff;
font-weight:700;
text-transform:uppercase;
background-color:e4dcca;
}
.cd-main-content.center{
/*verticallyaligninsideparentelement*/
display:table-cell;
vertical-align:middle;
text-align:center;
}
/*——————————–
Modalwindow
——————————–*/
.cd-modal{
position:fixed;
top:0;
left:0;
z-index:3;
height:100%;
width:100%;
overflow:hidden;
background:e4dcca;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
.cd-modalh1{
text-align:center;
}
.cd-modalh1::after{
/*ink/brushseparation*/
content:”;
display:block;
width:130px;
height:18px;
background:url(../img/ink-separation.svg)no-repeatcentercenter;
margin:.2emauto0;
}
.cd-modalp{
line-height:1.6;
margin:2emauto;
max-width:800px;
}
.cd-modal.modal-close{
/*’X’icon*/
position:absolute;
z-index:1;
top:20px;
right:5%;
height:45px;
width:45px;
border-radius:50%;
background:rgba(0,0,0,0.3)url(../img/cd-icon-close.svg)no-repeatcentercenter;
/*imagereplacement*/
overflow:hidden;
text-indent:100%;
white-space:nowrap;
visibility:hidden;
opacity:0;
-webkit-transform:scale(0);
-moz-transform:scale(0);
-ms-transform:scale(0);
-o-transform:scale(0);
transform:scale(0);
-webkit-transition:-webkit-transform0.3s0s,visibility0s0.3s,opacity0.3s0s;
-moz-transition:-moz-transform0.3s0s,visibility0s0.3s,opacity0.3s0s;
transition:transform0.3s0s,visibility0s0.3s,opacity0.3s0s;
}
.no-touch.cd-modal.modal-close:hover{
background-color:rgba(0,0,0,0.5);
}
.cd-modal.visible{
opacity:1;
visibility:visible;
-webkit-transition:opacity0.7s,visibility0s;
-moz-transition:opacity0.7s,visibility0s;
transition:opacity0.7s,visibility0s;
}
.cd-modal.visible.modal-content{
/*thisfixesthebuggyscrollingonwebkitbrowsers-mobiledevicesonly-whenoverflowpropertyisapplied*/
-webkit-overflow-scrolling:touch;
}
.cd-modal.visible.modal-close{
visibility:visible;
opacity:1;
-webkit-transition:-webkit-transform0.3s0s,visibility0s0s,opacity0.3s0s;
-moz-transition:-moz-transform0.3s0s,visibility0s0s,opacity0.3s0s;
transition:transform0.3s0s,visibility0s0s,opacity0.3s0s;
-webkit-transform:scale(1);
-moz-transform:scale(1);
-ms-transform:scale(1);
-o-transform:scale(1);
transform:scale(1);
}
@mediaonlyscreenand(min-width:1100px){
.cd-modal.modal-content{
padding:6em5%;
}
.cd-modal.modal-close{
height:60px;
width:60px;
}
.cd-modalp{
font-size:2rem;
}
}
/*——————————–
TransitionLayer
——————————–*/
.cd-transition-layer{
position:fixed;
top:0;
left:0;
z-index:2;
height:100%;
width:100%;
opacity:0;
visibility:hidden;
overflow:hidden;
}
.cd-transition-layer.bg-layer{
position:absolute;
left:50%;
top:50%;
-webkit-transform:translateY(-50%)translateX(-2%);
-moz-transform:translateY(-50%)translateX(-2%);
-ms-transform:translateY(-50%)translateX(-2%);
-o-transform:translateY(-50%)translateX(-2%);
transform:translateY(-50%)translateX(-2%);
/*itsdimentionswillbeoverwrittenusingjQuerytoproportionallyfittheviewport*/
height:100%;
/*ourspriteiscomposedof25frames*/
width:2500%;
background:url(../img/ink.png)no-repeat00;
background-size:100%100%;
}
.cd-transition-layer.visible{
opacity:1;
visibility:visible;
}
.cd-transition-layer.opening.bg-layer{
-webkit-animation:cd-sequence0.8ssteps(24);
-moz-animation:cd-sequence0.8ssteps(24);
animation:cd-sequence0.8ssteps(24);
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
.cd-transition-layer.closing.bg-layer{
-webkit-animation:cd-sequence-reverse0.8ssteps(24);
-moz-animation:cd-sequence-reverse0.8ssteps(24);
animation:cd-sequence-reverse0.8ssteps(24);
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
}
.no-cssanimations.cd-transition-layer{
display:none;
}
@-webkit-keyframescd-sequence{
0%{
/*translateX(-2%)isusedtohorizontallycenterthefirstframeinsidetheviewport*/
-webkit-transform:translateY(-50%)translateX(-2%);
}
100%{
/*translateX(-98%)(2%+96)isusedtohorizontallycenterthelastframeinsidetheviewport*/
-webkit-transform:translateY(-50%)translateX(-98%);
}
}
@-moz-keyframescd-sequence{
0%{
/*translateX(-2%)isusedtohorizontallycenterthefirstframeinsidetheviewport*/
-moz-transform:translateY(-50%)translateX(-2%);
}
100%{
/*translateX(-98%)(2%+96)isusedtohorizontallycenterthelastframeinsidetheviewport*/
-moz-transform:translateY(-50%)translateX(-98%);
}
}
@keyframescd-sequence{
0%{
/*translateX(-2%)isusedtohorizontallycenterthefirstframeinsidetheviewport*/
-webkit-transform:translateY(-50%)translateX(-2%);
-moz-transform:translateY(-50%)translateX(-2%);
-ms-transform:translateY(-50%)translateX(-2%);
-o-transform:translateY(-50%)translateX(-2%);
transform:translateY(-50%)translateX(-2%);
}
100%{
/*translateX(-98%)(2%+96)isusedtohorizontallycenterthelastframeinsidetheviewport*/
-webkit-transform:translateY(-50%)translateX(-98%);
-moz-transform:translateY(-50%)translateX(-98%);
-ms-transform:translateY(-50%)translateX(-98%);
-o-transform:translateY(-50%)translateX(-98%);
transform:translateY(-50%)translateX(-98%);
}
}
@-webkit-keyframescd-sequence-reverse{
0%{
-webkit-transform:translateY(-50%)translateX(-98%);
}
100%{
-webkit-transform:translateY(-50%)translateX(-2%);
}
}
@-moz-keyframescd-sequence-reverse{
0%{
-moz-transform:translateY(-50%)translateX(-98%);
}
100%{
-moz-transform:translateY(-50%)translateX(-2%);
}
}
@keyframescd-sequence-reverse{
0%{
-webkit-transform:translateY(-50%)translateX(-98%);
-moz-transform:translateY(-50%)translateX(-98%);
-ms-transform:translateY(-50%)translateX(-98%);
-o-transform:translateY(-50%)translateX(-98%);
transform:translateY(-50%)translateX(-98%);
}
100%{
-webkit-transform:translateY(-50%)translateX(-2%);
-moz-transform:translateY(-50%)translateX(-2%);
-ms-transform:translateY(-50%)translateX(-2%);
-o-transform:translateY(-50%)translateX(-2%);
transform:translateY(-50%)translateX(-2%);
}
}
好了，文章到此结束，希望可以帮助到大家。