CSS3地图动态实例代码(圆圈向外扩散)


Posted in HTML / CSS onJune 15, 2018

实例效果图

CSS3地图动态实例代码(圆圈向外扩散)

实例说明:在地图上定位多个不同的点,然后从点中央向外扩散光圈。

实例要点:主要考察CSS3中动画的使用

主要代码:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>地图</title>  
    <style>  
        *{padding:0px;margin: 0px;}  
        .bg{width: 100%;height:770px;position: relative;}  
        .bg img{width: 100%;height: 100%;}  
        .bg .content{width: 748px;height:618px;position: absolute;left: 410px;top: 60px;}  
        .bg .content div{background:#009FD9;width: 10px;height: 10px;border-radius:50%;position: relative;}  
        .bg .content p{position: absolute;width: 10px;height: 10px;border-radius:50%;animation: myfirst 1.5s  infinite;box-shadow: 0px 0px 1px #009FD9; }  
        .bg .content  span{position: absolute;display:block;width: 10px;height: 10px;border-radius:50%;animation: myfirst 1.5s  infinite;box-shadow: 0px 0px 1px #009FD9; animation-delay: 0.5s;}  
        .bg .content .one{position: absolute;left:600px; top:100px;}  
        .bg .content .two{position: absolute;left:550px; top:150px;}  
        .bg .content .three{position: absolute;left:500px; top:200px;}  
        .bg .content .four{position: absolute;left:450px; top:250px;}  
        .bg .content .five{position: absolute;left:400px; top:300px;}  
        .bg .content .six{position: absolute;left:400px; top:350px;}  
        .bg .content .seven{background: #FF9900;position: absolute;left:350px; top:300px;}  
        .bg .content .eight{background: #FF9900;position: absolute;left:400px; top:250px;}  
        .bg .content .nine{background: #A2A9B4;position: absolute;left:250px; top:200px;}  
        .bg .content .ten{background: #A2A9B4;position: absolute;left:300px; top:350px;}  
        @keyframes myfirst{  
            20% {transform: scale(2);}  
            40% {transform: scale(3);}  
            60% {transform: scale(4);}  
            80% {transform: scale(5);}  
            100% {transform: scale(6);}  
        }  
    </style>  
</head>  
<body>  
    <div class="bg"><img src="bg.jpg" alt="">  
        <div class="content"><img src="bg1.png" alt="">  
            <div class="one"><p></p><span></span></div>  
            <div class="two"><p></p><span></span></div>  
            <div class="three"><p></p><span></span></div>  
            <div class="four"><p></p><span></span></div>  
            <div class="five"><p></p><span></span></div>  
            <div class="six"><p></p><span></span></div>  
            <div class="seven"><p></p><span></span></div>  
            <div class="eight"><p></p><span></span></div>  
            <div class="nine"><p></p><span></span></div>  
            <div class="ten"><p></p><span></span></div>  
        </div>  
    </div>  
</body>  
</html>

注意事项:

1.不同的点通过定位分散排布在地图上

2.每个点内存放着两个不同的隐藏点,隐藏点通过动画延时功能形成点扩散的动态效果

3.点外扩散的扩散圈由隐藏点的阴影构成,然后通过动画一点一点扩大
 

总结

以上所述是小编给大家介绍的CSS3地图动态实例代码(圆圈向外扩散),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
css3实现顶部社会化分享按钮示例
May 06 HTML / CSS
几个CSS3的flex弹性盒模型布局的简单例子演示
May 12 HTML / CSS
使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题
Jun 28 HTML / CSS
浅谈CSS3鼠标移入图片动态提示效果(transform)
Nov 06 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
html5+CSS3+JS实现七夕言情功能代码
Aug 28 HTML / CSS
html5使用canvas画一条线
Dec 15 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 24 HTML / CSS
css3中的calc函数浅析
Jul 10 #HTML / CSS
详解css3 object-fit属性
Jul 27 #HTML / CSS
CSS3对图片照片进行边缘模糊处理的实现
Aug 08 #HTML / CSS
详解CSS3伸缩布局盒模型Flex布局
Aug 20 #HTML / CSS
css3动画效果抖动解决方法
Sep 03 #HTML / CSS
微信小程序实现可实时改变转速的css3旋转动画实例代码
Sep 11 #HTML / CSS
CSS3 background-image颜色渐变的实现代码
Sep 13 #HTML / CSS
You might like
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
javascript Excel操作知识点
2009/04/24 Javascript
基于jquery的仿百度搜索框效果代码
2011/04/11 Javascript
你未必知道的JavaScript和CSS交互的5种方法
2014/04/02 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
2014/11/13 Javascript
JS自定义对象实现Java中Map对象功能的方法
2015/01/20 Javascript
JS限制文本框只能输入数字和字母方法
2015/02/28 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
jquery Ajax 全局调用封装实例详解
2017/01/16 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
Angular.JS中的this指向详解
2017/05/17 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
vue实现多个元素或多个组件之间动画效果
2018/09/25 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
iview实现图片上传功能
2020/06/29 Javascript
[01:37]全新的一集《真视界》——TI7总决赛
2017/09/21 DOTA
pandas修改DataFrame列名的方法
2018/04/08 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
Python3.5装饰器原理及应用实例详解
2019/04/30 Python
详解Python3网络爬虫(二):利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
Django静态资源部署404问题解决方案
2020/05/11 Python
Html5写一个简单的俄罗斯方块小游戏
2019/12/03 HTML / CSS
Nike德国官网:Nike.com (DE)
2018/11/13 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
学院领导推荐信
2013/10/30 职场文书
情人节活动策划方案
2014/02/27 职场文书
高三高考决心书
2014/03/11 职场文书
日语系毕业求职信
2014/07/27 职场文书
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python