CSS3向外扩散的圆

最新推荐文章于 2024-07-24 11:47:23 发布
最新推荐文章于 2024-07-24 11:47:23 发布
阅读量339 收藏
点赞数
文章标签： 前端 ViewUI
原文链接：http://www.cnblogs.com/agansj/p/7649832.html
版权

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
@keyframes warn {
0% {
transform: scale(0);
opacity: 0.0;
}
25% {
transform: scale(0);
opacity: 0.1;
}
50% {
transform: scale(0.1);
opacity: 0.3;
}
75% {
transform: scale(0.5);
opacity: 0.5;
}
100% {
transform: scale(1);
opacity: 0.0;
}
}
@-webkit-keyframes "warn" {
0% {
-webkit-transform: scale(0);
opacity: 0.0;
}
25% {
-webkit-transform: scale(0);
opacity: 0.1;
}
50% {
-webkit-transform: scale(0.1);
opacity: 0.3;
}
75% {
-webkit-transform: scale(0.5);
opacity: 0.5;
}
100% {
-webkit-transform: scale(1);
opacity: 0.0;
}
}

.container {
position: relative;
width: 40px;
height: 40px;
border: 1px solid #000;
}
/* 保持大小不变的小圆圈 */
.dot {
position: absolute;
width: 6px;
height: 6px;
left: 15px;
top: 15px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border: 2px solid red;
border-radius: 20px;
z-index: 2;
}
/* 产生动画（向外扩散变大）的圆圈 */
.pulse {
position: absolute;
width: 24px;
height: 24px;
left: 2px;
top: 2px;
border: 6px solid red;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
z-index: 1;
opacity: 0;
-webkit-animation: warn 3s ease-out;
-moz-animation: warn 3s ease-out;
animation: warn 3s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
</style>

</head>

<body>
<div class="container">
<div class="dot">1</div>
<div class="pulse"></div>
</div>
</body>
</html>

 

转载于:https://www.cnblogs.com/agansj/p/7649832.html

weixin_30624825
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3地图动态实例（圆圈向外扩散）
吉帅振博客
06-14 8286
实例效果图实例说明：在地图上定位多个不同的点，然后从点中央向外扩散光圈。实例要点：主要考察CSS3中动画的使用主要代码：&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;地图&lt;/title&gt; &lt;
css3 彩带扩散效果_css3实战汇总（附源码）
weixin_28304023的博客
01-08 655
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画（高级附源码）的续篇也是本人最后一篇介绍css3技巧的文章，因为css这块知识难点不是很多，更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结，另一方面也是希望能教大家一些实用的技巧和高效开发css的方式，以提高在工作中的效率。我们将学到box-shadow的高级应用制作自适应的...
css3实现的圆形从中心向四周扩散动画效果
09-08
css3实现的圆形从中心向四周扩散动画效果
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
09-22
主要给大家介绍了关于如何利用CSS3动画实现圆圈由小变大向外扩散效果的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
使用css3实现【水波纹扩散效果】
xixixixixixixi21的博客
07-14 768
在CSS3中，我利用::before和::after伪元素以及动画（animation）来创建一个简单的水波纹扩散效果。.wave-effect容器设置了绝对定位，并给它的背景设置了一个线性渐变，同时应用了一个名为wave的动画，模拟了水波向右平移然后回溯的效果。
纯css3圆形从中心向四周扩散动画效果.zip
07-03
css3圆形扩散动画，css3四周扩散动画
css实现不断向外扩散的圆
A873054267的博客
03-20 2186
实现原理： 主要就是依靠css动画特性中的 transform变换---依据scale变换 为实现波纹效果，会写两个元素到内部，然后让第二个元素延时执行动画，即可实现。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图&l...
CSS3地图动态实例代码(圆圈向外扩散)
09-27
在本实例中，我们探索了如何使用CSS3创建一个动态的地图效果，具体表现为圆圈从定位的点向外扩散。这个效果对于网站设计、互动展示或者数据可视化应用来说，能够增加用户的交互体验，使得信息传递更加生动有趣。接...
css3实现类似地图定位循环扩散光圈效果
m0_72929120的博客
12-19 1311
【代码】css3实现类似地图定位循环扩散光圈效果。
CSS实现扩散，水波纹
最新发布
像鱼的博客
07-24 130
css实现灯光扩散的效果
css实现波纹扩散效果
halo1416的博客
02-10 4292
一、实现效果 二、实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-casle=1.0,user-scalable=no" /> <title>圆点扩散</title> <style type="text/css"&gt
css 波纹扩散_css实现水纹扩散
weixin_36399948的博客
03-03 592
css：.main{position: relative;height:70px;width: 310px;margin: 0 auto;background-color: #f34147;}.circle{position: relative;float: left;height:70px;width: 70px;}/*线*/.hr{position: relative;float: left;...
CSS实战 - 波纹扩散效果
weixin_42017221的博客
02-11 1228
效果一：涟漪扩散效果效果二：波动扩散效果。
css实现按钮点击时的扩散效果
weixin_59424057的博客
03-07 1695
css实现按钮点击效果，按钮边框扩散效果
CSS3 实现圆圈动态发光特效动画的制作
weixin_72303943的博客
07-21 4176
CSS3 实现圆圈动态发光特效动画的制作
css+html 实现 光晕 光圈
weixin_30952535的博客
07-15 1466
<style> html { height: 100%;}body { height: 100%; background-color: #000; margin: 0; padding: 0;}.lensflare { position: relative; overflow: hidden; width: 100%; min-h...
[CSS]用CSS animation实现圆圈向外扩展的动画效果
change66的博客
07-21 3136
圆圈实现向外扩展的动画效果，代码如下： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <script type="text/javascript" src="http://code.jquery.com/
CSS3动画产生圆圈由小变大向外扩散的效果
热门推荐
风动之石的专栏
12-31 3万+
涉及到 CSS3 的动画（animation）、2D 转换（transform: scale），具体如代码所示。 无标题文档 @keyframes warn { 0% { transform: scale(0); opacity: 0.0; } 25% { transform: scale(0); opacity: 0.1; } 50% { transfo
css3圆形向外扩散动画
04-14
很高兴回答你的问题！CSS3 可以实现圆形向外扩散的动画，可以通过使用 @keyframes 规则来创建动画效果。具体实现可以参考以下代码示例： ```html <!DOCTYPE html> <html> <head> <style> .circle { height: 100px; width: 100px; border-radius: 50%; background-color: red; position: relative; animation: expand 2s ease-out infinite; } @keyframes expand { 0% { transform: scale(0.5); opacity: 0.5; } 100% { transform: scale(1.5); opacity: 0; } } </style> </head> <body> <div class="circle"></div> </body> </html> ``` 这段代码会创建一个红色的圆形，并用 CSS3 动画效果让圆形逐渐扩散到原来的1.5倍大小，并且逐渐变透明，不断循环播放动画效果。希望可以帮到你！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值