CSS3动画案例

最新推荐文章于 2025-07-04 13:33:33 发布

原创最新推荐文章于 2025-07-04 13:33:33 发布 · 2.5k 阅读

3 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS3实现丰富的动画效果，从HTML布局到CSS样式，包括关键帧动画、过渡效果等，帮助读者掌握现代网页动效设计技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="bG">
    <div class="sky">
        <img src="images/cloudLarge.png" alt="">
        <img src="images/cloudMedium.png" alt="">
        <img src="images/cloudSmall.png" alt="">
        <img src="images/balloon.png" alt="">
    </div>
    <div class="land">
        <div class="wuzi"></div>
        <div class="caopin"></div>
        <div class="wuzi2"></div>
        <div class="shu1"></div>
        <div class="yuan"></div>
        <div class="shu2"></div>
        <div class="wuzi3"></div>
        <div class="beans"></div>
        <div class="huoshan"></div>
        <div class="taiyang">
            <div class="yellow"></div>
            <div class="black"></div>
        </div>
    </div>
</div>

</body>
</html>

CSS部分

*{
    margin: 0;
    padding: 0;
}
.bG{
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: sky 20s linear infinite;
}
.sky{
    height: 490px;
    width: 100%;
    position: relative;
}
.land{
    height: 490px;
    width: 100%;
    position: relative;
}
.sky img:nth-child(1){
    position: absolute;
    margin-left: -300px;
    top: 50px;
    animation: cloud1 15s linear infinite alternate;
    opacity: 0.6;
}
.sky img:nth-child(2){
    position: absolute;
    left: -400px;
    animation: cloud2 15s linear infinite alternate;
    opacity: 0.6;
}
.sky img:nth-child(3){
    position: absolute;
    left: -300px;
    top: 200px;
    animation: cloud3 15s linear infinite alternate;
    opacity: 0.6;
}
.sky img:nth-child(4){
    position: absolute;
    left: -100px;
    top: 100px;
    z-index: 200;
    animation: balloon 15s linear infinite alternate;
}

@keyframes cloud1 {
    0%{transform: translateX(-300px)}
    100%{transform: translateX(2100px)}
}
@keyframes cloud2 {
    0%{transform: translateX(-900px)}
    100%{transform: translateX(2100px)}
}
@keyframes cloud3 {
    0%{transform: translateX(2100px)}
    100%{transform: translateX(-300px)}
}
@keyframes balloon {
    0%{transform: translateX(-200px)}
    25%{transform: translateX(400px) skewX(0deg)}
    50%{transform: translateX(1200px) skewX(20deg)}
    75%{transform: translateX(1800px) skewX(0deg)}
    100%{transform: translateX(2400px)}
}
.caopin{
    position: absolute;
    width: 100%;
    height: 280px;
    z-index: 100;
    margin-top: 120px;
    background: url("../images/groundBack.png") center;
}
.shu1{
    position: absolute;
    width: 100%;
    height: 300px;
    z-index: 666;
    margin-top: 190px;
    background: url("../images/groundMid.png");
}
.shu2{
    position: absolute;
    width: 100%;
    height: 300px;
    z-index: 999;
    margin-top: 186px;
    background: url("../images/groundFront.png") center;
}
.wuzi{
    position: absolute;
    width: 100%;
    height: 100px;
    z-index: 10;
    margin-top: 100px;
    background: url("../images/skyline.png");
}
.wuzi2{
    position: absolute;
    width: 520px;
    height: 229px;
    z-index: 333;
    margin-left: 300px;
    margin-top: 100px;
    background: url("../images/dowEventCenter.png") no-repeat;
}
.yuan{

    position: absolute;
    width: 520px;
    height: 370px;
    z-index: 777;
    margin-left: 450px;
    margin-top: 60px;
    background: url("../images/friendshipShell.png") no-repeat;
}
.wuzi3{
    position: absolute;
    width: 137px;
    height: 263px;
    z-index: 222;
    margin-left: 780px;
    margin-top: 40px;
    background: url("../images/Glockenspiel.png") no-repeat;
}
.beans{
    position: absolute;
    width: 88px;
    height: 201px;
    z-index: 0;
    margin-left: 980px;
    background: url("../images/beans.png") no-repeat;
}
.huoshan{
    position: absolute;
    width: 347px;
    height: 285px;
    z-index: 222;
    margin-left: 1400px;
    margin-top: 110px;
    background: url("../images/Planetarium.png") no-repeat;
}
.taiyang{
    width: 1200px;
    height: 700px;
    position: absolute;
    /*border: 1px solid red;*/
    z-index:1;
    margin-top: -100px;
    margin-left: 400px;
    animation: taiyang 20s linear infinite;
}
.yellow{
    height: 100px;
    width: 100px;
    z-index: 100;
    border-radius: 50%;
    background: #fbd850;
    opacity: 0.6;
}
.black{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background: #8F8F8F;
    margin-left: 1100px;
    margin-top: 500px;
    opacity: 0.6;
}
@keyframes taiyang {
    from{transform: rotate(0deg)}
    to{transform: rotate(360deg)}
}
@keyframes sky {
    0%{background: #D3D3D3}
    8%{background: #DCDCDC}
    16%{background: #F5F5F5}
    24%{background: #FFFFFF}
    32%{background: #DCDCDC}
    40%{background: #D3D3D3}
    480%{background: #C0C0C0}
    560%{background: #A9A9A9}
    640%{background: #808080}
    72%{background: #696969}
    80%{background: #000000}
    88%{background: #808080}
    96%{background: #A9A9A9}
    100%{background: #C0C0C0}

}