HTML+CSS聚光灯

最新推荐文章于 2024-09-10 14:15:01 发布

Cwiyc

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量173

点赞数 1

分类专栏： HTML+CSS 文章标签： html css3 html5 css

本文链接：https://blog.csdn.net/WCvison/article/details/114649163

版权

HTML+CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML+CSS聚光灯

<!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>SPOTLIGHT</title>/*聚光灯的文字*/
    <style>
        *{
            margin:0;
            padding:0;
        }
        body{
            background: rgb(11, 11, 34);
            text-transform: uppercase; /*将小写字母转换成大写*/
            display:flex;/*设置为弹性盒*/
            justify-content: center;
            align-items: center;
            min-height: 100vh;/*最小高度设置成页面高度*/
        }
        h1{
            color: #333;
            font-size: 10vw;
            position: relative;
        }
        h1::after{
            content:'SPOTLIGHT';/*使用伪类*/
            color:transparent;
            position: absolute;
            left:0;
            background: -webkit-linear-gradient(right,blue,red,green,yellow,tomato);/*设置渐变颜色*/
            -webkit-background-clip: text;/*将伪元素以文字形式裁剪*/
            -webkit-clip-path: circle(6vw at 0% 50%);/*裁剪形式为圆*//*这两行代码可能会警告，但没关系*/
            animation: shua 4s infinite;/*定义动画*/
        }
        @keyframes shua {
            50%{
                -webkit-clip-path: circle(6vw at 100% 50%);
            }/*（at 从左开始 从上开始）    可使用%或px等*/
            to{
                -webkit-clip-path: circle(6vw at 0% 50%);
            }
        }
    </style>
</head>
<body>
    <h1>spotlight</h1>
</body>
</html>