在日常工作中，比如在大屏开发的时候就经常需要用到动画，有以下效果，文字上下动，图片转圈，还有透明度变化
效果如下
上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="divParent">
<div class="divText">我是文字</div>
<div class="divAnimare"></div>
</div>
<style>
.divParent{
width:200px;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
position:relative;
border: 1px solid #000;
background-color: yellow;
-webkit-animation: opacity_frame 2s linear infinite;
}
.divText{
color: #0ebbfe;
-webkit-animation: tip_up 2s linear infinite;
}
.divAnimare{
position:absolute;
top:0;
background:url(./bg1.png);
width: 200px;
height: 200px;
-webkit-animation: 2s round linear infinite;
}
@-webkit-keyframes opacity_frame{
0%{
opacity: 1;
}
30%{
opacity: 1;
}
50%{
opacity: 0.5;
}
70%{
opacity: 1;
}
100%{
opacity: 1;
}
}
@-webkit-keyframes tip_up{
0%{
-webkit-transform: translateY(0);
}
50%{
-webkit-transform: translateY(-5px);
}
100%{
-webkit-transform: translateY(0);
}
}
@-webkit-keyframes round{
0%{
-webkit-transform: rotate(0);
}
100%{
-webkit-transform: rotate(360deg);
}
}
</style>
</body>
</html>
