美文网首页
实心圆往外扩散

实心圆往外扩散

作者: 不想起床_9a42 | 来源:发表于2019-12-31 10:16 被阅读0次

@keyframes warn {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.3;

}

75% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.5;

}

100% {

transform: scale(1);

-webkit-transform: scale(1);

opacity: 0.0;

}

}

@keyframes warn1 {

0% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.0;

}

25% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.1;

}

50% {

transform: scale(0.3);

-webkit-transform: scale(0.3);

opacity: 0.3;

}

75% {

transform: scale(0.5);

-webkit-transform: scale(0.5);

opacity: 0.5;

}

100% {

transform: scale(0.8);

-webkit-transform: scale(0.8);

opacity: 0.0;

}

}

.container {

position: relative;

width: 120px;

height: 120px;

left: 10px;

top: 10px;

}

/* 保持大小不变的小圆点 */

.dot {

position: absolute;

width: 49px;

height: 49px;

left: 134px;

top: 134px;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border: 1px solid #33ccff;

border-radius: 50%;

background-color:#33ccff; /* 实心圆 ,如果没有这个就是一个小圆圈 */

z-index: 2;

}

/* 产生动画(向外扩散变大)的圆圈 第一个圆 */

.pulse {

position: absolute;

width: 77px;

height: 77px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

-webkit-animation: warn 2s ease-out;

-moz-animation: warn 2s ease-out;

animation: warn 2s ease-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */

}

/* 产生动画(向外扩散变大)的圆圈 第二个圆 */

.pulse1 {

position: absolute;

width: 77px;

height: 77px;

left: 120px;

top: 120px;

border: 1px solid #3399ff;

-webkit-border-radius: 50%;

-moz-border-radius: 50%;

border-radius: 50%;

z-index: 1;

opacity: 0;

-webkit-animation: warn1 2s ease-out;

-moz-animation: warn1 2s ease-out;

animation: warn1 2s ease-out;

-webkit-animation-iteration-count: infinite;

-moz-animation-iteration-count: infinite;

animation-iteration-count: infinite;

box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */

}

</style>

</head>

<body>

由实心圆点向四周扩散(有阴影)

<div class="container">

<div class="dot"></div>

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

<div class="pulse1"></div>

</div>

相关文章

  • 实心圆往外扩散

    @keyframes warn { 0% { transform: scale(0.3); -webkit-tra...

  • Android 开源控件

    扩散圆 简介 扩散效果支持:圆形,圆环 扩散圆支持:正圆,椭圆 中心圆支持:图片,正圆,椭圆 属性列表 效果展示 ...

  • HTML的一些标签

    换行 水平线 列表 无序列表: 属性:type:[disc:实心圆、circle:空心圆、square:方块] ...

  • iOS绘制实心圆空心圆、图片的裁剪并加边框.

    一,首先来说说怎么绘制实心圆和空心圆 新建类DrawCyclesView继承至UIView,DrawCyclesV...

  • 【TOAN HOANG 专题(70)】实心圆图

    本文搬运自国外Tableau大神原创文章,Tableau交流问答群为国内唯一独家授权组织,未经许可不得转载 Toa...

  • 戒指

    环形的小戒指,从中间隔开,一边是镂空的正六边形,一边是小巧的实心圆,实心圆闪耀着透亮的金属光泽,隔空凝视着正六边形...

  • CSS核心属性2---列表相关

    关于列表的css声明 1、定义列表符号样式: list-style-type:disc(实心圆)/circle(空...

  • 1.22商业书籍

    先读有用的书,适合自己的书,做好手头的事情,再往外扩散,读更多的书,来充实自己的阅历。

  • UIBezierPath 贝塞尔曲线的几种基本用法

    闲来无事总结了一下贝塞尔曲线的几种基本用法。包括:直线、曲线、连续曲线、连续折线、圆弧、空心圆、实心圆、椭圆、矩形...

  • 2021-11-09 绘制实心,空心圆

    #1.空心圆 CGContextRef ctx = UIGraphicsGetCurrentContext()...

网友评论

      本文标题:实心圆往外扩散

      本文链接:https://www.haomeiwen.com/subject/hestwctx.html