【神级最终版】永夜星河主题特效

命运之光

发布于 2024-11-17 12:32:51

4300

代码可运行

文章被收录于专栏：我在本科期间写的文章我在本科期间写的文章

运行总次数：0

代码可运行

图片展示

完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>永夜星河主题特效</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            margin: 0;
            overflow: hidden;
            background: radial-gradient(circle, #1a2a6c, #b21f1f, #fdbb2d);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            position: relative;
        }
        /* 星星背景 */
        
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
        /* 星河背景特效 */
        
        #perspective {
            perspective: 800px;
        }
        
        #wrap {
            position: relative;
            width: 150px;
            height: 178px;
            /* margin: 200px auto; */
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(0deg);
        }
        
        #wrap .image-block {
            position: absolute;
            transform: rotateY(0deg);
        }
        
        #wrap .image-block img {
            width: 150px;
            height: 178px;
        }
        /* 闪烁文字 */
        
        .title {
            position: absolute;
            top: 20%;
            font-size: 3em;
            font-weight: bold;
            text-transform: uppercase;
            text-shadow: 0 0 20px #fff, 0 0 30px #ff9, 0 0 40px #ff9;
            animation: glow 2s infinite alternate;
        }
        
        @keyframes glow {
            from {
                text-shadow: 0 0 10px #fff, 0 0 20px #ff9, 0 0 30px #ff9;
            }
            to {
                text-shadow: 0 0 30px #ff9, 0 0 50px #ff9, 0 0 70px #ff9;
            }
        }
        /* 动态漂浮角色 */
        /* 动态漂浮和旋转图片 */
        
        .character {
            position: absolute;
            bottom: 10%;
            width: 150px;
            animation: float 4s ease-in-out infinite, rotate 6s linear infinite;
        }
        /* .character {
            position: absolute;
            bottom: 10%;
            width: 150px;
            animation: float 4s ease-in-out infinite;
        } */
        /* 旋转动画 */
        
        @keyframes rotate {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        /* 点击星星特效 */
        
        .star {
            position: absolute;
            width: 5px;
            height: 5px;
            background-color: white;
            border-radius: 50%;
            box-shadow: 0 0 8px #fff;

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-11-16，如有侵权请联系 cloudcommunity@tencent.com 删除

absolute