系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网络编程 > CSS/HTML > 详细页面

CSS实现文字聚光灯效果

时间:2020-09-06来源:www.pcxitongcheng.com作者:电脑系统城

实现代码

body{
    background:#222;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:100vh;
}
h1{
    color:#333;
    font-size:8rem;
}
h1:after{
    content:"SPOTLIGHT";
    color:transparent;
    position:absolute;
    left:0;
    top:0;
    background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
    background-clip:text;
    -webkit-background-clip: text;
    clip-path:circle(100px at 0% 50%);
    -webkit:circle(100px at 0% 50%);
    animation:light 5s infinite;
}

@keyframes light{
    0%{
        clip-path:circle(100px at 0% 50%);
        -webkit:circle(100px at 0% 50%);
    }
    50%{
        clip-path:circle(100px at 100% 50%);
        -webkit:circle(100px at 100% 50%);
    }
    100%{
        clip-path:circle(100px at 0% 50%);
        -webkit:circle(100px at 0% 50%);
    }
}
分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载