欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3的动画特效——城市

程序员文章站 2024-03-25 16:38:10
...

CSS3的动画特效——城市

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/index.css" />
</head>
<body>
    <div class="wrap">
        <!--操场-->
        <div class="groundBack"><img src="img/groundBack.png" /></div>
        <!--操场的前景-->
        <div class="groundFront">
            <img src="img/groundFront.png" />
            <img src="img/groundFront.png" />
            <img src="img/groundFront.png" />
        </div>
        <!--操场的中景-->
        <div class="groundMid">
            <img src="img/groundMid.png" />
            <img src="img/groundMid.png" />
        </div>
        <!--建筑-->
        <div class="friend"><img src="img/friendshipShell.png" /></div>
        <div class="downCenter"><img src="img/dowEventCenter.png" /></div>
        <div class="glockenspiel"><img src="img/Glockenspiel.png" /></div>
        <div class="skyline">
            <img src="img/skyline.png" />
            <img src="img/skyline.png" />
            <img src="img/skyline.png" />
            <img src="img/skyline.png" />
        </div>
        <div class="beans"><img src="img/beans.png" /></div>
        <div class="planetarium"><img src="img/Planetarium.png" /></div>
        <!--白云-->
        <div class="cloud">
            <img src="img/cloudLarge.png" />
            <img src="img/cloudMedium.png" />
            <img src="img/cloudSmall.png" />
        </div>
        <!--星星-->
        <div class="star">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <!--热气球-->
        <div class="balloon"><img src="img/balloon.png" /></div>
        <!--日月-->
        <div class="sky">
            <div class="sun"></div>
            <div class="moon"></div>
        </div>
    </div>
</body>
</html>
/**
 * CSS文件
 * Time: 2018/8/31
 * Author: SanPhantom
 * Feature: 
 */
* {
    margin: 0;
    padding: 0;
}

html,body {
    width: 100%;
    height: 100%;
}

.wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background-color: black;
    animation: wrap 20s linear infinite;
}
@keyframes wrap {
    0% {background-color: black;}
    10% {background-color: cyan;}
    25% {background-color: cyan;}
    50% {background-color: cyan;}
    60% {background-color: black;}
    75% {background-color: black;}
    100% {background-color: black;}
}
.groundBack {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
}
.groundBack img {
    width: 100%;
}
.groundFront {
    width: 150%;
    position: absolute;
    bottom: 0;
    left: -400px;
    z-index: 999;
}
.groundFront img {
    float: left;
}
.groundMid {
    width: 90%;
    position: absolute;
    bottom: 0;
    left: 5%;
    z-index: 99;
}
.groundMid img {
    width: 49%;
    float: left;
}
.friend {
    position: absolute;
    z-index: 100;
    bottom: 100px;
    left: 400px;
}
.downCenter {
    position: absolute;
    z-index: 90;
    bottom: 200px;
    left: 200px;
}
.glockenspiel {
    position: absolute;
    z-index: 89;
    bottom: 250px;
    left: 680px;
}
.skyline {
    display: flex;
    position: absolute;
    z-index: 9;
    bottom: 300px;
    left: 0;
}
.beans {
    position: absolute;
    z-index: 5;
    left: 1000px;
    bottom: 300px;
}
.planetarium {
    position: absolute;
    right: 250px;
    bottom: 200px;
    z-index: 90;
}
.cloud {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    animation: cloud 20s linear infinite;
}
@keyframes cloud {
    0% {opacity: 0}
    10% {opacity: 1}
    50% {opacity: 1;}
    60% {opacity: 0}
    100% {opacity: 0}
}
.cloud img:nth-child(1) {
    position: absolute;
    left: 0;
    top: 200px;
    animation: cloud1 40s linear infinite alternate -20s;
}
@keyframes cloud1 {
    0% {left: 0;}
    to {left: 1500px;}
}
.cloud img:nth-child(2) {
    position: absolute;
    left: 0;
    top: 400px;
    animation: cloud1 40s linear infinite alternate -10s;
}
.cloud img:nth-child(3) {
    position: absolute;
    left: 0;
    top: 150px;
    animation: cloud1 40s linear infinite alternate;
}

.star {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    animation: cloud 20s linear infinite -10s;
}
.star>div {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: yellow;
}
.star>div:nth-child(1) {
    position: absolute;
    left: 500px;
    top: 150px;
    animation: star 1s linear alternate infinite -0.3s;
}
.star>div:nth-child(2) {
    position: absolute;
    left: 500px;
    top: 150px;
    animation: star 1s linear alternate infinite -0.1s;
}
.star>div:nth-child(3) {
    position: absolute;
    left: 800px;
    top: 200px;
    animation: star 1s linear alternate infinite .3s;
}
.star>div:nth-child(4) {
    position: absolute;
    left: 150px;
    top: 220px;
    animation: star 1s linear alternate infinite;
}
.star>div:nth-child(5) {
    position: absolute;
    left: 1100px;
    top: 250px;
    animation: star 1s linear alternate infinite;
}
@keyframes star {
    0% {opacity: 0}
    20% {opacity: 1}
    80% {opacity: 1}
    100% {opacity: 0;}
}
.balloon {
    position: absolute;
    z-index: 6;
    top: 100px;
    left: 100px;
    animation: balloon 25s linear infinite;
}
@keyframes balloon {
    0% {transform: translateX(0) rotateZ(10deg);}
    25% {transform: translateX(800px) rotateZ(40deg);}
    49% {transform: translateX(1500px) rotateZ(20deg)}
    50% {transform: translateX(1500px) rotateZ(-20deg);}
    75% {transform: translateX(800px) rotateZ(-50deg);}
    99% {transform: translateX(0) rotateZ(-10deg)}
    100% {transform: translateX(0) rotateZ(10deg);}
}
.sky {
    width: 1000px;
    height: 500px;
    position: absolute;
    left: 500px;
    top: 320px;
    transform: rotateZ(21deg);
    animation: sky 20s linear infinite;
}
.sun {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: white;
    box-shadow: -1px -1px 15px 38px white;
    position: absolute;
    left: 25px;
    bottom: 0;
}
.moon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: gold;
    position: absolute;
    right: 0;
    top: 0;
}
@keyframes sky {
    from {transform: rotateZ(21deg);}
    to {transform: rotateZ(381deg)}
}
相关标签: css3