CSS-循环浏览单词

我有以下简单的布局，使用CSS循环短语

.切换文本{ 位置：相对位置； } .切换文本em{ 不透明度：0； 字体风格：普通； 空白：nowrap； 位置：绝对位置； 左：5px； 动画名称：示例； 动画持续时间：3s； 动画迭代次数：无限； } .切换文本em:n-child2{ 动画延迟：1s； } .切换文本em:n-child3{ 动画延迟：2s； 不透明度：1； } @关键帧示例{ 0% { 不透明度：0； } 33% { 不透明度：0； } 66% { 不透明度：0； } 100% { 不透明度：1； } } 环境1 环境2 环境3 环境1 环境2 环境3 环境4 环境5 环境6

---

由于已将动画设置为第三级，因此必须从第二级列表中删除3个列表。如果需要更多，则必须相应地添加动画

@导入url'https://fonts.googleapis.com/css?family=Barlow'; 身体{ 背景：2000人； -webkit背景尺寸：封面； -moz背景尺寸：封面； -o-背景尺寸：封面； 背景尺寸：封面； 字体系列：“Barlow”，无衬线； } .集装箱{ 宽度：100%； 位置：相对位置； 溢出：隐藏； } a{ 文字装饰：无； } h1.main，p.demos{ -webkit动画延迟：18秒； -moz动画延迟：18s； -ms动画延迟：18s； 动画延迟：18秒； } .sp容器{ 位置：固定； 顶部：0px； 左：0px； 宽度：100%； 身高：100%； z指数：0； 背景：-webkit-radial-gradientrgba0,0,0,0.1，rgba0,0,0.3 35%，rgba0,0,0,0.7； 背景：-moz径向梯度rgba0,0,0,0.1，rgba0,0,0,0.3 35%，rgba0,0,0,0.7； 背景：-ms-radial-gradientrgba0,0,0,0.1，rgba0,0,0.3 35%，rgba0,0,0,0.7； 背景：径向梯度rgba0,0,0,0.1，rgba0,0,0,0.3 35%，rgba0,0,0,0.7； } .sp内容{ 位置：绝对位置； 宽度：100%； 身高：100%； 左：0px； 顶部：0px； z指数：1000； } .sp容器h2{ 位置：绝对位置； 最高：50%； 线高：100px； 高度：90px； 利润上限：-50px； 字体大小：90px； 宽度：100%； 文本对齐：居中； 颜色：透明； -webkit动画：blurFadeInOut 3s向后移动； -moz动画：blurFadeInOut 3s向后播放； -ms动画：blurFadeInOut 3秒后退轻松； 动画：blurFadeInOut 3秒后退轻松； } .sp容器h2.frame-1{ -webkit动画延迟：0秒； -moz动画延迟：0s； -ms动画延迟：0s； 动画延迟：0s； } .sp容器h2.frame-2{ -webkit动画延迟：3s； -moz动画延迟：3s； -ms动画延迟：3s； 动画延迟：3s； } .sp容器h2.frame-3{ -webkit动画延迟：6s； -moz动画延迟：6s； -ms动画延迟：6s； 动画延迟：6秒； } .sp容器h2.frame-4{ 字体大小：200px； -webkit动画延迟：9秒； -moz动画延迟：9秒； -毫秒动画延迟：9秒； 动画延迟：9秒； } .sp容器h2.frame-5{ -webkit动画：无； -moz动画：无； -ms动画：无； 动画：无； 颜色：透明； 文本阴影：0px 0px 1px fff； } .sp容器h2.frame-5跨度{ -webkit动画：blurFadeIn 3秒轻松后退12秒； -moz动画：blurFadeIn 1秒后退12秒； -ms动画：blurFadeIn 3秒后移12秒； 动画：blurFadeIn 3秒后退12秒； 颜色：透明； 文本阴影：0px 0px 1px fff； } .sp容器h2.frame-5跨度：N-child2{ -webkit动画延迟：13秒； -moz动画延迟：13s； -毫秒动画延迟：13秒； 动画延迟：13秒； } .sp容器h2.frame-5跨度：N-child3{ -webkit动画延迟：14秒； -moz动画延迟：14s； -毫秒动画延迟：14秒； 动画延迟：14秒； } .sp地球仪{ 位置：绝对位置； 宽度：282px； 身高：273px； 左：50%； 最高：50%； 保证金：-137px0-141px； 背景：透明urlhttp://web-sonick.zz.mu/images/sl/globe.png 不重复左上角； -webkit动画：fadeInBack 3.6秒线性14秒向后； -moz动画：fadeInBack 3.6秒线性14秒向后； -ms动画：fadeInBack 3.6秒线性14秒向后； 动画：fadeInBack 3.6s线性向后14s； -ms过滤器：progid:DXImageTransform.Microsoft.AlphaOpacity=30； 过滤器：alphaopacity=30； 不透明度：0.3； -webkit转换：scale5； -moz变换：scale5； -o变换：缩放5； -ms变换：scale5； 变换：缩放5； } .sp循环链接{ 位置：绝对位置； 左：50%； 底部：100px； 左边距：-50px； 文本对齐：居中； 线高：100px； 宽度：100px； 高度：100px； 背景：fff； 颜色：3f1616； 字体大小：25px； -webkit边界半径：50%； -moz边界半径：50%； 边界半径：50%； -webkit动画：fadeInRotate 1s线性向后16s； -moz动画：fadeInRotate 1s线性向后16s； -ms动画：fadeInRotate 1s线性向后16s； 动画：fadeInRotate 1s线性向后16s； -webkit变换：缩放1旋转0度； -moz变换：缩放1旋转0度； -o变换：缩放1旋转0度； -ms变换：缩放1旋转0度； 变换：scale1ro 0度； } .sp循环链接：悬停{ 背景：85373b； 颜色：fff； } /**/ @-webkit关键帧模糊FadeInOut{ 0% { 不透明度：0； 文本阴影：0px 0px 40px fff； -webkit转换：scale1.3； } 20%, 75% { 不透明度：1； 文本阴影：0px 0px 1px fff； -webkit转换：scale1； } 100% { 不透明度：0； 文本阴影：0px 0px 50px fff； -webkit转换：scale0； } } @-webkit关键帧模糊Fadein{ 0% { 不透明度：0； 文本阴影：0px 0px 40px fff； -webkit转换：scale1.3； } 50% { 不透明度：0.5； 文本阴影：0px 0px 10px fff； -webkit转换：scale1.1； } 100% { 不透明度：1； 文本阴影：0px 0px 1px fff； -webkit转换：scale1； } } @-webkit关键帧fadeInBack{ 0% { 不透明度：0； -webkit转换：scale0； } 50% { 不透明度：0.4； -webkit转换：scale2； } 100% { 不透明度：0.2； -webkit转换：scale5； } } @-webkit关键帧fadeInRotate{ 0% { 不透明度：0； -webkit变换：缩放0旋转360度； } 100% { 不透明度：1； -webkit变换：缩放1旋转0度； } } /**/ @-moz关键帧模糊FADEINOUT{ 0% { 不透明度：0； 文本阴影：0px 0px 40px fff； -moz变换：scale1.3； } 20%, 75% { 不透明度：1； 文本阴影：0px 0px 1px fff； -moz变换：scale1； } 100% { 不透明度：0； 文本阴影：0px 0px 50px fff； -moz变换：scale0； } } @-moz关键帧模糊Fadein{ 0% { 不透明度：0； 文本阴影：0px 0px 40px fff； -moz变换：scale1.3； } 100% { 不透明度：1； 文本阴影：0px 0px 1px fff； -moz变换：scale1； } } @-moz关键帧fadeInBack{ 0% { 不透明度：0； -moz变换：scale0； } 50% { 不透明度：0.4； -moz变换：scale2； } 100% { 不透明度：0.2； -moz变换：scale5； } } @-moz关键帧fadeInRotate{ 0% { 不透明度：0； -moz变换：缩放旋转360度； } 100% { 不透明度：1； -moz变换：缩放1旋转0度； } } /**/ @关键帧模糊FADEINOUT{ 0% { 不透明度：0； 文本阴影：0px 0px 40px fff； 转换：scale1.3； } 20%, 75% { 不透明度：1； 文本阴影：0px 0px 1px fff； 变换：scale1； } 100% { 不透明度：0； 文本阴影：0px 0px 50px fff； 变换：scale0； } } @关键帧模糊{ 0% { 不透明度：0； 文本阴影：0px 0px 40px fff； 转换：scale1.3； } 50% { 不透明度：0.5； 文本阴影：0px 0px 10px fff； 转换：scale1.1； } 100% { 不透明度：1； 文本阴影：0px 0px 1px fff； 变换：scale1； } } @关键帧fadeInBack{ 0% { 不透明度：0； 变换：scale0； } 50% { 不透明度：0.4； 变换：scale2； } 100% { 不透明度：0.2； 变换：缩放5； } } @关键帧fadeInRotate{ 0% { 不透明度：0； 变换：缩放旋转360度； } 100% { 不透明度：1； 变换：缩放1旋转0度； } } 令人惊叹的 文本动画效果 使用CSS3构建 试试看！ 叉 改变 经验。

---

可能是因为你的代码“覆盖”到：nth-child3，但你现在添加了更多的元素…？你有添加了6项的示例吗？不是6项，但我有多帧的内容，我已经更新了答案。请检查这是否有用。