竹子建站
图文组件及图片组件小技巧:如何让图片转起来?
2020-08-21 16:52:24

在网站的设计搭建中,我们可以给图片增加一些效果让网页变得更加灵动,比如当一张图片是圆形时,我们可以给图片增加一个旋转的效果。

这个让图片旋转的效果也是由一串简单的小代码生成的,可以分别使用到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>

 

实际操作如下图:
同样的,我们也可以给图文组件加上这种旋转的效果,不过图文组件的代码需要稍微调整一些,我们要用这段代码:

 

<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编号:

这样就大功告成,如图我们可以看到这个图文组组件里面的图片已经开始旋转起来了。
同时,我们可以去调整代码中旋转一周的时长,以此来调整图片旋转的速度,也可以让图片转的非常快哦!

好了,今天的小教程就到这里了,我们下期再见吧!