关于纯cs3动画的五个原创实例分享

2024-11-28 技术教程

话不多说还是直接上菜把。
1.落叶动画（状态描述：形如秋风吹落叶，落叶无情逗秋风）
代码如下：
<!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;/ 设置落叶背景图*/
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>
由于是动态图，效果还是请大家复制代码，替换图片，自行观看。
2.小车跑跑图（我哒哒的马蹄声是个美丽的错误，我不是归人，因为我开奥迪奔奔）
代码如下：
<!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" >
寂寞花开寂寞处
<div class="one one_2">
寂寞处里寻无路
<div class="one one_3">
谁怨秋风催人思
<div class="one one_4">
一重相思一重痴
<div class="one one_5">
痴子挥笔署情诗
<div class="one one_6">
情在墨里安可知
<div class="one one_7">
天高地阔自逍遥
<div class="one one_8">
无缘也罢莫悴憔
<div class="one one_9">
世间情人多离分
<div class="one one_10">
莫笑僧尼断红尘
<div class="one one_11">
佳人不待痴情人
<div class="one one_12">
痴情枉然苦情深
<div class="one one_13">
荡胸且怀壮志在
<div class="one one_14">
行路不惧冰雪塞
<div class="one one_15">
浮云不逐金日高
<div class="one one_16">
吾又何必为折腰
<div class="one one_17">
淌过绿水上青山
<div class="one one_18">
山青景秀人欲瞻
<div class="one one_19">
居巍俯瞰路千万
<div class="one one_20">
不知何去恨寡断
<div class="one one_21">
忽见洁云游苍穹
<div class="one one_22">
无拘不羁多羡崇
<div class="one one_23">
吾辈踌躇疑西东
<div class="one one_24">
如斯怎能化腾龙
<div class="one one_25">
吾辈踌躇疑西东
<div class="one one_26">
，如斯怎能化腾龙
<div class="one one_27">
如斯怎能化腾龙
<div class="one one_28">
【二十八绝句】

</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">化妆术</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>
今天就写到这里，如有错误贺问题欢迎大家指正贺探讨！