今天的“花里胡哨源码分享”带来的是一款超萌的小车动画。通过简单的HTML和CSS代码,让你的小车在道路上奔驰。即使你是初学者,也能轻松上手,瞬间提升你的网页动感与趣味。下面我们一起来看看如何实现这个效果吧!
项目简介
这个项目通过HTML和CSS创建了一个在道路上行驶的小车动画,主要运用了CSS的动画属性@keyframes
来实现道路的移动、车轮的旋转和云朵的飘动效果。
源码展示
HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Car Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="carAnimation">
<div class="road"></div>
<div class="car">
<div class="colour"></div>
<div class="windows"></div>
<div class="leftWheel">
<div class="wheel"></div>
</div>
<div class="rightWheel">
<div class="wheel"></div>
</div>
</div>
<div class="clouds"></div>
</div>
</div>
</body>
</html>
CSS代码
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.container {
position: relative;
}
.carAnimation {
position: relative;
overflow: hidden;
width: 300px;
height: 300px;
background-color: #83c5be;
border-radius: 50%;
}
.road {
position: absolute;
background-color: #333;
border-radius: 20px;
height: 5px;
width: 220px;
top: 220px;
left: 40px;
overflow: hidden;
}
.road:before {
content: "";
position: absolute;
background-color: #83c5be;
width: 30px;
height: 5px;
border-radius: 5px;
animation: move 1s linear infinite reverse;
}
.road:after {
content: "";
position: absolute;
width: 15px;
height: 5px;
background-color: #333;
border-radius: 5px;
box-shadow: 27px 0 #333;
animation: move 1s linear infinite reverse;
}
.car {
position: absolute;
height: 0;
width: 90px;
border-right: 25px solid transparent;
border-left: 20px solid transparent;
border-bottom: 70px solid #333;
z-index: 2;
top: 140px;
left: 75px;
}
.car:before {
content: "";
position: absolute;
background-color: #333;
width: 70px;
height: 40px;
left: 60px;
top: 30px;
}
.car:after {
content: "";
position: absolute;
background-color: #333;
width: 10px;
height: 35px;
border-radius: 10px;
left: -22px;
top: 20px;
transform: rotate(16deg);
}
.colour {
position: absolute;
height: 0;
width: 80px;
border-right: 20px solid transparent;
border-left: 17.5px solid transparent;
border-bottom: 60px solid #e5383b;
top: 5px;
left: -12px;
}
.colour:before {
content: "";
position: absolute;
background-color: #e5383b;
width: 60px;
height: 30px;
left: 60px;
top: 30px;
}
.colour:after {
position: absolute;
content: "";
background-color: #f9c74f;
width: 5px;
height: 15px;
border: 3px solid #333;
left: 122px;
top: 44px;
box-shadow: 0px -19px #333;
}
.windows {
position: absolute;
height: 0;
width: 70px;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom: 28px solid #333;
top: 8px;
left: 4px;
}
.windows:before {
content: "";
position: absolute;
height: 0;
width: 65px;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
border-bottom: 22px solid #aed9e0;
top: 3px;
left: -2.5px;
}
.windows:after {
content: "";
position: absolute;
width: 5px;
height: 25px;
background-color: #333;
left: 45px;
box-shadow: -25px 0 #333;
}
.leftWheel, .rightWheel {
position: absolute;
width: 35px;
height: 15px;
border: 3px solid #333;
background-color: #d3d3d3;
border-radius: 30px 30px 0 0;
top: 47px;
}
.leftWheel {
left: -5px;
}
.rightWheel {
left: 75px;
}
.wheel {
position: absolute;
border-radius: 50%;
width: 15px;
height: 15px;
background-color: #d3d3d3;
border: 8px solid #333;
box-shadow: inset 5px 5px #f5f3f4;
top: 2px;
left: 2px;
animation: spin .5s infinite linear;
}
.clouds {
position: absolute;
background-color: rgba(255,255,255,0.5);
width: 35px;
height: 10px;
border-radius: 20px;
top: 100px;
left: 100px;
z-index: 1;
box-shadow: 130px 50px rgba(255,255,255,0.5), -100px 20px rgba(255,255,255,0.5);
animation: cloud 1.5s linear infinite reverse;
}
@keyframes move {
from { left: -100px; }
to { left: 200px; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes cloud {
from { left: -150px; }
to { left: 400px; }
}
总结
通过这个简单的示例,大家可以看到,HTML和CSS的基础知识就能实现一个有趣的小动画。这个小车动画不仅让你的网页增添趣味,还能让你在实际操作中巩固对CSS动画、布局和定位的理解。赶快试一试吧,让你的网站动起来!