做网站常用css3图片动画代码

解决方法:因为,每个横向层的宽度不同,所以对不起,在每个容器Z外层加入样式 nb class,简称牛B代码

电脑版在手机上显示不对齐

解决方法:

因为,每个横向层的宽度不同,所以对不起,在每个容器Z外层加入样式 nb class,简称牛B代码

@media screen and (max-width: 1200px) {

   .nb{width:1200px; overflow:hidden}

}

图片鼠标上去旋转360度的css3特效

a img{

    -webkit-transition: 0.4s;

    -webkit-transition: -webkit-transform 0.4s ease-out;

    transition: transform 0.4s ease-out;

    -moz-transition: -moz-transform 0.4s ease-out;

}

a:hover img{ 

transform: rotateY(360deg);

-webkit-transform: rotateY(360deg);

-moz-transform: rotateY(360deg);

}

鼠标放上去有阴影效果,位置偏移效果

li a:hover{

-moz-box-shadow:0px 0px 20px #2f566d; 

-webkit-box-shadow:0px 0px 20px #2f566d; 

box-shadow:0px 0px 20px #2f566d;

/*0 x y -5px translate 位置移动*/

transform: translate(0,-5px);

-webkit-transform: translate(0,-5px);

-moz-transform: translate(0,-5px);

-o-transform: translate(0,-5px);

-ms-transform: translate(0,-5px);    

}       

 css3渐变特效

 a{transition: all 0.3s ease 0s}

 css3透明效果

 opacity:0.8;filter:alpha(opacity=80); 

初始化css样式

 body{

margin: 0 auto;

*margin:0px;

padding: 0px;

font-size: 12px;

line-height: 22px;

font-family:Microsoft YaHei,Helvitica,Verdana,Tohoma,Arial,san-serif;

background:#152b38;

 }

ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,img,div{margin:0px;padding:0px;border:0px;}

table,td{margin:0px;padding:0px;}

ul,li{padding:0px; margin:0px;}

ul,ol{list-style-type:none;}

li{ list-style-type:none; }

img{ border:none;}

a{ color:#000; text-decoration:none;}

a:hover{color:#bb0000; text-decoration:none;}

a.hong{ color:red; text-decoration:none;}

a.hong:hover{color:#C60;text-decoration:underline;}

.clear{clear:both;}

 

郑州做网站,做网站

原创文章,作者:鲁 大师seo,如若转载,请注明出处:http://www.luseo.cn/archives/2913.html