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

来源：互联网发布：淘宝申诉进货发票凭证编辑：程序博客网时间：2024/05/19 03:44

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);}

1 0