Css的一些效果代码(旋转,进度条,透明,固定)

1.背景图片固定，不随滚动而变动

body {
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
}

2.背景色透明,改变其中的0.5可以调整透明度，0是没有,1是最大

#class {
background-color: rgba(255, 255, 255, 0.5);
background: #fff\9;
filter: alpha(opacity = 50);
}

3.div固定在某位置
#class{
position: fixed;
z-index:999;//设置级别最高，以免被覆盖
}

4.鼠标经过图片旋转

.xwcms {
margin: 0 auto;
-webkit-border-radius: 0px;
-webkit-transition: -webkit-transform 1.5s ease-out;
-moz-transition: -moz-transform 1.5s ease-out;
-o-transition: -o-transform 1.5s ease-out;
-ms-transition: -ms-transform 1.5s ease-out;
}
.xwcms:hover {
-webkit-transform: rotateZ(360deg);
-moz-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
5.进度条样式

<dl class="m-progress">
<dt>
<b style="width:145px;"></b>
</dt>
</dl>

dl.m-progress5{
overflow: hidden;
width: 160px;
margin: 12px 12px 0 12px;
height: 20px;
float: left;
display: inline;
}
dl.m-progress5 dt{
width: 160px;
height: 6px;
}
dl.m-progress5 dt{
background: #ddd;
margin-bottom: 5px;
overflow: hidden;
}
dl.m-progress5 dt b{
height: 6px;
}
dl.m-progress5 dt b{
display: block;
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#EDF6D3',endColorStr='#B5DAB9',gradientType='1');
background: -moz-linear-gradient(0deg,#EDF6D3,#B5DAB9);
background: -webkit-gradient(linear,0% 0,100% 0,from(#EDF6D3),to(#B5DAB9));
background: -ms-linear-gradient(left,#EDF6D3 0,#B5DAB9 100%);
background: -o-linear-gradient(0deg,#EDF6D3,#B5DAB9);
}