使用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 相关文章推荐
分享8款纯CSS3实现的搜索框功能
Sep 14 HTML / CSS
使用CSS实现阅读进度条
Feb 27 HTML / CSS
CSS3 clip-path 用法介绍详解
Mar 01 HTML / CSS
CSS3 优势以及网页设计师如何使用CSS3技术
Jul 29 HTML / CSS
CSS3的常见transformation图形变化用法小结
May 13 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
Jan 06 HTML / CSS
HTML5之SVG 2D入门7—SVG元素的重用与引用
Jan 30 HTML / CSS
iframe与window.onload如何使用详解
May 07 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应用技巧
2008/03/27 PHP
什么是OneThink oneThink后台添加插件步骤
2016/04/13 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
ExtJs中简单的登录界面制作方法
2010/08/19 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
2013/12/24 Javascript
JavaScript中操作字符串小结
2015/05/04 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
jQuery 3.0十大新特性最终版发布
2016/07/14 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
react native 获取地理位置的方法示例
2018/08/28 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
js中的数组对象排序分析
2018/12/11 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
利用Dectorator分模块存储Vuex状态的实现
2019/02/05 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
微信小程序实现加入购物车滑动轨迹
2020/11/18 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
使用Python的Supervisor进行进程监控以及自动启动
2014/05/29 Python
使用pyecharts无法import Bar的解决方案
2020/04/23 Python
浅谈Series和DataFrame中的sort_index方法
2018/06/07 Python
python3+PyQt5 使用三种不同的简便项窗口部件显示数据的方法
2019/06/17 Python
如何在 Django 模板中输出 &quot;{{&quot;
2020/01/24 Python
Python读取文件内容为字符串的方法(多种方法详解)
2020/03/04 Python
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
英国著名的茶叶品牌:Whittard of Chelsea
2016/09/22 全球购物
美国大城市最热门旅游景点门票:CityPASS
2016/12/16 全球购物
几个MySql的面试题
2013/04/22 面试题
机械专业毕业生自荐信
2013/11/02 职场文书
七年级音乐教学反思
2014/01/26 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
教代会闭幕词
2015/01/28 职场文书
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis