歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
  代碼解讀
 
  沒有dom元素,直接寫css。
 
  設置頁面空間:
 
  body{
 
  position:fixed;
 
  margin:0;
 
  width:100vw;
 
  height:100vh;
 
  }
 
  用偽元素設置背景圖案:
 
  
 
  body::before{
 
  content:'';
 
  position:fixed;
 
  width:200vmax;
 
  height:200vmax;
 
  background-color:steelblue;
 
  color:turquoise;
 
  background-image:
 
  linear-gradient(
 
  45deg,
 
  currentColor25%,
 
  transparent25%,transparent75%,
 
  currentColor75%),
 
  linear-gradient(
 
  45deg,
 
  currentColor25%,
 
  transparent25%,transparent75%,
 
  currentColor75%);
 
  background-position:00,5vmax5vmax;
 
  background-size:10vmax10vmax;
 
  平移背景圖案:
 
  
 
  body::before{
 
  top:50%;
 
  left:50%;
 
  animation:
 
  9smoveinfiniteease-in-outalternate;
 
  }
 
  @keyframesmove{
 
  from{
 
  left:-40%;
 
  top:-40%;
 
  }
 
  to{
 
  left:-60%;
 
  top:-60%;
 
  }
 
  }
 
  讓背景圖案轉動起來:
 
  body::before{
 
  animation:
 
  9smoveinfiniteease-in-outalternate,
 
  9s-1.5srotatinginfiniteease-in-outalternate;
 
  }
 
  @keyframesrotating{
 
  to{
 
  transform:rotate(180deg);
 
  }
 
  }
 
  平移頁面:
 
  body{
 
  top:50%;
 
  left:50%;
 
  animation:
 
  3smoveinfiniteease-in-outalternate;
 
  }
 
  縮放頁面:
 
  body{
 
  animation:
 
  3smoveinfiniteease-in-outalternate,
 
  3szoominfiniteease-in-outalternate;
 
  }
 
  @keyframeszoom{
 
  to{
 
  transform:scale(10);
 
  }
 
  }
 
  最后,增加變色效果:
 
  @keyframesrotating{
 
  to{
 
  transform:rotate(180deg);
 
  filter:hue-rotate(1turn);
 
  }
 
  }





本文轉載自中文網

 

如需轉載,請注明文章出處和來源網址:http://www.rs2pl.com

久久天天躁狠狠躁夜夜躁2020