彩虹logohtml代码

最新推荐文章于 2025-06-05 14:57:34 发布

weixin_44499437

最新推荐文章于 2025-06-05 14:57:34 发布

阅读量154

点赞数 1

CC 4.0 BY-SA版权

文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/weixin_44499437/article/details/145560750

<!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>Thicker Rainbow</title>
    <style>
        body {
            background-color: #353E4D; /* 设置背景色为 #353E4D */
            margin: 0; /* 去除默认边距 */
            height: 100vh; /* 使页面填充整个视窗 */
            display: flex;
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
        }

        .d3 {
            width: 300px;
            height: 150px;
            background-color: transparent; /* 设置为透明背景 */
            background-image: -webkit-radial-gradient(center bottom, 
                transparent 15%,  /* 内圈变为透明 */
                #7E62BE 15%, #7E62BE 24%,  /* 使用柔和的紫色 */
                #1462A2 24%, #1462A2 33%,  /* 更深的蓝色 */
                #499738 33%, #499738 42%,  /* 清新的绿色 */
                #FFE245 42%, #FFE245 51%,  /* 金黄色 */
                #FD971A 51%, #FD971A 60%,  /* 柔和的橙色 */
                #FA1A21  60%);  /* 温暖的红色 */
            background-size: 100% 100%;
            border-radius: 150px 150px 0 0; /* 让顶部成为半圆 */
            margin: 50px auto; /* 水平居中并稍微向下移动 */
            display: block;
            position: relative;
        }

    </style>
</head>
<body>
    <div class="d3"></div>
</body>
</html>