纯CSS3炫酷3D星空动画特效

最新推荐文章于 2024-07-28 20:04:07 发布

风或许自媒体

最新推荐文章于 2024-07-28 20:04:07 发布

阅读量1.4w

点赞数 17

分类专栏：前端从入门到放弃文章标签：纯CSS3 星空

本文链接：https://blog.csdn.net/ly_code/article/details/79979060

版权

效果：

源码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>纯CSS3炫酷3D星空动画特效</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
    <style type="text/css">
        html, body {
            height: 100%;
            overflow: hidden;
        }

        body {
            background: #000;
            perspective: 340px;
        }
        h1{
            color: white;
            text-align: center;
        }
        span{
            display: block;
            text-align: center;
        }
        .stars {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2px;
            height: 2px;
            box-shadow: -447px 387px #c4c4c4, -401px 118px #fafafa, -109px 217px #d9d9d9, -680px -436px #e3e3e3, 514px 360px #cccccc, -708px 298px #e8e8e8, -696px -270px #ededed, 116px -128px #f7f7f7, 179px 35px white, -404px -90px whitesmoke, -331px -309px #c4c4c4, -363px -24px #d1d1d1, 277px 416px #fafafa, -145px -244px whitesmoke, 123px 62px #d4d4d4, -407px 418px #d9d9d9, 535px 237px #d9d9d9, -466px -78px #f7f7f7, 257px 287px #dedede, 327px -398px #e0e0e0, -602px -38px #c2c2c2, 128px 398px #e6e6e6, 274px -446px #d1d1d1, -602px -298px #c7c7c7, 526px -5px #c4c4c4, -90px -158px #fcfcfc, 5px 294px whitesmoke, -633px 229px #c4c4c4, -475px 427px #dedede, 586px -453px #f2f2f2, 180px -432px #c7c7c7, -637px