使用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的checked伪类实现OL的隐藏显示的方法
Dec 18 HTML / CSS
HTML5中通过li-canvas轻松实现单图、多图、圆角图绘制,单行文字、多行文字等
Nov 30 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
Jan 31 HTML / CSS
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
May 07 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
HTML5 Canvas的事件处理介绍
Apr 24 HTML / CSS
详解HTML5中的Communication API基本使用方法
Jan 29 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
HTML5实现签到 功能
Oct 09 HTML / CSS
Html5与App的通讯方式详解
Oct 24 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 新手入门
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
Laravel 5 框架入门(四)完结篇
2015/04/09 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
老生常谈PHP数组函数array_merge(必看篇)
2017/05/25 PHP
PHP实现限制IP访问及提交次数的方法详解
2017/07/17 PHP
django中的ajax组件教程详解
2018/10/18 PHP
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
Bootstrap 网站实例之单页营销网站
2016/10/20 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
vue.js element-ui tree树形控件改iview的方法
2018/03/29 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
2018/10/28 Javascript
vue 引用自定义ttf、otf、在线字体的方法
2019/05/09 Javascript
微信小程序 自定义复选框实现代码实例
2019/09/04 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
numpy中索引和切片详解
2017/12/15 Python
python保存网页图片到本地的方法
2018/07/24 Python
python实现简易动态时钟
2018/11/19 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
在Pycharm中调试Django项目程序的操作方法
2019/07/17 Python
python requests指定出口ip的例子
2019/07/25 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
Liu Jo西班牙官网:意大利服装品牌
2019/09/11 全球购物
商务助理岗位职责
2013/11/13 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
酒店总经理职务说明书
2014/02/26 职场文书
黄金酒广告词
2014/03/21 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
写得不错的求职信范文
2014/07/11 职场文书
公司晚会主持词
2019/04/17 职场文书
详解Redis在SpringBoot工程中的综合应用
2021/10/16 Redis