使用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 相关文章推荐
纯CSS实现聊天框小尖角、气泡效果
Apr 04 HTML / CSS
CSS3制作酷炫的条纹背景
Nov 09 HTML / CSS
使用css3做0.5px的细线的示例代码
Jan 18 HTML / CSS
详解HTML5中的标签
Jun 19 HTML / CSS
HTML5的结构和语义(2):结构
Oct 17 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
HTML5移动端开发中的Viewport标签及相关CSS用法解析
Apr 15 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
html5默认气泡修改的代码详解
Mar 13 HTML / CSS
Html5 canvas画图白板踩坑
Jun 01 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
深入理解php的MySQL连接类
2013/06/07 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
php实现字符串首字母大写和单词首字母大写的方法
2015/03/14 PHP
php查询whois信息的方法
2015/06/08 PHP
PHP7下协程的实现方法详解
2017/12/17 PHP
php更新cookie内容的详细方法
2019/09/30 PHP
Nigma vs Alliance BO5 第二场2.14
2021/03/10 DOTA
JQuery之拖拽插件实现代码
2011/04/14 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
jQuery中实现prop()函数控制多选框(全选,反选)
2016/08/19 Javascript
浅谈jquery选择器 :first与:first-child的区别
2016/11/20 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
NodeJS使用七牛云存储上传文件的方法
2017/07/24 NodeJs
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
Vue 中可以定义组件模版的几种方式
2019/08/06 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
python实现二叉查找树实例代码
2018/02/08 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
澳大利亚珍珠首饰购物网站:Vayo Pearls
2019/03/11 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
函授毕业个人自我评价
2014/02/20 职场文书
发展部经理职责规定
2014/02/22 职场文书
兴趣小组活动总结
2014/05/05 职场文书
减负增效提质方案
2014/05/23 职场文书
天猫活动策划方案
2014/08/21 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
创先争优个人总结
2015/03/04 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
教学反思怎么写
2016/02/24 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
变长双向rnn的正确使用姿势教学
2021/05/31 Python