CSS3动画产生圆圈由小变大向外扩散的效果

时间：2022-06-14 03:33:14

涉及到 CSS3 的动画（animation）、2D 转换（transform: scale），具体如代码所示。

github： https://github.com/wind-stone/CSS3-Circle-Diffusion

<!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"></div>

    <div class="pulse"></div>

</div>

</body>

</html>

CSS3动画产生圆圈由小变大向外扩散的效果的更多相关文章

  1. Taro -- Swiper的图片由小变大3d轮播效果

    Swiper的图片由小变大3d轮播效果 this.state = ({ nowIdx:, swiperH:'', imgList:[ {img:'../../assets/12.jpg'}, {img ...

  2. css3 图标变大变小在变小变大

    css3 @-webkit-keyframes anLoca { from { -webkit-transform: scale3d(1, 1, 1); } to { -webkit-transfor ...

  3. MySQL架构由小变大的演变过程

    假设一个网站(discuz)从最开始访问量很小做到日pv千万,我们来推测一下它的mysql服务器架构演变过程. 第一阶段网站访问量日pv量级在1w以下.单台机器跑web和db,不需要做架构层调优(比如 ...

  4. 动画：view从点逐渐变大（放大效果）

    -(void) animationAlert:(UIView *)view { CAKeyframeAnimation *popAnimation = [CAKeyframeAnimation ani ...

  5. css3动画，点击圆形背景扩展整个页面效果

    上次做项目的时候,要求点击链接,这个链接的圆形背景扩散充满整个页面,今天把这个效果整理一下,是简单的css3的动画特效,粘贴下面的代码看效果 <!DOCTYPE html> <htm ...

  6. wow&period;js让css3动画变动更有趣（滚动页面动画模拟懒加载特效）

    CSS3的出现给网站页面增加了活力,网站增色不少,有这么小小的一款插件就能做出很多动画效果. 最重要的是它:简单易用.轻量级.无需 jQuery......他就是wow.js 地址:https://d ...

  7. css3动画-加载中&period;&period;&period;

    写几个简单的加载中动画吧. 像前面三种都是相当于几个不同的点轮流来播放同一动画:变大变小.css3里面有一个用于尺度变换的方法:scale(x,y):定义 2D 缩放转换,改变元素的宽度和高度. 第四 ...

  8. CSS3动画&commat;keyframes图片变大变小颜色变化

    在我做公司官网的时候也会帮着写一些游戏的静态页,今天产品要求为了突出一个按钮,他要有颜色的变化而且要变大变小,然后我就在网上搜了下呼吸灯和其他的案例,写了个小damo,看着还有些魔性嘞. html: ...

  9. css3实现逐渐变大的圆填充div背景的效果

    手机端现在的一些应用会运用上这样一个效果,就是duang的一下出现一个圆变大直到填充整个div,动感十足. 想到css3的scale属性,就自己来实现一下. <div id="bcd& ...

随机推荐

  1. C&plus;&plus;primer 练习11&period;33：实现你自己版本的单词转换程序

    // 11_33.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include<iostream> #include< ...

  2. &lbrack;HIve - LanguageManual&rsqb; Hive Operators and User-Defined Functions &lpar;UDFs&rpar;

    Hive Operators and User-Defined Functions (UDFs) Hive Operators and User-Defined Functions (UDFs) Bu ...

  3. js如何判断是手机端还是PC端访问

    function isMobile(){ var sUserAgent= navigator.userAgent.toLowerCase(), bIsIpad= sUserAgent.match(/i ...

  4. 纯css实现三角形

    在设计界面的时候,通常需要三角形的图标,一般做法是用图片,其实也可以使用css来实现.如下: 向上的三角形   向右的三角形   向下的三角形   向左的三角形   实现它们的css分别是: .top ...

  5. Winform开发框架中工作流模块之审批会签操作

    在前面介绍了框架中工作流的几个开发过程,本篇随笔重点介绍一下日常审批环节中的具体处理过程,从开始创建表单,以及各个审批.会签过程的流转过程,希望大家对其中流程的处理有一个大概的印象. 1.请假申请表单 ...

  6. Java多线程模型

    谈到Java多线程就涉及到多线程的模型及Java线程与底层操作系统之间的关系.正如我们熟知,现代机器可以分为硬件和软件两大块,如图2-5-1-1,硬件是基础,软件提供实现不同功能的手段.而且软件可以分 ...

  7. 大数据学习之Linux进阶02

    大数据学习之Linux进阶 1-> 配置IP 1)修改配置文件 vi /sysconfig/network-scripts/ifcfg-eno16777736 2)注释掉dhcp #BOOTPR ...

  8. VUE-Windows系统下搭建vue环境

    一.安装node.js(https://nodejs.org/en/) 下载完毕后,可以安装node,建议不要安装在系统盘(如C:).注意记下路径..   此处默认安装这4项即可,点击Next按钮. ...

  9. 定点CORDIC算法求所有三角函数及向量模的原理分析、硬件实现（FPGA）

    一.CORDIC算法 CORDIC(Coordinate Rotation DIgital Computer)是一种通过迭代对多种数学函数求值的方法,它可以对三角函数.双曲函数和平面旋转问题进行求解. ...

  10. 为什么zookeeper集群中节点配置个数是奇数个？

    Zookeeper的大部分操作都是通过选举产生的.比如,标记一个写是否成功是要在超过一半节点发送写请求成功时才认为有效.同样,Zookeeper选择领导者节点也是在超过一半节点同意时才有效.最后,Zo ...

相关文章