图文组件及图片组件小技巧：如何让图片转起来？

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

这样就大功告成，如图我们可以看到这个图文组组件里面的图片已经开始旋转起来了。

同时，我们可以去调整代码中旋转一周的时长，以此来调整图片旋转的速度，也可以让图片转的非常快哦!

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

建站小教程：如何利用时间轴来介绍公司的发展

常见问题