css实现滑动解锁高亮

最新推荐文章于 2021-11-18 00:00:53 发布

好友动态

最新推荐文章于 2021-11-18 00:00:53 发布

阅读量408

点赞数

文章标签： css3 css html

本文链接：https://blog.csdn.net/iostreamM/article/details/121384172

版权



<!DOCTYPE html>
<html>
<head>
    <style>
        p{
            width:50%;
            margin:0 auto;
            line-height:50px; 
            font-size:50px; 
            text-align:center;
            
            -webkit-background-clip: text;            
            -webkit-text-fill-color: transparent;       
            
            background-color:#19385c;           
            background-image: -webkit-linear-gradient(-45deg, rgba(0, 0, 0, 0.6) 30%, #aff0ff 50%, rgba(0, 0, 0, 0.6) 70%);       
            
            background-blend-mode: hard-light;    
            background-size: 200%;
            
            -webkit-animation: shine 4s infinite;    
        }

        @-webkit-keyframes shine {
          from {background-position: 100%;}
          to {background-position: 0;}
        }
    </style>
</head>
<body><p>&gt;&nbsp;滑动解锁</p></body>
</html>