<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 100px;
height: 100px;
background-color: #ff0789;
border-radius: 50%;
/*animation: go 5s;!*animation:调用动画*!*/
animation-name: go;/*动画名字*/
animation-duration: 5s;/*动画周期*/
animation-iteration-count: 2;/*动画次数 infinite无数次*/
animation-timing-function: linear;/*动画速度 贝塞尔曲线 steps(img)*/
animation-delay: 1s;/*动画延迟*/
animation-direction: alternate;/*reverse反向 alternate交替*/
animation-fill-mode: backwards;/*控制元素在动画结束的样式*/
/*backwards 动画播放之前0%的位置的状态 动画初始状态可见 一般和delay一起用可以明显看出效果*/
/*forwards 动画播放之后100%的位置的状态 动画结束状态可见*/
/*both 动画播放之前 动画初始状态可见,同时动画播放之后动画结束状态也可见*/
}
.box:hover{
animation-play-state: paused;/*鼠标移动上去暂停*/
}
@keyframes go {/*定义关键帧 动画名字*/
0%{
background-color: blue;
transform: translate(0,0);
}
25%{
background-color: black;
transform: translate(300px,0);
}
50%{
background-color: #999999;
transform: translate(300px,300px);
}
75%{
background-color: #b9c9fd;
transform: translate(0,300px);
}
100%{
background-color: blue;
transform: translate(0,0);
}
}
</style>
</head>
<body>
<div class="box"></div>
<!--
动画复合属性
animation: animation-name animation-duration animation-delay animation-timing-function 后边随意排
-->
</body>
</html>
Python3Turtle