您当前的位置：首页 > 计算机 > 编程开发 > Html+Div+Css（前端）

Css动画:星空效果图实现

时间：02-09来源：作者：点击数：15

前言

本文将详细介绍如何使用纯CSS实现一个星空动画效果，从基础概念到具体实现步骤，帮助读者掌握这一技术。

一、基础知识

1.1 CSS3 动画基础

CSS3 引入了 @keyframes 规则，允许我们创建自定义动画。通过定义关键帧（keyframes），我们可以控制元素在不同时间点的状态变化。基本语法如下：

@keyframes animation-name {
    from { /* 起始状态 */ }
    to { /* 结束状态 */ }
}

或者更详细的：

@keyframes animation-name {
    0% { /* 起始状态 */ }
    50% { /* 中间状态 */ }
    100% { /* 结束状态 */ }
}

1.2 3D 变换

CSS3 还引入了 3D 变换功能，通过 transform 属性可以实现元素在三维空间中的旋转、缩放和平移。常用的 3D 变换属性包括：

rotateX(angle)：绕 X 轴旋转
rotateY(angle)：绕 Y 轴旋转
rotateZ(angle)：绕 Z 轴旋转
translate3d(x, y, z)：在三维空间中平移
scale3d(x, y, z)：在三维空间中缩放

为了确保子元素在 3D 空间中正确显示，需要设置 transform-style: preserve-3d。

二、实现星空动画效果

2.1 HTML 结构

首先，我们需要定义 HTML 结构。本文的示例中，我们将创建多个 div 元素来模拟星空中的星星和行星。HTML 结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>星空动画效果</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/星空.css">
</head>
<body>
    <div class="box"></div>
    <div class="huabu">
        <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 class="box2"></div>
    <div class="huabu2">
        <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 class="box3"></div>
    <div class="huabu3">
        <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>

2.2 CSS 样式

接下来，我们定义 CSS 样式来实现星空动画效果。以下是完整的 CSS 代码：

/* 重置样式 */
html, body, h1, h2, h3, h4, h5, h6, div, ul, ol, li, dl, dt, dd, p {
    margin: 0;
    padding: 0;
}
ul, ol, li {
    list-style: none;
}
a {
    text-decoration: none;
    color: #333;
}
img, input, select, iframe, select {
    vertical-align: middle;
}
.fl {
    float: left;
}
.fr {
    float: right;
}
.clear::after {
    content: "";
    display: block;
    clear: both;
}
input, select, textarea {
    outline: none;
    border: none;
}

/* 背景设置 */
body {
    background: url(../img/xk.jpg);
    background-size: cover;
}

/* 星空背景 */
.huabu {
    width: 800px;
    height: 450px;
    margin: 100px auto;
    transform-style: preserve-3d;
    transform: rotateZ(30deg);
    animation: cc 1.5s infinite linear;
}

/* 星星样式 */
.huabu > div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 34px;
    border-radius: 50%;
    border: solid aqua;
    box-shadow: 0px 0px 10px 8px aquamarine;
}

/* 旋转星星 */
.huabu > div:nth-child(2) {
    transform: rotateX(30deg);
}
.huabu > div:nth-child(3) {
    transform: rotateX(60deg);
}
.huabu > div:nth-child(4) {
    transform: rotateX(90deg);
}
.huabu > div:nth-child(5) {
    transform: rotateX(120deg);
}
.huabu > div:nth-child(6) {
    transform: rotateX(150deg);
}
.huabu > div:nth-child(7) {
    transform: rotateX(180deg);
}
.huabu > div:nth-child(8) {
    transform: rotateY(30deg);
}
.huabu > div:nth-child(9) {
    transform: rotateY(60deg);
}
.huabu > div:nth-child(10) {
    transform: rotateY(90deg);
}
.huabu > div:nth-child(11) {
    transform: rotateY(120deg);
}
.huabu > div:nth-child(12) {
    transform: rotateY(150deg);
}
.huabu > div:nth-child(13) {
    transform: rotateY(180deg);
}

/* 第二个星空背景 */
.huabu2 {
    width: 900px;
    height: 400px;
    position: absolute;
    left: 362px;
    top: 104px;
    transform-style: preserve-3d;
    animation: cc1 3s infinite linear;
    transform: rotateX(60deg);
}

/* 第二个星空的星星样式 */
.huabu2 > div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 125px;
    border-radius: 50%;
    border: solid rgba(23, 17, 214, 0.803);
    box-shadow: 0px 0px 10px 8px blue;
}

/* 旋转第二个星空的星星 */
.huabu2 > div:nth-child(2) {
    transform: rotateX(30deg);
}
.huabu2 > div:nth-child(3) {
    transform: rotateX(60deg);
}
.huabu2 > div:nth-child(4) {
    transform: rotateX(90deg);
}
.huabu2 > div:nth-child(5) {
    transform: rotateX(120deg);
}
.huabu2 > div:nth-child(6) {
    transform: rotateX(150deg);
}
.huabu2 > div:nth-child(7) {
    transform: rotateX(180deg);
}
.huabu2 > div:nth-child(8) {
    transform: rotateY(30deg);
}
.huabu2 > div:nth-child(9) {
    transform: rotateY(60deg);
}
.huabu2 > div:nth-child(10) {
    transform: rotateY(90deg);
}
.huabu2 > div:nth-child(11) {
    transform: rotateY(120deg);
}
.huabu2 > div:nth-child(12) {
    transform: rotateY(150deg);
}
.huabu2 > div:nth-child(13) {
    transform: rotateY(180deg);
}

/* 第三个星空背景 */
.huabu3 {
    width: 350px;
    height: 350px;
    position: absolute;
    left: 600px;
    top: 180px;
    transform-style: preserve-3d;
    animation: cc2 3s infinite linear;
}

/* 第三个星空的星星样式 */
.huabu3 > div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    border: solid rgb(232, 143, 19);
    box-shadow: 0px 0px 10px 8px orange;
}

/* 旋转第三个星空的星星 */
.huabu3 > div:nth-child(2) {
    transform: rotateX(30deg);
}
.huabu3 > div:nth-child(3) {
    transform: rotateX(60deg);
}
.huabu3 > div:nth-child(4) {
    transform: rotateX(90deg);
}
.huabu3 > div:nth-child(5) {
    transform: rotateX(120deg);
}
.huabu3 > div:nth-child(6) {
    transform: rotateX(150deg);
}
.huabu3 > div:nth-child(7) {
    transform: rotateX(180deg);
}
.huabu3 > div:nth-child(8) {
    transform: rotateY(30deg);
}
.huabu3 > div:nth-child(9) {
    transform: rotateY(60deg);
}
.huabu3 > div:nth-child(10) {
    transform: rotateY(90deg);
}
.huabu3 > div:nth-child(11) {
    transform: rotateY(120deg);
}
.huabu3 > div:nth-child(12) {
    transform: rotateY(150deg);
}
.huabu3 > div:nth-child(13) {
    transform: rotateY(180deg);
}

/* 盒子样式 */
.box {
    width: 800px;
    height: 450px;
    border: solid white 10px;
    margin: 100px auto;
    transform-style: preserve-3d;
    position: absolute;
    left: 350px;
    top: 14px;
    transform: rotateX(300deg) rotateZ(40deg) rotateY(340deg);
    border-radius: 50%;
    box-shadow: 0px 0px 20px 20px aqua;
}

.box2 {
    width: 800px;
    height: 400px;
    border: solid white 10px;
    margin: 100px auto;
    transform-style: preserve-3d;
    position: absolute;
    left: 394px;
    top: 4px;
    transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
    border-radius: 50%;
    box-shadow: 0px 0px 20px 20px aqua;
}

/* 动画定义 */
@keyframes cc {
    0% {
        transform: rotateX(-60deg) rotateY(-30deg);
    }
    100% {
        transform: rotateX(-60deg) rotateY(-30deg) rotateZ(360deg);
    }
}

@keyframes cc1 {
    0% {
        transform: rotateX(60deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(60deg) rotateZ(360deg);
    }
}

@keyframes cc2 {
    0% {
        transform: rotateZ(0) rotateX(0);
    }
    100% {
        transform: rotateZ(360deg) rotateX(360deg);
    }
}

2.3 代码解释

2.3.1 背景设置

body {
    background: url(../img/xk.jpg);
    background-size: cover;
}

这段代码设置了页面的背景图像，并使用 background-size: cover 使背景图像覆盖整个页面。

2.3.2 星空背景

.huabu {
    width: 800px;
    height: 450px;
    margin: 100px auto;
    transform-style: preserve-3d;
    transform: rotateZ(30deg);
    animation: cc 1.5s infinite linear;
}

.huabu 类定义了一个宽 800px、高 450px 的容器，居中显示，并应用了 3D 变换风格 transform-style: preserve-3d。同时，它还应用了一个名为 cc 的动画，持续时间为 1.5 秒，无限循环，线性过渡。

2.3.3 星星样式

.huabu > div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 34px;
    border-radius: 50%;
    border: solid aqua;
    box-shadow: 0px 0px 10px 8px aquamarine;
}

每个 .huabu 容器内的 div 元素代表一个星星。它们的宽度和高度均为 100px，绝对定位，圆形边框，带有蓝色边框和阴影效果。

2.3.4 旋转星星

.huabu > div:nth-child(2) {
    transform: rotateX(30deg);
}

通过 nth-child 选择器，我们为每个星星应用不同的 3D 旋转效果，使其在空间中形成不同的位置和角度。

2.3.5 第二个星空背景

.huabu2 {
    width: 900px;
    height: 400px;
    position: absolute;
    left: 362px;
    top: 104px;
    transform-style: preserve-3d;
    animation: cc1 3s infinite linear;
    transform: rotateX(60deg);
}

.huabu2 类定义了第二个星空背景，其大小和位置与第一个不同，并应用了不同的动画 cc1 和初始旋转角度。

2.3.6 第三个星空的星星样式

.huabu2 > div {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 0;
    top: 125px;
    border-radius: 50%;
    border: solid rgba(23, 17, 214, 0.803);
    box-shadow: 0px 0px 10px 8px blue;
}

每个 .huabu2 容器内的 div 元素代表第二个星空中的星星。这些星星的宽度和高度均为 100px，绝对定位，圆形边框，带有紫色边框和蓝色阴影效果。

旋转第二个星空的星星

.huabu2 > div:nth-child(2) {
    transform: rotateX(30deg);
}
.huabu2 > div:nth-child(3) {
    transform: rotateX(60deg);
}
.huabu2 > div:nth-child(4) {
    transform: rotateX(90deg);
}
.huabu2 > div:nth-child(5) {
    transform: rotateX(120deg);
}
.huabu2 > div:nth-child(6) {
    transform: rotateX(150deg);
}
.huabu2 > div:nth-child(7) {
    transform: rotateX(180deg);
}
.huabu2 > div:nth-child(8) {
    transform: rotateY(30deg);
}
.huabu2 > div:nth-child(9) {
    transform: rotateY(60deg);
}
.huabu2 > div:nth-child(10) {
    transform: rotateY(90deg);
}
.huabu2 > div:nth-child(11) {
    transform: rotateY(120deg);
}
.huabu2 > div:nth-child(12) {
    transform: rotateY(150deg);
}
.huabu2 > div:nth-child(13) {
    transform: rotateY(180deg);
}

通过 nth-child 选择器，为第二个星空中的每个星星应用不同的 3D 旋转效果，使其在空间中形成不同的位置和角度。

第三个星空背景

.huabu3 {
    width: 350px;
    height: 350px;
    position: absolute;
    left: 600px;
    top: 180px;
    transform-style: preserve-3d;
    animation: cc2 3s infinite linear;
}

.huabu3 类定义了第三个星空背景，其大小和位置与前两个不同，并应用了不同的动画 cc2 和初始旋转角度。

第三个星空的星星样式

.huabu3 > div {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border-radius: 50%;
    border: solid rgb(232, 143, 19);
    box-shadow: 0px 0px 10px 8px orange;
}

每个 .huabu3 容器内的 div 元素代表第三个星空中的星星。这些星星的宽度和高度均为 200px，绝对定位，圆形边框，带有橙色边框和橙色阴影效果。

旋转第三个星空的星星

.huabu3 > div:nth-child(2) {
    transform: rotateX(30deg);
}
.huabu3 > div:nth-child(3) {
    transform: rotateX(60deg);
}
.huabu3 > div:nth-child(4) {
    transform: rotateX(90deg);
}
.huabu3 > div:nth-child(5) {
    transform: rotateX(120deg);
}
.huabu3 > div:nth-child(6) {
    transform: rotateX(150deg);
}
.huabu3 > div:nth-child(7) {
    transform: rotateX(180deg);
}
.huabu3 > div:nth-child(8) {
    transform: rotateY(30deg);
}
.huabu3 > div:nth-child(9) {
    transform: rotateY(60deg);
}
.huabu3 > div:nth-child(10) {
    transform: rotateY(90deg);
}
.huabu3 > div:nth-child(11) {
    transform: rotateY(120deg);
}
.huabu3 > div:nth-child(12) {
    transform: rotateY(150deg);
}
.huabu3 > div:nth-child(13) {
    transform: rotateY(180deg);
}

通过 nth-child 选择器，为第三个星空中的每个星星应用不同的 3D 旋转效果，使其在空间中形成不同的位置和角度。

盒子样式

.box {
    width: 800px;
    height: 450px;
    border: solid white 10px;
    margin: 100px auto;
    transform-style: preserve-3d;
    position: absolute;
    left: 350px;
    top: 14px;
    transform: rotateX(300deg) rotateZ(40deg) rotateY(340deg);
    border-radius: 50%;
    box-shadow: 0px 0px 20px 20px aqua;
}

.box2 {
    width: 800px;
    height: 400px;
    border: solid white 10px;
    margin: 100px auto;
    transform-style: preserve-3d;
    position: absolute;
    left: 394px;
    top: 4px;
    transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg);
    border-radius: 50%;
    box-shadow: 0px 0px 20px 20px aqua;
}

.box 和 .box2 类定义了两个白色的圆形盒子，分别应用了不同的 3D 旋转效果和位置，增强了星空动画的效果。

动画定义

@keyframes cc {
    0% {
        transform: rotateX(-60deg) rotateY(-30deg);
    }
    100% {
        transform: rotateX(-60deg) rotateY(-30deg) rotateZ(360deg);
    }
}

@keyframes cc1 {
    0% {
        transform: rotateX(60deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(60deg) rotateZ(360deg);
    }
}

@keyframes cc2 {
    0% {
        transform: rotateZ(0) rotateX(0);
    }
    100% {
        transform: rotateZ(360deg) rotateX(360deg);
    }
}