纯CSS实现滚动彩虹色文字

实现思路

1. body标签部分：

　　<p class="ppp">Hello world</p>

2. css部分：

　　.ppp{  

       　　 font-size: 10vw;

       　　 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;

      　　  }

   　　 }

 

学习记录

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

相对单位:

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