效果图:
一.方法要点:
1.animation函数使用
2.nth-child(n)控制子元素
3. @keyframes+自定义函数 来定义动画规则和关键帧
二.核心代码讲解:
1
animation: myMove 1.5s ease alternate infinite;
参数对应: name,durationm,timing-function,direction,iteration-count
2.
(1)其中0% 50% 100%定义不同时刻的帧
(2)rotateY(deg) 以Y轴为对称轴进行旋转deg度 scale()进行放大缩小
(3)利用top来进行上下移动
@keyframes myMove {
0% {
color:rgb(299,255,80);
top:160px;
transform: rotateY(0deg) scale(1.0);
}
50%{
color:rgb(2,150,200);
top:0;
transform: rotateY(180deg) scale(1.5);
}
100%{
color:rgb(255,106,198);
top:160px;
transform: rotateY(0deg) scale(1.0);
}
}
三.完整源码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>第一个Vue程序</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本,包含了有帮助的命令行警告-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
.outBox ul{
text-align: center;
display: flex;
margin-left: 350px;
margin-top: 80px;
}
.outBox li{
list-style: none;
margin: 20px;
font-size:120px;
position: relative;
top:0;
color:#fff;
}
.outBox li:nth-child(1){
animation: myMove 1.5s ease alternate infinite;
}
.outBox li:nth-child(2){
animation: myMove 1.5s ease 0.5s alternate infinite;
}
.outBox li:nth-child(3){
animation: myMove 1.5s ease 1s alternate infinite;
}
.outBox li:nth-child(4){
animation: myMove 1.5s ease 1.5s alternate infinite;
}
@keyframes myMove {
0% {
color:rgb(299,255,80);
top:160px;
transform: rotateY(0deg) scale(1.0);
}
50%{
color:rgb(2,150,200);
top:0;
transform: rotateY(180deg) scale(1.5);
}
100%{
color:rgb(255,106,198);
top:160px;
transform: rotateY(0deg) scale(1.0);
}
}
</style>
</head>
<body>
<div class="outBox">
<ul>
<li>1</li>
<li>0</li>
<li>2</li>
<li>4</li>
</ul>
</div>
</body>
</html>