CSS3实现脉冲地标

最新推荐文章于 2024-09-03 03:15:58 发布
最新推荐文章于 2024-09-03 03:15:58 发布
阅读量339 收藏 1
点赞数 1
分类专栏： web前端 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37672443/article/details/108734900
版权

效果图：

HTML部分：

<div class='pin'></div>
<div class='pulse'></div>

CSS部分：

body,
html {
    height: 100%;
}
body {
    background: #2f2f2f;
}
.pin {
    width: 30px;
    height: 30px;
    -webkit-border-radius: 50% 50% 50% 0;
    border-radius: 50% 50% 50% 0;
    background: #80a1b6;
    position: absolute;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -o-animation-name: bounce;
    -ms-animation-name: bounce;
    animation-name: bounce;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -o-animation-duration: 1s;
    -ms-animation-duration: 1s;
    animation-duration: 1s;
}
.pin:after {
    content: '';
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: #30414c;
    position: absolute;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.pulse {
    background: rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 11px 0px 0px -12px;
    -webkit-transform: rotateX(55deg);
    -moz-transform: rotateX(55deg);
    -o-transform: rotateX(55deg);
    -ms-transform: rotateX(55deg);
    transform: rotateX(55deg);
    z-index: -2;
}
.pulse:after {
    content: "";
    -webkit-border-radius: 50%;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    -webkit-animation: pulsate 1s ease-out;
    -moz-animation: pulsate 1s ease-out;
    -o-animation: pulsate 1s ease-out;
    -ms-animation: pulsate 1s ease-out;
    animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -o-animation-iteration-count: infinite;
    -ms-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-box-shadow: 0 0 1px 2px #89849b;
    box-shadow: 0 0 1px 2px #89849b;
    -webkit-animation-delay: 1.1s;
    -moz-animation-delay: 1.1s;
    -o-animation-delay: 1.1s;
    -ms-animation-delay: 1.1s;
    animation-delay: 1.1s;
}
@-moz-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -o-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}
@-webkit-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -o-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}
@-o-keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -o-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}
@keyframes pulsate {
    0% {
        -webkit-transform: scale(0.1, 0.1);
        -moz-transform: scale(0.1, 0.1);
        -o-transform: scale(0.1, 0.1);
        -ms-transform: scale(0.1, 0.1);
        transform: scale(0.1, 0.1);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
    50% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
    }
    100% {
        -webkit-transform: scale(1.2, 1.2);
        -moz-transform: scale(1.2, 1.2);
        -o-transform: scale(1.2, 1.2);
        -ms-transform: scale(1.2, 1.2);
        transform: scale(1.2, 1.2);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
    }
}
@-moz-keyframes bounce {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
        -moz-transform: translateY(-2000px) rotate(-45deg);
        -o-transform: translateY(-2000px) rotate(-45deg);
        -ms-transform: translateY(-2000px) rotate(-45deg);
        transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(30px) rotate(-45deg);
        -moz-transform: translateY(30px) rotate(-45deg);
        -o-transform: translateY(30px) rotate(-45deg);
        -ms-transform: translateY(30px) rotate(-45deg);
        transform: translateY(30px) rotate(-45deg);
    }
    80% {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        -moz-transform: translateY(-10px) rotate(-45deg);
        -o-transform: translateY(-10px) rotate(-45deg);
        -ms-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg);
    }
    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -o-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}
@-webkit-keyframes bounce {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
        -moz-transform: translateY(-2000px) rotate(-45deg);
        -o-transform: translateY(-2000px) rotate(-45deg);
        -ms-transform: translateY(-2000px) rotate(-45deg);
        transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(30px) rotate(-45deg);
        -moz-transform: translateY(30px) rotate(-45deg);
        -o-transform: translateY(30px) rotate(-45deg);
        -ms-transform: translateY(30px) rotate(-45deg);
        transform: translateY(30px) rotate(-45deg);
    }
    80% {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        -moz-transform: translateY(-10px) rotate(-45deg);
        -o-transform: translateY(-10px) rotate(-45deg);
        -ms-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg);
    }
    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -o-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}
@-o-keyframes bounce {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
        -moz-transform: translateY(-2000px) rotate(-45deg);
        -o-transform: translateY(-2000px) rotate(-45deg);
        -ms-transform: translateY(-2000px) rotate(-45deg);
        transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(30px) rotate(-45deg);
        -moz-transform: translateY(30px) rotate(-45deg);
        -o-transform: translateY(30px) rotate(-45deg);
        -ms-transform: translateY(30px) rotate(-45deg);
        transform: translateY(30px) rotate(-45deg);
    }
    80% {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        -moz-transform: translateY(-10px) rotate(-45deg);
        -o-transform: translateY(-10px) rotate(-45deg);
        -ms-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg);
    }
    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -o-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}
@keyframes bounce {
    0% {
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
        -moz-transform: translateY(-2000px) rotate(-45deg);
        -o-transform: translateY(-2000px) rotate(-45deg);
        -ms-transform: translateY(-2000px) rotate(-45deg);
        transform: translateY(-2000px) rotate(-45deg);
    }
    60% {
        opacity: 1;
        -ms-filter: none;
        filter: none;
        -webkit-transform: translateY(30px) rotate(-45deg);
        -moz-transform: translateY(30px) rotate(-45deg);
        -o-transform: translateY(30px) rotate(-45deg);
        -ms-transform: translateY(30px) rotate(-45deg);
        transform: translateY(30px) rotate(-45deg);
    }
    80% {
        -webkit-transform: translateY(-10px) rotate(-45deg);
        -moz-transform: translateY(-10px) rotate(-45deg);
        -o-transform: translateY(-10px) rotate(-45deg);
        -ms-transform: translateY(-10px) rotate(-45deg);
        transform: translateY(-10px) rotate(-45deg);
    }
    100% {
        -webkit-transform: translateY(0) rotate(-45deg);
        -moz-transform: translateY(0) rotate(-45deg);
        -o-transform: translateY(0) rotate(-45deg);
        -ms-transform: translateY(0) rotate(-45deg);
        transform: translateY(0) rotate(-45deg);
    }
}

源码来源于 https://wow.techbrood.com/fiddle/3817

魔法小生
关注
专栏目录
CSS3实现MacBook苹果笔记本特效特效代码
03-20
【CSS3实现MacBook苹果笔记本特效特效代码】是一种利用现代Web技术，特别是CSS3，来创建逼真的MacBook苹果笔记本电脑视觉效果的编程实践。在Web设计领域，这样的特效能够提升用户体验，为网站添加生动有趣的元素，...
你不知道的CSS霓虹灯文字总结
前端仙人的博客
05-25 999
霓虹灯文字可以为任何网站增添美好的未来感。我一直都很喜欢霓虹灯的那种未来感。 在本文中，我们将使用CSS和keyframes实现文本发光效果，以及各种霓虹灯动画的方法。 最终效果： 为文本添加发光效果 首先，让文本发光。可以使用text-shadow属性在CSS中完成此操作。 .neonText { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 ...
css创建一个真正的地图标点
weixin_35753291的博客
12-20 494
在 HTML 中创建地图标点通常是使用 元素和 元素。 首先，你需要在 HTML 文档中插入一个 元素，并为它指定一个名称，例如： <map name="myMap"> </map> 然后，你可以在 元素内插入多个 元素，来指定地图中的各个区域。每个 元素都有一个 shape 属性和一个 coords 属性，用于指定区域的形状和坐标。 例如，你可以使用以下代码...
如何使用CSS实现一个带有动画效果的进度条
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-03 1660
在Web应用程序中，进度条是一个常见的UI元素，用于指示某个任务的完成情况。我们将从基础概念出发，逐步构建一个完整的示例，并在此过程中分享一些实际开发中的技巧。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。进度条是一个用来显示完成进度的UI组件，通常由一个容器和一个指示当前进度的填充块组成。比如，当进度条开始填充时，可以有一个淡入的效果。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，容器，另一个是内部的。
html 边框四周闪光的效果,纯css 边框闪烁效果
weixin_29056145的博客
06-04 2571
代码如下：#ho-shan{width: 100%;height: 100%;position: relative;outline: none;background-color: #dd524d;border-radius: 5px;transform-origin: 0 0;opacity: .7;border: none;}#ho-shan::after {content: "";-webki...
怎么用css绘制像地图标点的图形
weixin_35754676的博客
12-20 526
要使用 CSS 绘制类似地图标点的图形，可以使用圆形来模拟标点。使用 CSS 的 border-radius 属性可以将矩形变成圆形，并使用 background-color 属性设置圆的颜色。 例如，下面的代码可以创建一个大小为 50px 的红色圆形： .map-marker { width: 50px; height: 50px; border-radius: 50%; bac...
uniapp纯CSS3渐变线条脉冲动画效果
outsider76557的博客
09-14 1131
纯css3定制线条脉冲动图，记录边框渐变，背景渐变变化，干货满满。
纯CSS3实现汽车行驶动画特效代码
03-20
【纯CSS3实现汽车行驶动画特效代码】是一个利用CSS3的强大功能来创建动态效果的实例。在现代网页设计中，CSS3已经成为了不可或缺的一部分，它提供了丰富的样式控制和动画效果，使得无需JavaScript或其他编程语言就能...
CSS3实现3D翻书效果
01-21
但总感觉动画效果不好，当然还有其他解决办法，但突然想到，CSS3为我们提供了animation，我们为什么不去使用使用呢，只要为加上animation动画就可以直接避免这个问题，animation动画默认是每次都执行完动画，所以，...
CSS3实现水位充满文字特效特效代码
03-20
CSS3实现水位充满文字特效是一款既是Loading特效也是文字特效，Loading动画开始时，文字中的水位渐渐上升，为了模拟水位上升的真实效果，水面还会波浪浮动，当Loading动画结束时，文字中的水位又会渐渐退去，动画...
纯CSS3实现3D浮动按钮特效代码
03-20
纯CSS3实现3D浮动按钮是一款效果很酷的纯CSS3 3D浮动按钮，按钮是一个3D立体的悬浮圆形，按钮上面可以是文字和爱心图案，按钮底部还有阴影效果，显得很立体。另外，当把鼠标滑过按钮时，按钮就会下陷，就像在水面上...
简单脉冲动画效果实现
qq_33003143的博客
06-12 1504
使用CSS变量简单实现脉冲效果。
HTML5+CSS3小实例：脉冲波纹催眠动画特效
艾恩小灰灰的博客
09-26 243
实例：脉冲波纹催眠动画特效。技术栈：HTML+CSS。
css2d炫酷效果,CSS3炫酷效果-swing、疯狂摆动、脉冲
weixin_33160876的博客
08-04 453
今天跟大家分享CSS3动画效果公用代码div{float:left;width:300px;height:200px;margin:05px;background:#F39;}p{text-align:center;color:#fff;font:16px/200px微软雅黑;}swing效果.swing{transform-origin:centertop0;}/*设置旋转...
单选框 复选框 隐藏之后，绑定的change事件在ie中失效的问题
weixin_30678349的博客
08-18 157
有时候需要对单选框和复选框进行美化，就需要在<input type="radio">和<input type="checkbox">元素的外层包裹label元素。隐藏input元素，display：none； visibile 在iput元素上添加change，click事件，在谷歌 火狐中都运行很好，但是在ie中所有事件不起作用 解决办法： 方法1： 不隐藏inpu...
制作css开关,纯CSS3代码制作仿真开关
weixin_36111194的博客
08-03 251
纯CSS3代码制作仿真开关全部代码，模仿的即是这张GIF图片，是不是很逼真呢？纯CSS3代码制作仿真开关body {background: #444444;}.switch input {top: 0;right: 0;bottom: 0;left: 0;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: ...
css —— 按钮水波纹扩散动画效果实现
Mickeymouse
04-26 4470
水波纹动画效果
CSS 3.0实现水波纹动画特效
越陌度阡
05-30 6648
给大家分享一个用CSS实现的波纹动画效果，效果如下： 以下是代码实现，欢迎大家复制粘贴和收藏。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta h
@keyframes、transform详解与实例
热门推荐
u011558902的专栏
09-05 2万+
转自文章  https://segmentfault.com/a/1190000004460780#articleHeader5 一、transform 和@keyframes动画的区别： @keyframes动画是循环的，而transform 只执行一遍. 二、@keyframes CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animati
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值