使用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中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
纯css3显示隐藏一个div特效的具体实现
Feb 10 HTML / CSS
纯CSS3实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3实现王者匹配时的粒子动画效果
Apr 12 HTML / CSS
CSS3实现王者荣耀匹配人员加载页面的方法
Apr 16 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
canvas三角函数模拟水波效果的示例代码
Jul 03 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
移动端html5 meta标签的神奇功效
Jan 06 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 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
《APMServ 5.1.2》使用图解
2006/10/23 PHP
PHP ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php中选择什么接口(mysql、mysqli)访问mysql
2013/02/06 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
程序员的表白神器“520”大声喊出来
2016/05/20 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
浅析Node在构建超媒体API中的作用
2014/07/30 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
2016/03/07 Javascript
javascript js 操作数组 增删改查的简单实现
2016/06/20 Javascript
JS常用函数和常用技巧小结
2016/10/15 Javascript
总结几道关于Node.js的面试问题
2017/01/11 Javascript
vue项目中使用百度地图的方法
2018/06/08 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
Vue 刷新当前路由的实现代码
2019/09/26 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
原生js实现轮播图特效
2020/05/04 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
Python魔术方法详解
2015/02/14 Python
Python虚拟环境项目实例
2017/11/20 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
python 整数越界问题详解
2019/06/27 Python
Python 一键获取百度网盘提取码的方法
2019/08/01 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
培训自我鉴定
2014/01/31 职场文书
党员干部公开承诺书
2014/03/26 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
营销团队口号
2014/06/06 职场文书
档案管理员岗位职责
2015/02/12 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
安全教育片观后感
2015/06/17 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
golang特有程序结构入门教程
2021/06/02 Python