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

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3圆圈动画放大缩小循环动画效果</title>
<style>.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;
}
}</style>
</head><body><div class="dot"></div>
</body>
</html>

转载于:https://www.cnblogs.com/chensihan/p/6805570.html

CSS3圆圈动画放大缩小循环动画效果相关推荐

html 圆圈扩大动画,CSS3圆圈动画放大缩小循环动画效果
今天在写一个zblog主题的时候,在无限下拉加载等待时间内,需要加一个动画循环效果,如上图! 1.简单放大缩小循环!html> CSS3圆圈动画放大缩小循环动画效果 .dot { margin: ...
php动画缩放,分享一个CSS3圆圈放大缩小循环动画的效果代码
CSS3圆圈动画放大缩小循环动画效果,特效简单又漂亮,看着听不错的,感兴趣的朋友们可以来看一下代码如下: CSS3圆圈动画放大缩小循环动画效果 .dot { margin:150px auto; w ...
js 图片放大缩小（动画效果）
本文实现鼠标滑过图片事件,鼠标滑到图片上则图片逐渐放大,鼠标划走图片逐渐缩小到原大小.下面分析整个过程: 图片逐渐放大缩小怎么实现? 1.用css设置图片的宽和高的不同值可以实现大小不同的图片,那么通 ...
css3旋转带放大缩小效果
下载地址 css3旋转带放大缩小效果,鼠标悬停的时候触发放大或缩小并旋转的动画. dd:
112、Flutter实现图片放大缩小的动画小
Flutter是通过Animation组件来实现动画效果的 main.dart文件中的内容与上一篇显示的代码相同这一篇博客主要关注放大缩小的动画效果 1.WelcomeScreen widget继 ...
dw如何点击图片放大的代码_Dreamweaver 如何做到图形放大缩小的交互效果
[第四步]回到Dreamweaver 软件界面,在body标签前面适当位置输入: window.οnlοad=function(){ var btn=document.getElementById( ...
css图片不断放大缩小的动画效果
<img class="move-img" @click="goGet" width="26px" src="../../a ...
小程序动画-循环放大缩小的动画（一闪一闪的）
var circleCount = 0; // 心跳的外框动画 this.animationMiddleHeaderItem = wx.createAnimation({ duration:1000, ...
css动画放大缩小效果
1.实现星星变大变小忽闪的感觉 html: <div class="xing_one my_xing"><img src="~@/static/imag ...

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

CSS3圆圈动画放大缩小循环动画效果相关推荐

最新文章

热门文章