css3动画产生圆圈从小到大

最新推荐文章于 2024-08-05 14:56:36 发布
最新推荐文章于 2024-08-05 14:56:36 发布
阅读量4.8k 收藏 4
点赞数
  1. 这里就是通过css3实现了像涟漪一样的效果
  2. <!DOCTYPE html>  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6. <title>无标题文档</title>  
  7. <style>  
  8. @keyframes warn {  
  9.     0% {  
  10.         transform: scale(0);  
  11.         opacity: 0.0;  
  12.     }  
  13.     25% {  
  14.         transform: scale(0);  
  15.         opacity: 0.1;  
  16.     }  
  17.     50% {  
  18.         transform: scale(0.1);  
  19.         opacity: 0.3;  
  20.     }  
  21.     75% {  
  22.         transform: scale(0.5);  
  23.         opacity: 0.5;  
  24.     }  
  25.     100% {  
  26.         transform: scale(1);  
  27.         opacity: 0.0;  
  28.     }  
  29. }  
  30. @-webkit-keyframes "warn" {  
  31.     0% {  
  32.         -webkit-transform: scale(0);  
  33.         opacity: 0.0;  
  34.     }  
  35.     25% {  
  36.         -webkit-transform: scale(0);  
  37.         opacity: 0.1;  
  38.     }  
  39.     50% {  
  40.         -webkit-transform: scale(0.1);  
  41.         opacity: 0.3;  
  42.     }  
  43.     75% {  
  44.         -webkit-transform: scale(0.5);  
  45.         opacity: 0.5;  
  46.     }  
  47.     100% {  
  48.         -webkit-transform: scale(1);  
  49.         opacity: 0.0;  
  50.     }  
  51. }  
  52.   
  53. .container {  
  54.     position: relative;  
  55.     width: 40px;  
  56.     height: 40px;  
  57.     border: 1px solid #000;  
  58. }  
  59. /* 保持大小不变的小圆圈  */  
  60. .dot {  
  61.     position: absolute;  
  62.     width: 6px;  
  63.     height: 6px;  
  64.     left: 15px;  
  65.     top: 15px;  
  66.     -webkit-border-radius: 20px;  
  67.     -moz-border-radius: 20px;  
  68.     border: 2px solid red;  
  69.     border-radius: 20px;  
  70.     z-index: 2;  
  71. }  
  72. /* 产生动画（向外扩散变大）的圆圈  */  
  73. .pulse {  
  74.     position: absolute;  
  75.     width: 24px;   
  76.     height: 24px;  
  77.     left: 2px;  
  78.     top: 2px;  
  79.     border: 6px solid red;  
  80.     -webkit-border-radius: 30px;  
  81.     -moz-border-radius: 30px;  
  82.     border-radius: 30px;  
  83.     z-index: 1;  
  84.     opacity: 0;  
  85.     -webkit-animation: warn 3s ease-out;  
  86.     -moz-animation: warn 3s ease-out;  
  87.     animation: warn 3s ease-out;  
  88.     -webkit-animation-iteration-count: infinite;  
  89.     -moz-animation-iteration-count: infinite;  
  90.     animation-iteration-count: infinite;  
  91. }  
  92. </style>  
  93.   
  94. </head>  
  95.   
  96. <body>  
  97. <div class="container">  
  98.     <div class="dot"></div>  
  99.     <div class="pulse"></div>  
  100. </div>  
  101. </body>  
  102. </html>  
liying123466
关注
css3简易实现图标动画由小到大逐个显现
am50506的博客
06-12 1136
在制作网站时避免图片太平淡经常会用到动画效果：由小到大跳跃出现。这种效果很有视觉冲击力，显著提高关注度~ 原理：利用css3的动画属性@keyframes@-moz-keyframes@-webkit-keyframes定义动画suofang,再用animation调用suofang这一动画帧，并将动画添加到图片上，需要注意的是需要给图片相当于初始化的一个处理 transform...
html实现圆圈逐渐放大,利用CSS3动画实现圆圈由小变大向外扩散的效果实例
weixin_30722051的博客
06-01 2214
前言本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画(animation)、2D 转换(transform: scale)css3中新增了一个animation的属性，该属性类似于创建一个animation对象如：animation: bounce 2.0s infinite ease-in-out;animation有以下几个参数：属性描...
css 加载图标 小圆大圆循环动画
qq_43901960的博客
08-05 150
css 加载图标 小圆大圆循环动画
Css3动画 - 小圆围绕大圆的自转公转
sinat_36539161的博客
11-13 3876
一个面试题，题目：实现一个小圆围绕大圆转圈   例1】、先让她转起来，也就是自转： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;circle&lt;/title&gt; &lt;s
css小动画：圆形1s内从小变大随时间渐变
anliao6401的博客
10-25 610
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .yxdh{ width:200px; height:200...
html动画变大,CSS3 由小变大的过渡动画
weixin_39517520的博客
06-07 1430
一个DIV，由小变大，然后加透视怎么实现啊。单纯的使用scale好像不怎么明显啊。如果加上透视，效果更逼真啊。用动画啊，`<head><meta charset="UTF-8"><title>动画</title><style>.div{width: 100px;height: 100px;position: absolute;backgr...
利用CSS3动画实现圆圈由小变大向外扩散的效果实例
01-19
本文主要给大家分享的是关于利用CSS3动画实现圆圈由小变大向外扩散的效果实例，文中涉及到 CSS3 的动画（animation）、2D 转换（transform: scale） css3中新增了一个animation的属性，该属性类似于创建一个...
CSS3地图动态实例代码(圆圈向外扩散)
09-27
在本实例中，`@keyframes myfirst`定义了一个名为`myfirst`的动画，它在20%、40%、60%、80%和100%的时间点分别改变了元素的缩放比例，从而实现了圆圈从小到大、再到消失的过程。 代码中，每个圆圈都是一个`div`元素...
紧密排列圆圈气泡CSS3特效
06-24
例如，他们可能会创建一个名为`bubble-animation`的关键帧动画，其中包含从初始状态到最终状态的一系列变化，如气泡从小变大，然后慢慢缩小消失的过程。 为了实现紧密排列，开发者可能使用了网格布局（grid layout...
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义）
05-30
CSS3实现鼠标移动到图片上图片变大（缓慢变大，有过渡效果，放大的过程是有动画过渡的，这个过渡的时间可以自定义） CSS3的transform:scale()可以实现按比例放大或者缩小功能。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。 参考文档： http://blog.csdn.net/u014175572/article/details/51535768
前端特效源代码——绚丽多彩的圆圈气泡CSS3背景动画特效
09-18
例如，可以设置气泡从无到有、从小到大、从淡入到淡出的过程，使背景看起来生动活泼。以下是一个简单的关键帧动画示例： ```css @keyframes bubbleAnimation { 0% { transform: scale(0); opacity: 0; } 50% {...
纯css3圆形从中心向四周扩散动画效果
weixin_33795833的博客
12-13 960
查看效果：http://hovertree.com/texiao/css3/37/ 先来个简单的示例，例如： @keyframes hovertreemove{from {top:30px;}to {top:130px;}}效果：http://hovertree.com/texiao/css3/37/1.htm 可以通过 @keyframes 规则，创建动画。 创建动画的原理是，将一套 C...
CSS3动画合集:(帧动画)(补间动画)(呼吸动画(由小到大)(由上到小)) 上
weixin_42839080的博客
08-10 8093
首先我们先了解animation这个属性的语法格式: 语法:animation:动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意. 第一:规定动画 @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 } 100% } 比如下面的例子用来规定一个动...
css3 animation 实现点绕圈 转圈效果
weixin_53898445的博客
11-23 1223
关键：转的不是点 是点所在的div（此div与圆重叠且宽高相等）
CSS3 元素转圈动画 （元素旋转动画）
cxu123321的博客
08-07 2073
CSS3 元素转圈动画 （元素旋转动画） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
css动画展示小球运动
wenye____的博客
07-19 78
htmlcss效果图。
CSS实心小圆点依次出现动画
weixin_52406641的博客
12-22 611
<template> <div class="loadings"> <div class="loading5"> <div class="loading-circle"></div> <div class="loading-circle"></div> <div class="loading-circle"></
JSP学生学籍管理系统设计与实现(源代码+论文+开题报告+外文翻译+答辩PPT).zip
09-21
1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。 1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md或论文文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。 5、资源来自互联网采集，如有侵权，私聊博主删除。 6、可私信博主看论文后选择购买源代码。
省市区数据，完成三级联动，选择地区
最新发布
09-21
省市区数据，完成三级联动，选择地区
css动画效果从小到大
05-30
CSS动画效果从小到大可以通过以下几种方式实现： 1. 缩放动画：使用CSS3的transform属性中的scale()函数，将元素的大小从小到大进行缩放。可以通过设置transition属性来控制缩放的过渡效果。 2. 淡入动画：使用CSS3的opacity属性，将元素的透明度从0逐渐增加到1，实现从无到有的淡入效果。同样可以通过设置transition属性来控制淡入的过渡效果。 3. 位移动画：使用CSS3的transform属性中的translate()函数，将元素在水平或垂直方向上进行位移。可以通过设置transition属性来控制位移的过渡效果。 4. 旋转动画：使用CSS3的transform属性中的rotate()函数，将元素进行旋转。可以通过设置transition属性来控制旋转的过渡效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值