CSS3animation属性详解（二）

分手后的思念是犯贱 2023-07-14 10:57 1阅读 0赞

# CSS3animation属性详解（二） #

--------------------

# animation-iteration-count #

### animation-iteration-count属性 ###

检索或设置对象动画的循环次数

### 语法 ###

animation-iteration-count: infinite | <number>;

### 参数说明 ###

<number>为数字，其默认值为“1”；infinite为无限次数循环

--------------------

# 编程练习 #

我们学了动画的知识，那么我们来一起完成一个旋转的太极图吧。

## 任务 ##

1.  创建一个div，用CSS控制其大小、边框、位置等，做成一个静态的圆形，一般为红色，一般为白色
2.  用div的伪元素绘制两个圆环并放置适合位置使其成为一个太极图案
3.  创建动画
4.  定义动画的重复属性，让其循环播放

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>CSS3animation属性详解（二）</title>
    		<style type="text/css"> div{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: border-box; width: 400px; height: 400px; margin: auto; border: 1px solid red; border-bottom: 200px solid red; border-radius: 50%; transform-origin: 50% 50%; animation-name: rotate; animation-duration: 5s; animation-timing-function: linear; animation-iteration-count: infinite; } div:before{ content: ""; float: left; width: 50px; height: 50px; border: 75px solid red; background-color: white; margin-top: 100px; border-radius: 50%; } div:after{ content: ""; float: right; width: 50px; height: 50px; border: 75px solid white; background-color: red; margin-top: -200px; border-radius: 50%; } @keyframes rotate{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} } </style>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3animation属性详解（二）

CSS3animation属性详解（二） -------------------- animation-iteration-count animati

分手后的思念是犯贱/ 2023年07月14日 10:57/ 0 赞/ 2 阅读

相关 css3 动画 animation

css3 动画 animation 通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。 CSS3 @key

た入场券/ 2023年06月26日 10:50/ 0 赞/ 7 阅读

相关 css动画-animation各个属性详解

css3的animation很容易就能实现各种酷炫的动画，虽然看到别人的成果图会觉得很难，但是如果掌握好各种动画属性，做好酷炫吊炸天的动画都不在话下，好，切入正题。一、动

忘是亡心i/ 2022年09月26日 03:14/ 0 赞/ 304 阅读

相关 CSS3 Animation

[CSS3][]属性中有关于制作动画的三个属性：[Transform][],[Transition][],Animation；我们一起学习完了[Transform][]和[Tr

忘是亡心i/ 2022年08月07日 08:50/ 0 赞/ 232 阅读

相关 CSS3 animation介绍

上一篇[transition][]过渡属性通过让属性在时间段内根据贝塞尔曲线平滑过渡，呈现出动画效果，但毕竟功能有限。本篇介绍的animation属性和传统的动画制作一样，能控

朴灿烈づ我的快乐病毒、/ 2022年05月24日 08:45/ 0 赞/ 173 阅读

相关 css3 动画 animation

CSS3 动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。浏览器支持 Internet Ex

缺乏、安全感/ 2022年05月16日 03:10/ 0 赞/ 286 阅读

相关 08-CSS3的动画animation属性

CSS3 动画当在 @keyframes 创建动画，把它绑定到一个选择器，否则动画不会有任何效果。指定至少这两个CSS3的动画属性绑定向一个选择器：规定动

红太狼/ 2021年12月05日 22:31/ 0 赞/ 367 阅读

相关 CSS3 animation属性

> timing-function 是用来描述 CSS3 animation 动画曲线的函数，通常称之为缓动函数. div { animation: mv

╰+哭是因爲堅強的太久メ/ 2021年09月18日 23:40/ 0 赞/ 371 阅读

相关 CSS3新增特性 animation属性

CSS3 animation属性 1. 使用格式： animation: name duration timing-function delay iteration-c

末蓝、/ 2021年09月02日 04:02/ 0 赞/ 488 阅读

相关 CSS3动画animation认识和Animate.css的使用

CSS动画可以取代`js`动画在移动端会更加流畅！下面是一个的绘制太阳系各大行星运行轨迹笔记，可以自学参考！ -------------------- 首先我们需要创

爱被打了一巴掌/ 2021年07月04日 22:37/ 0 赞/ 741 阅读