css3 文字效果-渐变聚光灯

 

记录下学习过程

主要是用字体覆盖，并且对上层字体使用mask-image的属性进行展示(遮罩层)

<h1>爱你</h1>       

h1{

　　margin:100px;

}

这个时候在样式中继续写入h1的after伪类，会在dom中插入这个内容，大概位置在：

<h1>

　　　爱你

　　　　xxxx

</h1>

这个位置

样式中写入  h1::after{  content:'xxxxx' } 就可以了

如果觉得耦合度太低，可以在标签中自定义一个属性

例如

<h1 mytext="xxxx">爱你</h1>

这个时候可以把after伪类里面的content用attr进行标记

例如 h1::after{  content:attr(mytext) }

这个时候是在h1中更改页面中相应也会改

 

放上测试代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            h1 {
                margin: 100px;
                position: relative;
            }
            
            /* after为遮罩,意为两个相同文字 */
            /* 文字渐变加动画特效 */
            h1.aaa:after {
                content: attr(mytxt);
                position: absolute;
                top: 0;
                left: 0;
                color: red;
                /* 不兼容就加webkit */
                mask-image: line-gradient(to bottom, red, transparent);
                /* 透明度越低颜色越重 */
                -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .1), rgba(0, 0, 0, 0.8));
                /* 0.2秒 不停,不回头 */
                /* animation: move 0.2s infinite forwards; */
                /* 2秒 不停,来回 */
                animation: move 2s infinite alternate-reverse;
            }

            /* 动画效果 */
            @keyframes move {
                from {
                    -webkit-mask-position: 0px 0px;
                }

                to {
                    -webkit-mask-position: 0px 40px;
                }
            }

            /* 背景色对其内容区域进行裁剪 */
/*             .bbb {
                border: 1px solid red;
                padding: 30px;
                background: green;
                background-clip: content-box;
            } */

            h1.bbb:after {
                content: attr(mytxt);
                position: absolute;
                top:0;
                left: 0;
                /* 透明色 */
                color: transparent;
                background: red;
                /* 对其文字背景色进行裁剪 */
                -webkit-background-clip:text;
                /* 在左上角有一个百分之五十的圆 */
                /* clip-path: circle(50% at 0 0); */
                /* 可以自由控制想要的形状,不一定为圆形 */
                clip-path: circle(40px at 0 50%);
                animation: move2 2s infinite alternate-reverse;
            }
            @keyframes move2{
                from{
                    clip-path: circle(20px at 0 50%);
                }
                to{
                    clip-path: circle(20px at 100% 50%);
                }
            }
            
            
            /* 上面两个例子,第一个是移动到哪里哪里隐藏,第二个是移动到哪里哪里显示 */
        </style>
    </head>
    <body>
        <h1 mytxt="我爱你" class="aaa">我爱你</h1>
        <h1 mytxt="我爱你" class="bbb">我爱你</h1>
        <h2 class="aaaa">我爱你</h1> 
        <!-- 用text-fill-color也可以达成效果 -->
    </body>
    <script type="text/javascript">

    </script>
</html>

 

posted @ 2020-04-24 13:53  阿蒙不萌  阅读(393)  评论(0)  编辑  收藏  举报