vue小项目总结2

vue小项目总结2：

---

页面适应全屏

1、直接给body设置height:100%发现无效，原因是html根标签没有固定高度，
解决:

  body,html{
      height:100%;
  }

原本在项目中为了适应全屏直接设置了浏览器全屏的高度，CSS3中使用vh、vw即可解决（不考虑兼容性）
vw：当前浏览器一屏幕的宽度
vh：当前浏览器一屏幕的高度

---

字体色渐变

生成渐变色CSS代码网站

   <div class='gradient'>123<div>

  .gradient{
      background-image:linear-gradient(bottom,red,blue); // 背景图设置一个渐变色
      -webkit-backgound-clip:text; // 背景色只作用在字体上
      -webkit-text-fill-color:transparent; // 字体颜色设置为透明
  }

---

渐变颜色动画

  <div class='gradientAnimated'></div>
.gradientAnimated{
    position: relative;
    width: 200px;
    height: 200px;
    background: violet;
      &::before{
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: -100%;   // 相对自身向右扩张100%宽度
            background: -webkit-linear-gradient(right, #4ecdc4, #3D4452); // 设置渐变色
            background-size: 100% 100%;
            animation: run 1s linear infinite alternate; // 设置动画 （效果更明显）
    }
}
 @keyframes run {
      100%{
         transform: translate(-50%);   // 向左移动相对自身50%宽度距离
       }
  }
  

效果图