本次练习设置了动画效果,将文字设置为炫彩、图片设置为旋转的动画。
动画设置方式:
/* 第一种,开始动作和结束动作 */
@keyframes donghua{
from{
}to{
}
}
/* 分段执行 */
@keyframes donghua2{
0%{
}20%{
}40%{
}80%{
}100%{
}
}
下面为图片(网页效果为动态,下图为静态图片):
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>乔巴</title>
<link rel="stylesheet" href="Style.css">
</head>
<body>
<div>
<img src="乔巴.jpg" alt="">
<img src="乔巴a.gif" alt="">
<section>
<h1>托尼托尼·乔巴</h1>
<h2>船医</h2>
<h3>赏金:100贝利<br><br>爱吃棉花糖的小乔巴</h3>
</section>
</div>
</body>
</html>
@keyframes donghua{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@keyframes secai{
0%{
color: pink;
}10%{
color: plum;
}20%{
color: powderblue;
}30%{
color: rgb(106, 169, 228);
}40%{
color: salmon;
}50%{
color: sandybrown;
}60%{
color: seagreen;
}70%{
color: sienna;
}80%{
color: silver;
}90%{
color: slategray;
}100%{
color: springgreen;
}
}
@keyframes secai2{
0%{
color: rgb(106, 169, 228);
}10%{
color: plum;
}20%{
color: powderblue;
}30%{
color: sandybrown;
}40%{
color: salmon;
}50%{
color: pink;
}60%{
color: seagreen;
}70%{
color: springgreen;color: sienna;
}80%{
color: silver;
}90%{
color: slategray;
}100%{
color: sienna;
}
}
@keyframes xuanzhuan{
0%{
transform: rotate(30deg) ;
}
50%{
transform: rotate(0deg) scale(1.5,1.5);
}
100%{
transform: rotate(30deg) scale(0.9,0.9);
}
}
body{
background-color:rgb(106, 169, 228);
}
h1,h2{
margin:0;
}
p{
margin:10px;
}
div section h1{
float: right;
font-size: 50px;
animation: secai 3s linear infinite;
position: relative;
top:-150px;
left: 240px;
}
div section h2{
font-size: 40px;
animation: secai2 3s linear infinite;
position: relative;
top:30px;
left: 70px;
}
div section h3{
font-size: 30px;
animation: secai2 2.8s linear infinite;
position: relative;
top:40px;
left: 70px;
}
div{
float: left;
width: 800px;
height: 500px;
border: 10px solid white;
box-shadow: 0 0 40px pink;
background-color: blanchedalmond;
position: relative;
top:200px;
left: 400px;
transform: rotate(30deg);
animation: xuanzhuan 2s linear infinite;
}
div img:nth-child(1){
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
top:20px;
left: 20px;
animation: donghua 2s linear infinite;
}
div img:nth-child(2){
float: right;
width: 370px;
height: 250px;
border:3px solid rgb(216, 146, 158);
position: relative;
top: 190px;
right: 90px;
border-radius: 10px;
}