Ringeal007 发表于 2022-12-4 00:43:01

新手HTML代码展示

本帖最后由 Ringeal007 于 2022-12-4 00:52 编辑

在Jump (ringeal007.github.io)在线浏览网页效果。
static/image/hrline/line4.png
效果图展示：

static/image/hrline/line4.png
源代码展示：

<!DOCTYPE html>
<html lang="zh-CN">

<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>Jump</title>
      <style>
                .font-bolder-larger {
                        font-weight: bolder;
                        font-size: 64px;
                }

                .center {
                        position: fixed;
                        top: 50%;
                        left: 50%;
                        transform: translate(-50%, -50%);
                        background-color: skyblue;
                }

                .neumorphism {
                        border-radius: 90px;
                        background: #5c1f99;
                        box-shadow: 36px 36px 100px #250c3d,
                              -36px -36px 100px #9332f5;
                        width: 360px;
                        height: 360px;
                }

                a:link,
                a:visited {
                        background-color: #5c1f99;
                        color: black;
                        text-align: center;
                        text-decoration: none;
                        line-height: 360px;
                        display: inline-block;
                }

                a:hover,
                a:active {
                        background-color: #5c1f99;
                }
      </style>
</head>

<body style="background-color:#5c1f99">
      <a href="https://vdse.bdstatic.com/192d9a98d782d9c74c96f09db9378d93.mp4"
                class="font-bolder-larger center neumorphism">请点击我</a>
</body>

</html>

static/image/hrline/line4.png

Ringeal007 发表于 2022-12-4 00:53:47

苦力怕纸 发表于 2022-12-4 00:52
推荐一个UI组件库

https://uiverse.io/

哈哈哈哈，我用的就是这个UI组件库的其中一个：Neumorphism/Soft UI CSS shadow generator


苦力怕纸 发表于 2022-12-4 00:52:57

推荐一个UI组件库

https://uiverse.io/






苦力怕纸 发表于 2022-12-4 00:49:14

好看\(^o^)/~
页: [1]
查看完整版本: 新手HTML代码展示