Without further ado, let's just serve it directly.
1. Fallen leaves animation (status description: like the autumn wind blowing leaves, the leaves are mercilessly teasing the autumn wind) The
code is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title >texiao1</title>
<style>
{
margin: 0;
padding: 0;
}
body {
background: url("./image/timg.jpg")no-repeat;/ Set the background image of fallen leaves*/
background-size: 100%;
}
.one{
height: 160px;
width: 120px;
}
.one>img{
width: 60%;
height: 60%;
}
@keyframes yezi {
0% {
transform: rotatez(0deg);
}/* 自定义动画*/
20%{
transform: rotatez(720deg);
height: 10%;
width: 10%;
}
40%{
transform: rotatez(1440deg);
height: 40%;
width: 40%;
}
60%{
transform: rotatez(1620deg);
height: 40%;
width: 40%;
}
80%{
transform: rotatez(1800deg);
height: 60%;
width: 60%;
}
100%{
transform: rotatez(1980deg);
height: 60%;
width: 60%;
}
}/* 动画分五个步骤*/
.one_1{
position: absolute;
animation: yezi 20s linear infinite;
animation-direction:alternate;
}/*动画应用，落叶旋转*/
.one_2{
animation: yezi 20s linear infinite;
animation-timing-function: cubic-bezier(0.42,0,1,1);/*设置个别动画轨迹*/
}
.bao{
width: 1500px;
height: 1000px;
margin: 0 auto;
}
.one1{
margin-left: 200px;
margin-top: -100px;
}
.one2{
margin-left: 200px;
margin-top: -300px;
}
.one3{
margin-right: 200px;
margin-top: -500px;
}
</style></head>
<body>
<div class="bao" >
<div style="float: left" class="one1">
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
</div>
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div style="float: left" class="one2">
<div class="one one_2">
<img src="./image/ye3.png " alt="" >
</div>
</div>
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div class="one one_1">
<img src="./image/ye1.png " alt="" ></div>
<div class="one one_2">
<img src="./image/ye3.png " alt="" >
</div> <div class="one one_2">
<img src="./image/ye3.png " alt="" >
</div>
<div style="float: right" class="one3">
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div class="one one_2">
<img src="./image/ye3.png " alt="" >
</div>
</div>
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div> <div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div class="one one_2">
<img src="./image/ye2.png " alt="" >
</div>
<div style="float: right" >
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div class="one one_2">
<img src="./image/ye3.png " alt="" >
</div>
<div class="one one_2">
<img src="./image/ye2.png " alt="" >
</div>
</div>
</div>
</body>
</html>
Because it is a dynamic image, please copy the code, replace the image, and watch it by yourself.
2. The picture of the car running and running (the sound of my hooves is a beautiful mistake, I am not a returnee, because I drive an Audi) The
code is as follows:
<!DOCTYPE html>
<html>
<head lang="en">
< meta charset="UTF-8">
<title>texiao2</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
background: url("./image/b999a9014c086e062487d66e08087bf40ad1cbec.jpg")no-repeat ;
background-size: 100%;
background-position: 0 -150px ;
position: relative;
}
.che{
position: absolute;
width: 400px;
height: 200px;
top: 400px;
left: -400px;
background: url("./image/cheshen.png")no-repeat;
background-size: 145%;
background-position: -95px -40px;
animation: pao 10s ease-in-out infinite;
}/*定义最外围车身的框架及背景图片*/
@keyframes pao {
from { left: -400px; }
to{
left: 1400px;
}
}/*定义车整体动画*/
.houlun {
width: 65px;
height: 65px;
top: 115px;
left: 28px;
border-radius: 50%;
border: 1px solid red;
position: absolute;
animation: che 0.5s linear infinite;
}/*后轮div定义*/
.qianlun {
width: 65px;
height: 65px;
top: 115px;
left:293px;
border-radius: 50%;
border: 1px solid red;
position: absolute;
animation: che 0.5s linear infinite;
}/*前轮div定义*/
.che img{
max-height: 100%;
max-width: 100%;
}
@keyframes che {
from {
transform: rotatez(90deg);
}
to {
transform: rotatez(810deg);
}
}
</style></head>
<body>
<div class="che" >
<div class="qianlun">
<img src="./image/qianlun.png" alt="" >
</div>
<div class="houlun">
<img src="./image/houlun.png" alt="" >
</div></div>
</body>
</html>
3.扇子（还可以点击一下）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>shanzi</title>
.one{ <style>
*{
margin: 0;
padding: 0;
}
body {
background: url("./image/shui.jpg")no-repeat;
background-size: 100%;
position: relative;
}
.one{
position: absolute;
width: 30px;
height: 500px;
border-radius: 20px;
text-align: center;
font-size: 18px;
top: 0px;
font-family:"华文楷体","STKaiti " ;
box-shadow: 0 0 20px #806000;
border: 2px solid #997835;
animation: shanzi 5s 2;
animation-direction:alternate;
}
@keyframes shanzi {
from {
transform: rotatez(0deg);
}
to{
transform: rotatez(-60deg);
}
}
.one_1 {
left: 400px;
}
.one_1:hover .one_2 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_3 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_4 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_5 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_6 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_7 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_8 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_9 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_10 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_11 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_12{
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_13 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_14 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_15 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_16 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_17 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_18 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_19 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_20 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_21 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_22 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_23 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_24 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_25 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_26 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_27 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
.one_1:hover .one_28 {
transform: rotatez(5deg);
transform-origin:0% 90%;
}
</style></head>
<body>
<div class="one one_1" >
Loneliness blossoms in lonely places
<div class="one one_2">
Lonely places find no way
<div class="one one_3">
Who blames the autumn wind for urging people Thinking
<div class="one one_4">
One lovesickness and one madness
<div class="one one_5">
The idiot writes a love poem
<div class="one one_6">
Love is in Morian
<div class="one one_7 ">
The sky is high and the earth is wide and free
<div class="one one_8">
No matter what happens, don't be haggard
<div class="one one_9">
Lovers are separated in the world
<div class="one one_10">Do
n't laugh at monks and nuns and break the world
< div class="one one_11">Beautiful women
do not wait for lovers
<div class="one one_12">
Infatuation is in vain and bitterness
<div class="one one_13">Sweet
and ambitious
<div class="one one_14">Walking without
fear of ice and snow
<div class="one one_15">
Clouds don't chase Kim Il High
<div class="one one_16">
Why should I bend my waist
<div class="one one_17">Walk over green waters
and green mountains
<div class="one one_18">Mountain Qingjingxiu
people want to look at
it<div class="one one_19">Housing
overlooking the road thousands
of times<div class="one one_20">I
don't know what to hate
<div class="one one_21">
Suddenly See Jie Yun wandering the sky
<div class="one one_22">Unrestrained
and more envious
<div class="one one_23"> My generation is
hesitant to doubt Xidong
<div class="one one_24">
How can I transform into a dragon
<div class="one one_25"> We are
hesitant to doubt Xidong
<div class="one one_26">
, how can we transform into a dragon
< div class="one one_26">div class="one one_27">
How can such a dragon be transformed into a dragon
<div class="one one_28">
【Twenty-eight quatrains】
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div></div>
</body>
</html>
4.发光字体（不是很炫酷）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>faguangzi</title>
<style>
{
margin: 0;
padding: 0;
}
body {
background-color:black ;
font-size: 50px;
}
.one{
text-align: center;
color: white;
animation: faguang 4s linear infinite;
}
@keyframes faguang {
25%{color: #744800;
text-shadow:0 0 10px darkgray;
}
50%{color: #744800;
text-shadow:0 0 50px #f2f2f2;
}
75%{color: #d39200;
text-shadow:0 0 100px #f2f2f2;
}
100%{color: orangered;
text-shadow:0 0 150px #f2f2f2;
}
}
.five{
text-align: center;
color: white;
animation: faguang5 4s linear infinite;
}
@keyframes faguang5 {
25%{color: #744800;
text-shadow:0 0 10px darkgray;
}
50%{color: #744800;
text-shadow:0 0 50px #f2f2f2;
}
75%{color: #d39200;
text-shadow:0 0 100px #f2f2f2;
}
100%{color: orangered;
text-shadow:0 0 150px #f2f2f2;
}
}
.two{
text-align: center;
color: white;
animation: faguang2 4s linear infinite;
}
@keyframes faguang2 {
25%{color: #744800;
text-shadow:0 0 10px #7c0515;
}
50%{color: #a36700;
text-shadow:0 0 50px #ae051d;
}
75%{color: #e8a300;
text-shadow:0 0 100px #d75f00;
}
100%{color: #ffc683;
text-shadow:0 0 150px #ff0a2c;
}
}
.three{
text-align: center;
color: white;
animation: faguang3 4s linear infinite;
}
@keyframes faguang3 {
25%{color: #214838;
text-shadow:0 0 10px #0e4a1a;
}
50%{color: #3f8567;
text-shadow:0 0 50px #3a7538;
}
75%{color: #54bf99;
text-shadow:0 0 100px #20bf43;
}
100%{color: #73ffcc;
text-shadow:0 0 150px #2eff54;
}
}
.four{
text-align: center;
color: white;
animation: faguang4 4s linear infinite;
}
@keyframes faguang4 {
25%{color: #744800;
text-shadow:0 0 10px darkgray;
}
50%{color: #744800;
text-shadow:0 0 50px #f2f2f2;
}
75%{color: #d39200;
text-shadow:0 0 100px #f2f2f2;
}
100%{color: orangered;
text-shadow:0 0 150px #f2f2f2;
}
}
</style>
</head>
<body>
<p class="one">世界四大邪术</p>
<p class="two">×××术</p>
<p class="three">变性术</p>
<p class="four">Makeup</p>
<p class="five">PS术</p>
</body>
</html>
5.大风车吱呦呦的转
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>风筝</title>
<style>
<style>
{
margin: 0;
padding: 0;
}
body {
background: url("./image/fengche.jpg")no-repeat;
background-size: 100%;
position: relative;
}
.wai{
width: 600px;
height: 600px;
position: absolute;
top: 100px;
left: 400px;
animation: fengche 5s ease-in-out infinite;
}/*定义大框*/
@keyframes fengche {
from {transform: rotatez(90deg)}
to{
transform: rotatez(-3600deg);
}
}/*定义动画*/
.che {
position: absolute;
overflow: hidden;
}
.one{
height: 300px;
width: 100px;
left: 200px;
border-radius:150px 0 30px 0;
background-color: #85ff5d;
}/*调整四个小风叶之一*/
.three{
height: 300px;
width: 100px;
bottom: 0px;
left: 300px;
overflow:hidden ;
border-radius: 30px 0 150px 0;
background-color: #ffc22d;
}/*调整四个小风叶之一*/
.two{
height: 100px;
width: 300px;
top: 300px;
overflow: hidden;
border-radius:0 30px 0 150px;
background-color: #46c1ff;
}/*调整四个小风叶之一*/
.four{
height: 100px;
width: 300px;
right: 0px;
top: 200px;
overflow: hidden;
border-radius: 0 150px 0 30px;
background-color: #ff2540;
}/*调整四个小风叶之一*/
.xian1{
display: block;
height: 300px;
position: absolute;
background-color: #cecece;
width: 1px;
bottom: 0px;
right: 0px;
transform: rotatez(-25deg);
transform-origin: 0% 100%;
}/*调整分割虚线*/
.xian2{
display: block;
height: 1px;
position: absolute;
background-color: #cecece;
width: 300px;
right: 0;
top: 0;
transform: rotatez(-25deg);
transform-origin: 100% 0%;
}/*调整分割虚线*/
.xian3{
display: block;
height: 300px;
position: absolute;
background-color: #cecece;
width: 1px;
bottom: 0px;
left: 0px;
transform: rotatez(-25deg);
transform-origin: 0% 0%;
}/*调整分割虚线*/
.xian4{
display: block;
height: 1px;
position: absolute;
background-color: #cecece;
width: 300px;
bottom: 0px;
right: 0px;
transform: rotatez(-25deg);
transform-origin: 0% 100%;
}/*调整分割虚线*/
</style></head>
<body>
<div class="wai">
<div class="che one">
<i class="xian1"></i>
</div>
<div class="che two">
<i class="xian2"></i>
</div>
<div class="che three">
<i class="xian3"></i>
</div>
<div class="che four">
<i class="xian4"></i>
</div>
</div>
</body>
</html>
今天就写到这里，如有错误贺问题欢迎大家指正贺探讨！