正在播放国产乱子伦最新视频,3d动漫精品专区久久,国产在线无码观看

技術(shù)頻道 - html技術(shù)

純CSS實(shí)現(xiàn)的星光動(dòng)畫背景

作者:admin 時(shí)間:2021-7-30 8:33:38 瀏覽:

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

純CSS實(shí)現(xiàn)的星光動(dòng)畫背景

demo download

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

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

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

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

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

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

  transform-origin: 100% 100%;
}

很明顯，是對(duì)transform-origin這個(gè)css屬性做了修改。

transform-origin 屬性，它是設(shè)置旋轉(zhuǎn)元素的基點(diǎn)位置。

transform-origin 屬性允許你改變被轉(zhuǎn)換元素的位置。

2D 轉(zhuǎn)換元素能夠改變?cè)?x 和 y 軸。3D 轉(zhuǎn)換元素還能改變其 Z 軸。

語法

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

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

在本實(shí)例中，使用了3D轉(zhuǎn)換元素。

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

.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));
}