html画布画出圆圈向外扩散,CSS3向外扩散的圆

无标题文档

@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;

}

1

css3 如何实现圆边框的渐变

使用 css 实现下面效果: 把效果分解. 代码一:

学习CSS3之实心圆

CSS3是最新版本的CSS,学习后可以更好的用于工作及自己修改自己代码的各种样式. border-radius圆角方法画实心圆.相当于在长方形(正方形)上画半径为边长一半的圆弧. 效果如上图,代码如下 ...

用CSS3.0画圆

CSS3.0中有一个border-radius属性,这个属性允许向 div 元素添加圆角边框,也就是div边角不再一直是直角,在CSS3.0中可以做成圆角了,所以我们可以用这个属性用div画一个圆,或 ...

jquery、css3动态显示百分比圆

动态显示百分圆

html、css如何画实心圆

css3画实心圆 实现方法相当简单,css代码如下: .circle{ width:100px; height:100px; border-radius:50px; /* 图形的半径 */ }

CSS实现文本周围插入符号

CSS实现文本周围插入符号的方案 本文要讨论的是如何在文本的周围插入图标,怎么样控制它们之间的位置关系,通过HTML结构合理性与CSS属性的使用来比较不同方案所实现效果的优缺点. 常见设计稿要求 在文 ...

CSS3组件化之圆波扩散

本篇文章主要介绍用CSS3实现的水波扩散涟漪,圆波扩散,光圈扩散,雷达波向外散发动画. 预期效果应该是这样:,其实应该比这个更优美,因为设计师提供的gif出现透明度丢失问题,所以建议用css3实现. ...

图解CSS3制作圆环形进度条的实例教程

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...

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

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