css3实现动画效果完整代码demo
过渡渐隐
适合两张图⽚调整其中⼀个透明度，完整代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="code.jquery/jquery-latest.js"></script>
<title> CSS3实现过渡渐隐动画效果 </title>
</head>
<style>
.pics{
position: relative;
width: 600px;
height: 400px;
margin: 100px auto;
}
.pic1{
width: 600px;
height: 400px;
}
@keyframes picDraw {
0%{
opacity: 0;
}
50%{
opacity: 1;
}
100%{
opacity: 0;
}
}
.pic2{
position: absolute;
width: 600px;
height: 400px;
left: 0;
top: 0;
-webkit-animation: picDraw 5s ease-in-out infinite;
}
</style>
<body>
js控制css3动画触发<div class="pics">
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1565070048390&di=d17ca71c421fb37f010670b13f8469a0&imgtype=0&src=http%3A%2F%2Fent.workercn%2Fhtml%2Ffiles%2F2019-01%2F17%2F          <img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000
&sec=1565070048392&di=25517e3e1c388458ca1fa224f252a09b&imgtype=0&src=http%3A%2F%2Fpic4.zhimg%2F50%2Fv2-5fba3a93e46665204b7481    </div>
<script type="text/javascript">
</script>
</body>
</html>
涟漪
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="code.jquery/jquery-latest.js"></script>
<title> CSS3实现涟漪呼吸扩散动画效果 </title>
</head>
<style>
body{
background: #ccc;
}
.
live{
position: relative;
width: 100px;
height: 100px;
margin:50px auto;
}
.live img{
width: 100px;
height: 100px;
border-radius: 50%;
z-index: 0;
}
@keyframes living {
0%{
transform: scale(1);
opacity: 0.5;
}
50%{
transform: scale(1.5);
opacity: 0;  /*圆形放⼤的同时，透明度逐渐减⼩为0*/
}
100%{
transform: scale(1);
opacity: 0.5;
}
}
.live span{
position: absolute;
width: 100px;
height: 100px;
left: 0;
bottom: 0;
background: #fff;
border-radius: 50%;
-webkit-animation: living 3s linear infinite;
z-index: -1;
}
.live span:nth-child(2){
-webkit-animation-delay: 1.5s; /*第⼆个span动画延迟1.5秒*/
}
</style>
<body>
<div class="live">
<img src="timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=15650692342
21&di=10912e3e1dd6bcda6ee79b0b03f6a50d&imgtype=0&src=http%3A%2F%2Fku.90sjimg%2Felement_origin_min_pic%2F18%2F0        <span></span>
<span></span>
</div>
<script type="text/javascript">
</script>
</body>
</html>
放⼤缩⼩
呼吸的⼼完整代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<script type="text/javascript" src="code.jquery/jquery-latest.js"></script>
<title> CSS3实现放⼤缩⼩动画效果 </title>
</head>
<style>
@keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
0%{ transform: scale(1);  /*开始为原始⼤⼩*/
}
25%{transform: scale(1.1); /*放⼤1.1倍*/
}
50%{transform: scale(1);}
75%{transform: scale(1.1);}
}
.ballon{
width: 352px;
height: 352px;
margin:50px auto;
background: url("timgsa.baidu/timg?image&quality=80&size=b9999_10000&sec=1565070909804&di=a7ccc7fab948694dbda15dcaa47de9ac&imgtype=0&src=http%3A%2F%2Fimg.juimg%2Ftuku%2Fyulantu%2F120928%2F        background-size: 352px 352px;
-webkit-animation-name: scaleDraw; /*关键帧名称*/
-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
-webkit-animation-iteration-count: infinite;  /*动画播放的次数*/
-webkit-animation-duration: 5s; /*动画所花费的时间*/
}
</style>
<body>
<div class="ballon"></div>
<script type="text/javascript">
</script>
</body>
</html>
简单案例1：
div
{
width:100px;
height:100px;
background:red;
animation:myfirst 5s;/*把 "myfirst" 动画捆绑到 div 元素，时长：5 秒*/
-webkit-animation:myfirst 5s; /* Safari and Chrome */
color:yellow;
text-align:center;
line-height:100px
}
@keyframes myfirst
{
from {background:red;color:yellow}
to {background:yellow;color:red}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background:red;color:yellow}
to {background:yellow;color:red}
}
html
<body>
<div>叶落森</div>
</body>
简单案例2：
div
{
width:100px;
height:100px;
background:red;
position:relative;/*定位，为下⾯的top和left使⽤*/
animation-name:myfirst;/*把 "myfirst" 动画捆绑到 div 元素*/
animation-duration:5s;/*时长：5 秒。默认是 0*/
animation-timing-function:linear;/*规定动画的速度曲线，匀速。默认是 "ease"。*/
animation-delay:2s;/*规定动画何时开始。默认是 0。*/
animation-iteration-count:infinite;/*规定动画被播放⽆限次数。默认是 1*/
animation-direction:alternate;/*规定动画在下⼀周期逆向地播放。默认是 "normal"。*/    animation-play-state:running;/*规定动画是否正在运⾏或暂停。默认是 "running"。*/ /* Safari and Chrome: */
-webkit-animation-name:myfirst;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes myfirst
{
0%  {background:red; left:0px; top:0px;}
25%  {background:yellow; left:200px; top:0px;}
50%  {background:blue; left:200px; top:200px;}
75%  {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%  {background:red; left:0px; top:0px;} 25%  {background:yellow; left:200px; top:0px;} 50%  {background:blue; left:200px; top:200px;} 75%  {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;}
}
<body>
<div></div>
</body>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。