CSS3 “搜索中...”“检测中...”效果
来源:互联网 发布:先序遍历的非递归算法 编辑:程序博客网 时间:2024/06/11 20:34
最近做一个系统检测的功能,里面有一个检测中的效果,觉得挺好玩的,也可以用了当loading中或者水波一圈一圈逐渐变大的效果,都可以的。。。不多说了,效果贴图。。。
可能gif图动画不是特别流畅,实际效果还是不错的。。。不磨磨唧唧的,贴代码:
html代码:
<div class="detecting_center"> <div class="circle"> <div></div> <div></div> <div></div> <div></div> </div> <div class="letter"> <div>系</div> <div>统</div> <div>检</div> <div>测</div> <div>中</div> </div> </div>起初“系统检测中”这几个字是打算做个类似打字机的效果的,所以才这么布局的。。这里不说文字效果。。。只说白色背景一圈一圈放大的效果。。
css代码:
.detecting_center { position: relative; width: 210px; height: 210px; margin: 60px auto;}
.circle div { background-color: #fff; border-radius: 100%; position: absolute; left: 50%; top: 50%; opacity: 0; width: 100%; height: 100%; margin: -50% 0 0 -50%; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: circle 2s 0s linear infinite; animation: circle 2s 0s linear infinite; z-index: 1;}.circle div:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s;}.circle div:nth-child(2) { -webkit-animation-delay: 0.3s; animation-delay: 0.3s;}.circle div:nth-child(3) { -webkit-animation-delay: 0.6s; animation-delay: 0.6s;}.circle > div:nth-child(4) { -webkit-animation-delay: 0.9s; animation-delay: 0.9s;}
@-webkit-keyframes circle{ 0% { -webkit-transform: scale(1); transform: scale(1); opacity: 0.4; } 50% { -webkit-transform: scale(1.35); transform: scale(1.35); opacity: 0; }}
关于动画这块儿有个小小的问题,如果0%时,opacity:0时,动画也可正常执行,只是会有一段时间的延迟,即当点开页面后,动画会顿一会儿,然后再开始执行,如果你不想延迟,就按照上面代码;想延迟就按这行所说,就哦啦!!!
之后会补一下项目地址哦 ~
0 0
- CSS3 “搜索中...”“检测中...”效果
- css3中scale的效果
- CSS3制作加载中loading动画效果
- CSS3中轻松实现渐变效果
- CSS3中轻松实现渐变效果
- CSS3中轻松实现渐变效果
- CSS3 中 3D 变换效果概述
- CSS3中使用transform开发动画效果
- CSS3中轻松实现渐变效果
- css3中文字“走”出来的效果
- css3中transition的五种效果
- css3中一些常用的动画效果
- CSS3中动画效果新属性----transition&transform
- CSS:CSS3中perspective的应用,实现旋转木马效果
- html5中css3新添加的动画效果
- 如何利用css3来实现网页中钟表的效果
- css3.0中transition属性设置过度的动态效果
- 在CSS3中制作小三角形效果代码
- C语言学习之输入/输出函数第二讲
- XMLConfiguration读取XML文件
- 杂碎
- HBase常用操作之namespace
- Android 返回键取消dialog的监听
- CSS3 “搜索中...”“检测中...”效果
- adb&fastboot 安装和使用
- 使用Flexible实现手淘H5页面的终端适配
- windows7下,在命令窗口中用telnet命令时, 命令无法执行,提示:“'telnet' 不是内部或外部命令,也不是可运行的程序或批处理文件”
- iOS本地推送学习心得
- android service 之一 (start service)
- apk编译不通过,You may want to manually restart adb from the Devices view. 解决方法。
- Android PullToRefresh (ListView GridView 下拉刷新) 使用详解 Hongyang 转载
- Latex Skills