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

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

android仿微博头像_Android 自定义 View 集锦｜自定义圆形旋转进度条，仿微博头像加载效果...
微博 App 的用户头像有一个圆形旋转进度条的加载效果,看上去效果非常不错,如图所示: 据说 Instagram 也采用了这种效果.最近抽空研究了一下,最后实现的效果是这样: 基本上能模拟出个大概,代 ...
python 视频播放拖动_视频画中画效果，拖动进度条可以seek到相应视频帧显示
在视频开发中,我们常常看到这样的效果,拖动进度条时,或是在进度条上方或是在屏幕中间,显示拖动进度条位置时刻的某一帧画面. 这个需求,如果是你,你会如何做? 通常一个需求,不仅要考虑实现,还有考虑一些是 ...
Eclipse里编辑代码，进度条出现“Remote System Explorer Operation”解决方法
Eclipse里编辑代码,进度条出现"Remote System Explorer Operation"解决方法参考文章: (1)Eclipse里编辑代码,进度条出现" ...
css实现成长值类似的进度条效果
效果: 代码: <view><view class="levelGrow"><view class="progress">& ...
html5倒计时效果,html5+css3进度条倒计时动画特效代码【推荐】
html5+css3进度条倒计时动画特效这个作品在今天上网找网络资源的时候无意中发现的,看到效果非常棒并且很实用,就第一时间把它整理出来与大家分享了,主要用到了html5.javascript和css ...
6行Python代码实现进度条效果（Progress、tqdm、alive-progress和PySimpleGUI库）
目录 1.Progress库 2.tqdm库 3.alive-progress库 4.PySimpleGUI库在项目开发过程中加载.启动.下载项目难免会用到进度条,如何使用Python实现进度条呢? ...
android 进度条代码,Android 进度条使用详解及示例代码
在这里,总结一下loading进度条的使用简单总结一下. 一.说起进度条,必须说说条形进度条,经常都会使用到嘛,特别是下载文件进度等等,还有像腾讯QQ安装进度条一样,有个进度总给人良好的用户体验. 先 ...
CSS使用线性渐变实现滚动进度条
效果查看:https://codepen.io/Chokcoco/pen/KbBXQM?editors=1100 CSS: body {position: relative;padding: 50px ...
html5 css 3d动画效果代码,css3D+动画的例子（附完整代码）
本篇文章给大家带来的内容是关于css3D+动画的例子(附完整代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 前言最近玩了玩用css来构建3D效果,写了几个demo,所以博客总 ...

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

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

最新文章

热门文章