html 纯css设置转圈,CSS3 转圈彩色文字动画实例及animation-play-state属性规则

不念不忘少年蓝@ 2023-01-23 09:47 146阅读 0赞

网页中的动画通常是当鼠标移到上面，动画立即停止，便于用户阅读；CSS3新增的制作动画属性也考虑到这个问题，只要作了相应的设置，鼠标移到上面，动画也会停止，移开鼠标，动画继续运动；这主要通过animation-play-state属性来控制。

animation-play-state只有两个取值，一个控制动画运动，另一个控制动画停止；具体怎么设置看下面的语法规则，至于如何应用，看文章最后的转圈彩色文字动画实例。

一、animation-play-state语法规则

animation-play-state：\[, \* \]

= running | paused

二、语法说明

1、animation-play-state 可以设置多个动画状态，默认值为running

A、animation-play-state 表示第一个动画状态，不能省略；

B、\[\]中的 animation-play-state 表示第二个动画状态，可以省略；

C、\* 表示第三个、第四个、……第n个动画状态，可以省略；

2、animation-play-state 取值如下：

running：运动；

paused：暂停。

三、animation-play-state转圈彩色文字动画实例

以下是一个转圈彩色文字动画实例，文字一边正反转圈，一边变色，最后落下再慢慢升起，呈现转圈彩色文字效果。实例中设置了动画暂停，只要把鼠标移到上面，快速转动的文字就会停下来。

html代码：

### CSS3转圈彩色文字动画 ###

CSS代码：

.div\{position:relative;overflow:hidden;width:600px;height:200px; font-size:16px; border:1px solid \#ab9595;background-color:\#e3e2e0;padding:8px;\}

.div h3\{animation:text-animation 2s ease-out infinite forwards;\}

.div h3:hover\{animation-play-state:paused;\}

@keyframes text-animation\{

0%\{transform:translate(0, 0); opacity:0;\}

5%\{transform:rotate(-179deg);opacity:0.25;\}

10%\{transform:rotate(179deg);opacity:0.5; font-size:22px;\}

15%\{transform:rotate(-179deg);opacity:1; font-size:52px;\}

20%\{transform:rotate(179deg);opacity:1; font-size:52px;\}

25%\{transform:rotate(-179deg);opacity:1; font-size:52px;\}

27%\{transform:rotate(179deg);opacity:0.5; font-size:22px; color:Yellow;\}

30%\{transform:rotate(-179deg);opacity:0.25; color:Green; \}

32%\{transform:rotate(179deg);opacity:1; font-size:52px; color:\#0789db;\}

25%\{transform:rotate(-179deg);opacity:0.5; font-size:22px; color:Red;\}

37%\{transform:rotate(179deg);opacity:0.75; font-size:22px; color:\#10e21a;\}

40%\{transform:rotate(-179deg);opacity:1; font-size:52px; color:\#03aa59;\}

45%\{transform:rotate(179deg);opacity:1; font-size:52px; color:\#ffff00;\}

50%\{transform:rotate(-179deg);opacity:1; font-size:52px; color:\#39ae5d;\}

55%\{transform:rotate(179deg);opacity:1; font-size:52px; color:\#a8ef53;\}

60%\{transform:translate(26px, 100px);opacity:1; font-size:52px;color:\#f461a2;\}

100%\{transform:translate(26px, 70px);font-size:52px;opacity:1; color:\#f713a9;\}

\}

效果图：

CSS3转圈彩色文字动画

发表评论取消回复

表情：

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

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

相关阅读

相关【CSS3】CSS3 动画 ③ ( 动画属性 | CSS3 常见动画属性简介 | 动画属性简写方式 | 动画属性简写语法 | 代码示例 )

文章目录一、CSS3 动画属性 1、CSS3 常见动画属性简介 2、代码示例 - CSS3 常见动画属性使用二、CSS3 动画属

素颜马尾好姑娘i/ 2023年10月14日 16:24/ 0 赞/ 54 阅读

相关纯CSS3文字Loading动画特效

纯CSS3文字Loading动画特效是一款个性的loading文字加载动画。 ![1302312-20180114171344785-1162765010.png][]

快来打我*/ 2023年06月10日 11:28/ 0 赞/ 50 阅读

相关 html 纯css设置转圈,CSS3 转圈彩色文字动画实例及animation-play-state属性规则

网页中的动画通常是当鼠标移到上面，动画立即停止，便于用户阅读；CSS3新增的制作动画属性也考虑到这个问题，只要作了相应的设置，鼠标移到上面，动画也会停止，移开鼠标，动画继续运动

不念不忘少年蓝@/ 2023年01月23日 09:47/ 0 赞/ 147 阅读

相关 CSS - 元素旋转动画（360度转圈）

效果图 ![在这里插入图片描述][2020112611231257.gif_pic_cener] 代码 @keyframes rotate {

野性酷女/ 2022年12月24日 01:49/ 0 赞/ 292 阅读

相关 CSS3 元素转圈动画（元素旋转动画）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

谁践踏了优雅/ 2022年11月10日 01:25/ 0 赞/ 221 阅读

相关 html图片怎么显示一个转圈,如何用HTML5实现图片转圈的动画效果

如何用HTML5实现图片转圈的动画效果如何用HTML5实现图片转圈的动画效果我们大家都知道让画面动起来就会让画面显得更加的生动好看，今天小编就给大家分享一下如何用HTM

客官°小女子只卖身不卖艺/ 2022年10月12日 05:38/ 0 赞/ 192 阅读

相关纯css html代码,纯css3实现文字动画

先上代码，代码如下： css3动画 - daimami.com 示例文字关于一些属性的说明： css3中的动画功能分为transitions功能和animations

心已赠人/ 2022年10月06日 12:45/ 0 赞/ 258 阅读

相关 html 加载转圈功能

方式一： <html> <body> <input type="button" value="开始" onclick="ShowLoading(

末蓝、/ 2022年09月29日 02:01/ 0 赞/ 294 阅读

相关 HTML+CSS3彩色旋转动画js特效

[下载地址][Link 1] HTML+CSS3彩色旋转动画特效，五彩斑斓的圆点旋转网页特效。 ![1632803206.png][] dd: [Link 1]: h

小咪咪/ 2022年09月13日 14:20/ 0 赞/ 462 阅读

相关纯CSS3文字效果推荐

前端开发whqet,csdn,王海庆,whqet,前端开发专家之前曾经研究过几个纯css实现的文字效果，《[CSS文字条纹阴影动画][CSS]》和《[响应式奶油立体字效果]

小灰灰/ 2022年08月27日 03:21/ 0 赞/ 276 阅读