In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules.

You can achieve the same goal by manipulating the animation-duration of multiple elements.

In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop.

To make them twinkle at different rates, you can set the animation-duration property to different values for each element.

练习题目:

In the previous challenge, you changed the animation rates for two similarly animated elements by altering their @keyframes rules.

You can achieve the same goal by manipulating the animation-duration of multiple elements.

In the animation running in the code editor, there are three "stars" in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the animation-duration property to different values for each element.

练习代码:

 <style>
.stars {
background-color: white;
height: 30px;
width: 30px;
border-radius: 50%;
animation-iteration-count: infinite;
} .star-1 {
margin-top: 15%;
margin-left: 60%;
animation-duration: 1s;
animation-name: twinkle;
} .star-2 {
margin-top: 25%;
margin-left: 25%;
animation-duration: 0.9s;
animation-name: twinkle;
} .star-3 {
margin-top: 10%;
margin-left: 50%;
animation-duration: 1.1s;
animation-name: twinkle;
} @keyframes twinkle {
20% {
transform: scale(0.5);
opacity: 0.5;
}
} #back {
position: fixed;
padding:;
margin:;
top:;
left:;
width: 100%;
height: 100%;
background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
}
</style> <div id="back"></div>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="star-3 stars"></div>

效果如下:

FCC---Animate Multiple Elements at Variable Rates---还可以改循环时间,达到不同律动频率的效果的更多相关文章

  1. VUE之命令行报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead 解决办法

    Failed to compile. ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-5992 ...

  2. VUE编译报错 Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead

    背景: 在使用VUE添加标签的时候编译报错,报错如下: Component template should contain exactly one root element. If you are u ...

  3. vue报错:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在.vue文件中引入了 element-ui 的 table 和 pagination 组件后,报错:Component template should contain exactly one roo ...

  4. python+opencv中最近出现的一些变化( OpenCV 官方的 Python tutorial目前好像还没有改过来?) 记一次全景图像的拼接

    最近在学习过程中发现opencv有了很多变动, OpenCV 官方的 Python tutorial目前好像还没有改过来,导致大家在学习上面都出现了一些问题,现在做一个小小的罗列,希望对大家有用 做的 ...

  5. FCC---Animate Elements at Variable Rates----一闪一闪亮晶晶,不同的闪动节奏

    There are a variety of ways to alter the animation rates of similarly animated elements. So far, thi ...

  6. 组件嵌套时报:Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在组件嵌套的过程中,报了一个错误: 这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.vue组件的 ...

  7. Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    运行代码时,一直报错: 经过查询后才知道,vue模板只能有一个跟对象 我是这样写的 最后修改为 就可以正常运行了

  8. 【错误总结】Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    大致意思是因为模板里面应该包含一个根元素,使用组件的时候应该用div或p标签包起来

  9. 15+优秀的jQuery视差插件

    jQuery视差效果的应用越来越广泛了,今天就给大家分享一些优秀的jQuery视差插件,它们确实太棒了! 原文地址:http://www.goodfav.com/jquery-parallax-plu ...

随机推荐

  1. 【分析工具】阿里巴巴Arthas--线上问题分析利器

    目录 1. Arthas是什么 2. Arthas能解决什么问题 3. 快速安装 第一步:下载 第二步:运行 第三步:选择进程 4. 实战使用 5. 总结 本博客转载自阿里开源的 Java 诊断工具 ...

  2. C#时间戳与时间相互转换

    代码: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  3. Git - Git基本常用命令

    Git基本常用命令 mkdir:         XX (创建一个空目录 XX指目录名) pwd:          显示当前目录的路径. git init          把当前的目录变成可以管理 ...

  4. C# Serialization performance in System.Runtime.Serialization.Formatters.Binary.BinaryFormatter,Newtonsoft.Json.JsonConvert and System.Text.Json.JsonSerializer.Serialize

    In .net core 3.0 using System;using System.Collections.Generic;using System.Collections;using System ...

  5. 松软科技前端课堂:JavaScript 日期

    JavaScript 日期输出 默认情况下,JavaScript 将使用浏览器的时区并将日期显示为全文本字符串: Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间) ...

  6. 转战物联网·基础篇07-深入理解MQTT协议之控制报文(数据包)格式

      在MQTT协议中,一个控制报文(数据包)的结构按照前后顺序分如下三部分: 结构名 中文名 解释说明 Fixed header 固定报头 报文的最开始部分,所有报文都包含这个部分 Variable ...

  7. rman备份有效性验证/恢复进度监控

    故障一定会发生,只是早晚的问题!作为一名DBA时刻要记着备份,备份的有效性同样重要,不要当某一天最需要的时候,发现悲剧了...验证rman备份是否可以成功还原,11g后可以通过命令验证但,验证全备份一 ...

  8. & 和 && 的区别,与(&)运算符、位移运算符(<< 、>>、>>>)的含义及使用(Java示例)

    & 和 && 的区别,与(&)运算符.位移运算符(<< .>>.>>>)的含义及使用(Java示例) 1. & 和 & ...

  9. Docker中进入容器命令行及后台运行

    Docker中我们一般会有两种执行命令的方式,一种是直接进入容器的命令行,在终端执行并查看结果,一种是在后台执行,并不会在终端查看结果. 1.进入容器命令行 su root docker run -i ...

  10. Linux系统学习 二、测评-身份鉴别1

    身份鉴别 1)对登陆操作系统和数据库系统的用户进行身份表示和鉴别 1.密码文件中的口令字段是否不为空 2.检查各个用户主目录下的.rhosts文件 3.查看/etc/hosts.equiv 学习: 1 ...