FCC---Animate Multiple Elements at Variable Rates---还可以改循环时间,达到不同律动频率的效果
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---还可以改循环时间,达到不同律动频率的效果的更多相关文章
- 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 ...
- 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 ...
- 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 ...
- python+opencv中最近出现的一些变化( OpenCV 官方的 Python tutorial目前好像还没有改过来?) 记一次全景图像的拼接
最近在学习过程中发现opencv有了很多变动, OpenCV 官方的 Python tutorial目前好像还没有改过来,导致大家在学习上面都出现了一些问题,现在做一个小小的罗列,希望对大家有用 做的 ...
- FCC---Animate Elements at Variable Rates----一闪一闪亮晶晶,不同的闪动节奏
There are a variety of ways to alter the animation rates of similarly animated elements. So far, thi ...
- 组件嵌套时报: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组件的 ...
- 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 using v-if on multiple elements, use v-else-if to chain them instead.
大致意思是因为模板里面应该包含一个根元素,使用组件的时候应该用div或p标签包起来
- 15+优秀的jQuery视差插件
jQuery视差效果的应用越来越广泛了,今天就给大家分享一些优秀的jQuery视差插件,它们确实太棒了! 原文地址:http://www.goodfav.com/jquery-parallax-plu ...
随机推荐
- Java题库——chapter7 多维数组
1)Which of the following statements are correct? 1) _______ A)char[ ][ ] charArray = {{'a', 'b'}, {' ...
- 痞子衡嵌入式:飞思卡尔i.MX RT系列MCU量产神器RT-Flash常见问题
对于MCUBootUtility,RT-Flash工具,有任何使用上的问题,可以在本博客下留言,也可以扫码加入QQ交流群.
- Add an Item to the Navigation Control 将项目添加到导航控件
In this lesson, you will learn how to add an item to the navigation control. For this purpose, the N ...
- Spring Boot 2 使用Servlet、Listener和Filter配置
开发环境:IntelliJ IDEA 2019.2.2Spring Boot版本:2.1.8 新建一个名称为demo的Spring Boot项目. 一.使用Servlet配置 1.修改启动类 Demo ...
- Saltstack_使用指南16_syndic
1. 主机规划 salt 版本 [root@salt100 ~]# salt --version salt (Oxygen) [root@salt100 ~]# salt-minion --versi ...
- 41-data-packed volume container
在上一节的例子中 volume container 的数据归根到底还是在 host 里,有没有办法将数据完全放到 volume container 中,同时又能与其他容器共享呢? 当然可以,通常我们称 ...
- Hive表的几种存储格式
Hive的文件存储格式: textFile textFile为默认格式 存储方式:行存储 缺点:磁盘开销大:数据解析开销大:压缩的text文件,hive无法进行合并和拆分 sequencefile 二 ...
- tensorflow dataloader 相关内容
Tensorflow dataloader 相关调研:数据读取是训练的开始,是非常关键的一步:下面是调研时搜集到的一些相关链接: 十图详解tensorflow数据读取机制 https://zhuanl ...
- s3c2440裸机-时钟编程(二、配置时钟寄存器)
s3c2440裸机编程-时钟编程(二.配置时钟寄存器) 1.2440时钟时序 下图是2440时钟配置时序: 1.上电后,nRESET复位信号拉低,此时cpu还无法取指令工作. 2.nRESET复位信号 ...
- Paper慢慢读 - AB实验人群定向 Recursive Partitioning for Heterogeneous Casual Effects
这篇是treatment effect估计相关的论文系列第一篇所以会啰嗦一点多给出点背景. 论文 Athey, S., and Imbens, G. 2016. Recursive partition ...