css3做一个简单的加载效果
2017-07-30 21:27
162 查看
css3做简单的加载效果步骤:1.首先创建一个500*500的矩形,并将其进行居中。2.通过阴影扩展半径给这个矩形的四周加上白色内阴影。效果如下:3.给这个元素加上伪元素before和after代码如下 .box:before,.box:after{content: "";display: block;position: absolute;width: 250px;height: 500px;top: 0;left: 0;background-color: #999;border-radius: 250px
0 0 250px;transform-origin:right center;animation:load 2s infinite;}.box:after{left: 250px;background-color: #999;border-radius: 0 250px 250px 0;transform-origin:left center;animation:load 2s 0.5s infinite;}其中after和before的宽度是父元素的2/1(250px)高度和父元素一样(500px)当只给父元素加上before和after不加其他效果时是这样的,给before加上红背景,给after加上绿背景4.给after和before加上相应的border-radius和基准点(1)before的border-radius和基准点border-radius:
250px 0 0 250px;transform-origin:right center;(2)before的border-radius和基准点border-radius: 0 250px 250px 0;transform-origin:left center;5.定义一个旋转的动画load,代码如下:@keyframes load{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}6.改变after和before的基准点7.引用动画,其中一个个一定的延迟时间效果全部代码如下所示:
0 0 250px;transform-origin:right center;animation:load 2s infinite;}.box:after{left: 250px;background-color: #999;border-radius: 0 250px 250px 0;transform-origin:left center;animation:load 2s 0.5s infinite;}其中after和before的宽度是父元素的2/1(250px)高度和父元素一样(500px)当只给父元素加上before和after不加其他效果时是这样的,给before加上红背景,给after加上绿背景4.给after和before加上相应的border-radius和基准点(1)before的border-radius和基准点border-radius:
250px 0 0 250px;transform-origin:right center;(2)before的border-radius和基准点border-radius: 0 250px 250px 0;transform-origin:left center;5.定义一个旋转的动画load,代码如下:@keyframes load{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}6.改变after和before的基准点7.引用动画,其中一个个一定的延迟时间效果全部代码如下所示:
相关文章推荐
- 利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解
- 利用PreLoader实现一个平视显示(HUD)效果(可以运用到加载等待效果),并进行简单的讲解
- css3和jQuery实现一个简单的标签页效果
- 一个简单实用的的加载动画(跳点效果)
- HTML一个极其简单实用的浏览器加载效果
- css3加js做一个简单的3D行星运转效果
- 使用jQuery和CSS3创建一个全屏幕幻灯效果
- CSS3制作加载中loading动画效果
- js写一个简单的进度条加载
- 简单table 给一个样式 效果
- 哪种缓存效果高?开源一个简单的缓存组件j2cache
- 使用 CSS3 实现超炫的 Loading(加载)动画效果
- 一个简单的例子演示:模仿微博里面的通过浏览器的滚动条来动态加载数据
- 一个简单图片滑动效果
- jQuery框架开发一个最简单的幻灯效果
- Canvas画板实现一个简单的球在盒子内随机移动效果
- 用jQuery和css3实现的一个模仿淘宝ued博客左边的菜单切换动画效果
- 一个VB.NET写的简单图片缩放处理组件源代码,支持添加半透明效果小图标
- 用CSS写一个简单的幻灯片效果页面
- UIWebView——>一个简单的网页加载