999视频精品全部免费品,一级做a爰片久久毛片a

技術頻道 - html技術

純CSS實現(xiàn)的星光動畫背景

作者:admin 時間:2021-7-30 8:33:38 瀏覽:

這個星光動畫背景，看起來挺酷的，在某些網站上可作為一個效果展示。難得的是，這動畫是純CSS3實現(xiàn)的，遷移十分方便，代碼一拷就行。這里給大家分享一下。

純CSS實現(xiàn)的星光動畫背景

demo download

由于代碼較多，這里不打算把完整代碼都貼出來，僅對個別代碼加以分析。

在本實例中，我們看到動畫是固定在頁面中間的位置，并且大小區(qū)域是固定的，如果我們想全頁面都布滿星光動畫，要怎么設置呢？

我們可以修改這個CSS代碼，原來的代碼是這個：

.stars {
  -webkit-animation: rotate 60000ms linear infinite;
          animation: rotate 60000ms linear infinite;
  transform-origin: 50% 50% -250px;
}

我們可以把它改為這個（你可在演示頁面里試一試）：

.stars {
  -webkit-animation: rotate 60000ms linear infinite;
          animation: rotate 60000ms linear infinite;

  transform-origin: 100% 100%;
}

很明顯，是對transform-origin這個css屬性做了修改。

transform-origin 屬性，它是設置旋轉元素的基點位置。

transform-origin 屬性允許你改變被轉換元素的位置。

2D 轉換元素能夠改變元素 x 和 y 軸。3D 轉換元素還能改變其 Z 軸。

語法

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	定義視圖被置于 X 軸的何處。可能的值：left、center、right、length、%
y-axis	定義視圖被置于 Y 軸的何處。可能的值：top、center、bottom、length、%
z-axis	定義視圖被置于 Z 軸的何處?？赡艿闹担簂ength

在本實例中，使用了3D轉換元素。

此外，我們還可以通過更改下面的CSS樣式，來改變星光動畫的效果，比如星星的大小、動畫速度等。

.counter {
  animation: rotate 60000ms linear infinite reverse;
}

.star {
  width: 6px;
  height: 6px;
}
.star .light {
  width: 100px;
  height: 6px;
  left: -47px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0));
}