<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<!--
一个样式至另一个样式的过程
@keyframes
-->
<style>
.a{
width: 200px;
height: 200px;
border: 2px solid black;
/* 综合写法 */
animation: myframe 2s infinite linear alternate;
/* animation-name: myframe; */
/* animation-duration: 2s; */
/* animation-timing-function: linear; */
/*播放次数 */
/* animation-iteration-count: infinite; */
/* 正向及逆向 */
/* animation-duration:altrenate; */
}
.b{
animation: myframe1 2s infinite linear alternate;
width: 200px;
height: 200px;
border: 2px solid black;
}
.c{
animation: myframe2 2s infinite linear alternate;
width: 200px;
height: 200px;
border: 2px solid black;
}
.d{
animation: myframe3 2s infinite linear alternate;
width: 200px;
height: 200px;
border: 2px solid black;
}
/* 创建动画 */
@keyframes myframe {
from{
background-color: aquamarine;
transform: translate(200px,200px) rotate(360deg);
width: 0px;
height: 0px;
}
to{
background-color: red;
width: 100px;
height: 100px;
}
0%{
background-color: brown;
}
20%{
background-color: rgb(42, 63, 165);
}
40%{
background-color: brown;
}
60%{
background-color: rgb(72, 11, 11);
}
80%{
background-color: rgb(118, 165, 42);
}
100%{
background-color: rgba(42, 165, 138, 0.255);
}
}
@keyframes myframe1 {
from{
background-color: aquamarine;
transform: scale(0.5) skew(360deg,40deg);
width: 0px;
height: 0px;
}
to{
background-color: red;
width: 100px;
height: 100px;
}
0%{
background-color: brown;
}
20%{
background-color: rgb(42, 63, 165);
}
40%{
background-color: brown;
}
60%{
background-color: rgb(72, 11, 11);
}
80%{
background-color: rgb(118, 165, 42);
}
100%{
background-color: rgba(42, 165, 138, 0.255);
}
}
@keyframes myframe2 {
from{
background-color: aquamarine;
transform: translate(200px,200px) skew(360deg,40deg);
width: 0px;
height: 0px;
}
to{
background-color: red;
width: 100px;
height: 100px;
}
0%{
background-color: brown;
}
20%{
background-color: rgb(42, 63, 165);
}
40%{
background-color: brown;
}
60%{
background-color: rgb(72, 11, 11);
}
80%{
background-color: rgb(118, 165, 42);
}
100%{
background-color: rgba(42, 165, 138, 0.255);
}
}
@keyframes myframe3 {
from{
background-color: aquamarine;
transform: scale(0.5) rotate(360deg);
width: 0px;
height: 0px;
}
to{
background-color: red;
width: 100px;
height: 100px;
}
0%{
background-color: brown;
}
20%{
background-color: rgb(42, 63, 165);
}
40%{
background-color: brown;
}
60%{
background-color: rgb(72, 11, 11);
}
80%{
background-color: rgb(118, 165, 42);
}
100%{
background-color: rgba(42, 165, 138, 0.255);
}
}
@keyframes myframe {
from{
background-color: aquamarine;
transform: translate(200px,200px) rotate(360deg);
width: 0px;
height: 0px;
}
to{
background-color: red;
width: 100px;
height: 100px;
}
0%{
background-color: brown;
}
20%{
background-color: rgb(42, 63, 165);
}
40%{
background-color: brown;
}
60%{
background-color: rgb(72, 11, 11);
}
80%{
background-color: rgb(118, 165, 42);
}
100%{
background-color: rgba(42, 165, 138, 0.255);
}
}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
