首页 网络技术
  1. 正文

css3如何实现圆形转动的效果

方法:1、用“border-radius:100%”设置元素为圆形;2、用“@keyframes 名称{100%{transform:rotate(360deg);}}”设置动画;3、用“animation:名称 时间”给元素绑定动画效果。

本教程操作环境:windows10系统、CSS3&&HTML5版、Dell G3电脑。

css3怎么实现圆形转动的效果

border-radius 允许你设置元素的外边框圆角。当使用一个半径时确定一个圆形,当使用两个半径时确定一个椭圆。这个(椭)圆与边框的交集形成圆角效果。

使用@keyframes规则,你可以创建动画。

创建动画是通过逐步改变从一个CSS样式设定到另一个。

在动画过程中,您可以更改CSS样式的设定多次。

指定的变化时发生时使用%,或关键字"from"和"to",这是和0%到100%相同。

0%是开头动画,100%是当动画完成。

为了获得最佳的浏览器支持,您应该始终定义为0%和100%的选择器。

语法为:

@keyframes animationname {keyframes-selector {css-styles;}}

animation属性语法为:

animation: name duration timing-function delay iteration-count direction fill-mode play-state;
  • animation-name  指定要绑定到选择器的关键帧的名称

  • animation-duration  动画指定需要多少秒或毫秒完成

  • animation-timing-function   设置动画将如何完成一个周期

  • animation-delay 设置动画在启动前的延迟间隔。

  • animation-iteration-count   定义动画的播放次数。

  • animation-direction 指定是否应该轮流反向播放动画。

  • animation-fill-mode 规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。

  • animation-play-state    指定动画是否正在运行或已暂停。

示例如下:

<html><head><meta charset="utf-8"> <title>123</title> <style> #example1{background:#dddddd;width:100px;height:100px;border-radius:100%;text-align:center;animation:fadenum 5s;}@keyframes fadenum{
 100%{transform:rotate(360deg);}}</style></head><body><div id="example1">
这是一个圆</div><br><br></body></html>

输出结果:

本文标题:css3如何实现圆形转动的效果
本文链接:https://www.qqooo.cn/post/6913.html
版权说明:网站文章均来源于手工整理和网友投稿,若有不妥之处请来信 xsds@vip.qq.com 处理,谢谢!