php动画缩放,分享一个CSS3圆圈放大缩小循环动画的效果代码

CSS3圆圈动画放大缩小循环动画效果，特效简单又漂亮，看着听不错的，感兴趣的朋友们可以来看一下

代码如下：

CSS3圆圈动画放大缩小循环动画效果

.dot {

margin:150px auto;

width:200px;

height:200px;

background-color:#E3E3E3;

border-radius: 50%;

box-shadow: 0 0 10px rgba(0,0,0,.3) inset;

-webkit-animation-name:'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/

-webkit-animation-duration: 2s;/*动画持续时间*/

-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/

-webkit-animation-delay: 0s;/*动画延迟时间*/

-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/

-webkit-animation-direction: alternate;/*定义动画方式*/

}

@keyframes ripple {

0% {

opacity:0.35;

width:190px;

height:190px;

}

100% {

opacity: 0.2;

width:250px;

height:250px;

}

【相关推荐】

php动画缩放,分享一个CSS3圆圈放大缩小循环动画的效果代码相关推荐

html 圆圈扩大动画,CSS3圆圈动画放大缩小循环动画效果
今天在写一个zblog主题的时候,在无限下拉加载等待时间内,需要加一个动画循环效果,如上图! 1.简单放大缩小循环!html> CSS3圆圈动画放大缩小循环动画效果 .dot { margin: ...
CSS3圆圈动画放大缩小循环动画效果
代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" c ...
分享一个CSS3的网格系统架构 - ResponsiveAeon
日期:2012-7-30 来源:GBin1.com 在线演示本地下载曾经介绍过其它类型的CSS3网格系统,今天我们介绍一款能够帮助你快速创建基于HTML5/CSS3的响应式布局框架 - Res ...
css3 图片放大缩小闪烁效果
直接把图片替换就可以了,我的图片是透明的,所以body设置为黑色的,不不要可以去掉 <!doctype html> <html lang="en"> < ...
112、Flutter实现图片放大缩小的动画小
Flutter是通过Animation组件来实现动画效果的 main.dart文件中的内容与上一篇显示的代码相同这一篇博客主要关注放大缩小的动画效果 1.WelcomeScreen widget继 ...
js 图片放大缩小（动画效果）
本文实现鼠标滑过图片事件,鼠标滑到图片上则图片逐渐放大,鼠标划走图片逐渐缩小到原大小.下面分析整个过程: 图片逐渐放大缩小怎么实现? 1.用css设置图片的宽和高的不同值可以实现大小不同的图片,那么通 ...
loading窗口动画 web_分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
可缩放性ImageView（可以放大缩小）
由于项目需求的原因,最近一直在研究可缩放性ImageView,用本文来记录一下最近所学: 该ImageView的实现功能有: 1)初步打开时,图片按比例满屏(填充ImageView)显示. 2)在放大 ...
怎么把图片无损放大？分享一个图片无损放大小妙招
怎么把图片无损放大呢?无损放大功能是指在不损失图像质量的情况下将图片放大,这意味着即使将图片放大到很大的尺寸,也不会出现模糊或失真的情况.在我们制作海报.PPT演示.社交媒体分享等方面,如果我们使用的 ...

php动画缩放,分享一个CSS3圆圈放大缩小循环动画的效果代码

php动画缩放,分享一个CSS3圆圈放大缩小循环动画的效果代码相关推荐

最新文章

热门文章