酷酷的滚动彩虹色文字

​ 当下撞色风格很流行,撞色风格表达了”自信与活力，活出自己的个性，张扬自己的气魄” ,今天做一个比较容易实现而且效果还不错的文字style,是什么呢,先看图:

​ 滚动彩虹色文字效果,纯CSS效果.

​ 将文字镂空,color透明,再设置背景滚动动画就得到这样一个效果.

学习记录:

绝对单位:px页面按精确像素展示;

相对单位:

• em,相对页面设置的fontsize大小,一般默认16px;
• vh,viewpoint height视窗高度,响应式设计,1vw = 1%当前视窗高度;
• vw.viewpoint width视窗宽度,同上;
• vmin/vmax:vh/vw中较小/较大的;
• 还有ex,ch好像用的很少,还有浏览器兼容问题

首先body部分一个盒子,一段文字

<p>Hello world</p>

css部分背景图:

  body{
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;//居中
        background-color: black;
    }

    p{  
        font-size: 17vw;
        font-family: fantasy;
        font-weight: bold;
        color: white;
        background-image: linear-gradient(
            to right,
        orangered,
        orange,
        gold,
        lightgreen,
        cyan,
        dodgerblue,
        mediumpurple,
        hotpink,
        orangered
        ); 
        /*注意颜色的始终要相同,不然就回有突变颜色线条,影响视觉*/
        background-size: 110vw;
       -webkit-background-clip: text;
       color: transparent;
        animation: sliding 30s linear infinite;
    }

关键帧;

 @keyframes sliding{
        to{
            background-position:  -2000vw;
        }
    }

感兴趣的朋友可以去试试~