使用css3属性做一个循环旋转的动画

2024-06-07 19:08:45

做这个动画是使用css3中的animation 和 @-webkit-keyframes 组合使用来完成

//这是html部分代码
<div class="home"><imgalt="logo"src="http://b-ssl.duitang.com/uploads/item/201206/26/20120626190359_MjB3s.jpeg"id="images"style="width: 200px;height: 200px;border-radius: 50%;"/></div>//这是css部分代码#images {-webkit-animation: spin 5s linear infinite;animation: spin 5s linear infinite;
}
@keyframes spin {from {transform: rotate(0deg);}to {transform: rotate(360deg);transition: all 5s;}
}

上面的代码粘贴后直接就能运行，也可以绑定触发器，例如：#images 可以写为 #images:hover 表示给绑定了一个触发器hover，当鼠标在图片上方时动画才执行

下面我们简单介绍一下animation和@-webkit-keyframes的属性

animation （在使用的时候可以加上-webkit-做下兼容处理）是一个复合属性，定义如下：
animation: name duration timing-function delay iteration_count direction
name: 是 @-webkit-keyframes 中需要指定的方法，用来执行动画。

duration: 动画一个周期执行的时长。

timing-function: 动画执行的效果，可以是线性的，也可以是"快速进入慢速出来"等。

delay: 动画延时执行的时长，如果不需要可以省略。

iteration_count: 动画循环执行次数，如果是infinite，则无限执行。

direction: 动画执行方向，省略的话默认顺时针。

@-webkit-keyframes 为创建动画

@keyframes规则——指定一个CSS样式，动画将逐步更改样式。可以改变任意多的样式任意多的次数。
其中from和to 两个属性，“from” 和 "to"来规定变化发生的时间，就是指定动画执行的初始值和结束值。也可以用百分比，“from” 和 "to"分别等同于 %和100%，0%是动画的开始，100%是动画的完成。
-webkit-animation-play-state:paused; 暂停动画的执行。

animation和transition的区别

能实现动态效果的除了animation还有transition
transition只能从一组css属性变成另一组css属性。animation则可以在多组属性之间变换。
transition必须使用触发器触发，animation可以使用触发器，也可以在页面加载完成的时候自动触发

想仔细了解各个属性的话可以看一下这篇文章，感觉写的很详细，https://www.cnblogs.com/bobodeboke/p/6252869.html

使用css3属性做一个循环旋转的动画相关推荐

[css] 使用css3做一个魔方旋转的效果
[css] 使用css3做一个魔方旋转的效果总的来说,用了一些 3D 效果的样式,如 translate3d,rotate3d,perspective,transform-style: preser ...
46 行 Python 代码，做一个会旋转的三维甜甜圈！
摘要:在三维渲染技术中,符号距离函数很难理解,而本文作者仅用 46 行 Python 代码就展示了这项技术. 链接:https://vgel.me/posts/donut/ 声明:本文为 CSDN ...
每日一技：给女友用代码做一个3D旋转相册，每天亿遍忘记初恋~
前言不会表白?!我来教你给女朋友或者正在追求的妹子一点小惊喜~ 今天这篇文章就是演示给女友做一个3D旋转相册,学会的小伙伴可以给自己的女朋友或者喜欢的女生做一个,相比几百上千的礼物,零成本的技术实现 ...
用MATLAB做一个单摆运动的动画
用MATLAB做一个单摆运动的动画 MATLAB与单摆运动 MATLAB在机械机构分析和数值理论计算中中应用广泛.倒立摆系统的设计与弹簧振子设计类似,本文将利用MATLAB脚本建立单摆运动的动画演示. ...
html魔方转动效果,简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
如何做一个炫酷的动画网站-css实现图片上下浮动效果
目前网站制作技术已经非常成熟.所以要实现一个炫酷的动画网站还是非常容易,现在通过js和css就都能实现.直接css就能实现各种效果,下面我们来通过一个小动画看看如何用css来实现让你的网站图片上下浮动 ...
使用three.js做一个网页的相册动画
想了很久不知道有没有必要,但还是记录下来,以后说不定还会用的到,希望大家也有机会试试就先做一个简单的页面,做一下动画,放一些图片吧,以后有新东西还是会加进来的 1.先创建一个html文件,初始化代码 ...
用Python做一个会旋转的五彩风筝
大家好,我是羁绊的小水门.Python是一门十分受欢迎的编程语言,受到许多小伙伴们的热爱.Python中的turtle模块就可以帮助我们画画.但是我们如何.才能做到动画的效果呢?下面是旋转风筝的源代码 ...

最新文章

热门文章