欧美性生交大片免费看_国产成人无码一二三区视频_亚洲免费观看视频_亚洲中文字幕无码av永久_天天天天躁天天爱天天碰2018

logo竹子建站
圖文組件及圖片組件小技巧:如何讓圖片轉(zhuǎn)起來(lái)?
2020-08-21 16:52:24

在網(wǎng)站的設(shè)計(jì)搭建中,我們可以給圖片增加一些效果讓網(wǎng)頁(yè)變得更加靈動(dòng),比如當(dāng)一張圖片是圓形時(shí),我們可以給圖片增加一個(gè)旋轉(zhuǎn)的效果。

這個(gè)讓圖片旋轉(zhuǎn)的效果也是由一串簡(jiǎn)單的小代碼生成的,可以分別使用到LOGO組件以及圖文組件之中。
以logo組件為例,我們可以給logo加上這段代碼:

 

<style>

.zz-comp-logo .logo__wrapper {

  -webkit-animation: spin 100s linear infinite;

  animation: spin 3s linear infinite;

}

@keyframes spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

    transition: all 2s;

  }

</style>

 

實(shí)際操作如下圖:
同樣的,我們也可以給圖文組件加上這種旋轉(zhuǎn)的效果,不過(guò)圖文組件的代碼需要稍微調(diào)整一些,我們要用這段代碼:

 

<style>

._13lcldp8co000 .zz-comp-list__item .img img {

 

  -webkit-animation: spin 3s linear infinite;

  animation: spin 3s linear infinite;

}

@keyframes spin {

  from {

    transform: rotate(0deg);

  }

  to {

    transform: rotate(360deg);

    transition: all 2s;

  }

</style>

同樣的,我們將這段代碼加入到圖文組件中,并修改代碼中的ID編號(hào):

這樣就大功告成,如圖我們可以看到這個(gè)圖文組組件里面的圖片已經(jīng)開(kāi)始旋轉(zhuǎn)起來(lái)了。
同時(shí),我們可以去調(diào)整代碼中旋轉(zhuǎn)一周的時(shí)長(zhǎng),以此來(lái)調(diào)整圖片旋轉(zhuǎn)的速度,也可以讓圖片轉(zhuǎn)的非??炫?

好了,今天的小教程就到這里了,我們下期再見(jiàn)吧!