使用CSS3设计地图上的雷达定位提示效果


Posted in HTML / CSS onApril 05, 2016

近期工作要做一个用于图像定位的标识,为了让这个指示标识不死板,决定做个简单的动画,动画效果像波浪一样波动,这样标识就更美观好看了,喜欢的同学可以跟着来学,十分简单,欢迎指正交流。

先上效果图:
使用CSS3设计地图上的雷达定位提示效果

本动画需要用到的主要属性:animation, transition 和 Keyframes 属性
Step 1:HTML 代码:

XML/HTML Code复制内容到剪贴板
  1. <div class="example">  
  2. <div class="dot"></div>  
  3. </div>  

Step 2: CSS样式:设置animation属性

CSS Code复制内容到剪贴板
  1. .dot:before{   
  2. content:' ';   
  3. positionabsolute;   
  4. z-index:2;   
  5. left:0;   
  6. top:0;   
  7. width:10px;   
  8. height:10px;   
  9. background-color#ff4200;   
  10. border-radius: 50%;   
  11. }   
  12.   
  13. .dot:after {   
  14. content:' ';   
  15. positionabsolute;   
  16. z-index:1;   
  17. width:10px;   
  18. height:10px;   
  19. background-color#ff4200;   
  20. border-radius: 50%;   
  21. box-shadow: 0 0 10px rgba(0,0,0,.3) inset;   
  22. -webkit-animation-name:'ripple';/*动画属性名,也就是我们前面keyframes定义的动画名*/  
  23. -webkit-animation-duration: 1s;/*动画持续时间*/  
  24. -webkit-animation-timing-function: ease; /*动画频率,和transition-timing-function是一样的*/  
  25. -webkit-animation-delay: 0s;/*动画延迟时间*/  
  26. -webkit-animation-iteration-count: infinite;/*定义循环资料,infinite为无限次*/  
  27. -webkit-animation-directionnormal;/*定义动画方式*/  
  28. }  

设置动画方式,像波浪一样,从小变大变无,所以我们要设置宽高从0 – 50px,透明度从有至无,这样就能实现水波涟漪效果啦。

CSS Code复制内容到剪贴板
  1. @keyframes ripple {   
  2. 0% {   
  3. left:5px;   
  4. top:5px;   
  5. opcity:75;   
  6. width:0;   
  7. height:0;   
  8. }   
  9. 100% {   
  10. left:-20px;   
  11. top:-20px;   
  12. opacity: 0;   
  13. width:50px;   
  14. height:50px;   
  15. }   
  16. }  

效果完成了,此案例比较适合图像定位标识用,当然还可以有更好的方案去代替,完善这个样式与动画效果。

HTML / CSS 相关文章推荐
纯CSS3实现的阴影效果
Dec 24 HTML / CSS
魔幻般冒泡背景的CSS3按钮动画
Feb 27 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
Apr 19 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
canvas学习和滤镜实现代码
Aug 22 HTML / CSS
canvas实现烟花的示例代码
Jan 16 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
CSS 一行代码实现头像与国旗的融合
Oct 24 HTML / CSS
HTML静态页面获取url参数和UserAgent的实现
Aug 05 HTML / CSS
简单掌握CSS3中resize属性的用法
Apr 01 #HTML / CSS
CSS3制作炫酷的自定义发光文字
Mar 28 #HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 #HTML / CSS
6种非常炫酷的CSS3按钮边框动画特效
Mar 16 #HTML / CSS
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
Mar 16 #HTML / CSS
纯CSS3实现8组超炫酷鼠标滑过图片动画
Mar 16 #HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 #HTML / CSS
You might like
php使用curl获取header检测开启GZip压缩的方法
2018/08/15 PHP
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
javascript面向对象包装类Class封装类库剖析
2013/01/24 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
在页面中输出当前客户端时间javascript实例代码
2016/03/02 Javascript
JavaScript简单获取页面图片原始尺寸的方法
2016/06/21 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
React 无状态组件(Stateless Component) 与高阶组件
2018/08/14 Javascript
JS实现li标签的删除
2019/04/12 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
js实现时间日期校验
2020/05/26 Javascript
React冒泡和阻止冒泡的应用详解
2020/08/18 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
[01:00:30]完美世界DOTA2联赛循环赛 Inki vs Matador BO2第二场 10.31
2020/11/02 DOTA
python获取标准北京时间的方法
2015/03/24 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
python随机数分布random测试
2018/08/27 Python
对Python3 * 和 ** 运算符详解
2019/02/16 Python
Python Pandas实现数据分组求平均值并填充nan的示例
2019/07/04 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
如何使用python的ctypes调用医保中心的dll动态库下载医保中心的账单
2020/05/24 Python
python在协程中增加任务实例操作
2021/02/28 Python
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
你的创业计划书怎样才能打动风投
2014/02/06 职场文书
校园安全广播稿
2014/02/08 职场文书
市场营销专业应届生自荐信
2014/06/19 职场文书
2014年行政人事工作总结
2014/12/09 职场文书
入队仪式主持词
2015/07/04 职场文书