FCC---Make a CSS Heartbeat using an Infinite Animation Count----超级好看的心跳,粉色的
Here's one more continuous animation example with the animation-iteration-count
property that uses the heart you designed in a previous challenge.
The one-second long heartbeat animation consists of two animated pieces.
The heart
elements (including the :before
and :after
pieces) are animated to change size using the transform
property, and the background div
is animated to change its color using the background
property.
练习题目:
Keep the heart beating by adding the animation-iteration-count
property for both the back
class and the heart
class and setting the value to infinite. The heart:before
and heart:after
selectors do not need any animation properties.
练习代码:
<style>
.back {
position: fixed;
padding:;
margin:;
top:;
left:;
width: 100%;
height: 100%;
background: white;
animation-name: backdiv;
animation-duration: 1s;
animation-iteration-count: infinite;
} .heart {
position: absolute;
margin: auto;
top:;
right:;
bottom:;
left:;
background-color: pink;
height: 50px;
width: 50px;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:after {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: 0px;
left: 25px;
}
.heart:before {
background-color: pink;
content: "";
border-radius: 50%;
position: absolute;
width: 50px;
height: 50px;
top: -25px;
left: 0px;
} @keyframes backdiv {
50% {
background: #ffe6f2;
}
} @keyframes beat {
0% {
transform: scale(1) rotate(-45deg);
}
50% {
transform: scale(0.6) rotate(-45deg);
}
} </style>
<div class="back"></div>
<div class="heart"></div>
效果:
跳动的粉心,背景颜色会更换,变大变小
FCC---Make a CSS Heartbeat using an Infinite Animation Count----超级好看的心跳,粉色的的更多相关文章
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- 62.纯 CSS 创作一只蒸锅(感觉不好看呀)
原文地址:https://segmentfault.com/a/1190000015389338 HTML code: <!-- steamer: 蒸锅: lid: 盖子: pot: 锅 --& ...
- 【WEB前端系列之CSS】CSS3动画之Animation
前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特 ...
- css—动画(transform, transition, animation)
transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...
- FCC---Animate Elements Continually Using an Infinite Animation Count---设置animation-iteration-count的次数为无限,让小球一直跳动
The previous challenges covered how to use some of the animation properties and the @keyframes rule. ...
- [CSS] Create a Card Flip Animation with CSS
Animation can be a powerful way to enhance a user experience. In this lesson, we'll walk through the ...
- [CSS] Build a Fluid Loading Animation in CSS
In this lesson, we will create a fluid loading animation using Animations and Transformations in CSS ...
- Odometer使用JavaScript和CSS制作数字滑动效果
Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...
- CSS+transform画动态表情
先给大家看下画完后是什么样子: 代码看这里: html代码: <body> <div class="emoji emoji_like"> <div c ...
随机推荐
- 痞子衡嵌入式:飞思卡尔i.MX RTyyyy系列MCU特性那些事(2)- RT1052DVL6性能实测(CoreMark)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的性能. 在前面的文章 i.MXRTyyyy微控制器概览 里,痞子衡给大家简介过恩智浦半导体在2 ...
- SpringBoot配置文件yml ScannerException: while scanning an alias *
在使用yml编写配置我呢见 management: endpoints: web: base-path: /actuator jmx: exposure: include: * 报了如下错误 解决方案 ...
- C#深入浅出之数据类型
基本数据类型 C#支持完整的BCL(基类库)名字,但是最好都统一使用关键字进行使用与开发,比如使用int而不是System.Int32,以及使用string类型时候应当使用string而 ...
- SpringBoot+MyBatisPlus+ElementUI一步一步搭建前后端分离的项目(附代码下载)
场景 一步一步教你在IEDA中快速搭建SpringBoot项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/87688277 ...
- 7天教你精通变大神,学CAD关键还要掌握方法,纯干货新手要看
接触CAD初期是“痛苦”的,“煎熬”的,也是充满“成就”的. 痛苦是初学者怎么都不懂,需要学习的东西很多,整个过程是有些痛苦的. 煎熬也是每个求学阶段都会遇到的状态,眼睛会了,手不会,这个状态很难受. ...
- 1-5-JS基础-数组应用及实例应用
array 数组 一般简写arr 格式 var arr [ '第1个','第2个','第3个','第4个' ] 最后一个不要叫逗号 alert(arr.length) 弹出数组长度 4个 alert( ...
- 查询物料单位PAC成本
select cpp.period_name 期间名称, ccga.organization_id 组织ID, ood.ORGANIZATION_CODE 组织代码, OOD.ORGANIZATION ...
- Linux-3.14.12内存管理笔记【伙伴管理算法(3)】
前面分析了伙伴管理算法的初始化,在切入分析代码实现之前,例行先分析一下其实现原理. 伙伴管理算法(也称之为Buddy算法),该算法将所有空闲的页面分组划分为MAX_ORDER个页面块链表进行管理,其中 ...
- Young and Beautiful 新红楼剪辑(by up)
up剪辑的新红楼视频,配上Young and Beautiful 这首英文歌,很优美^_^
- 不依赖官方LibPack编译FreeCAD的一次尝试
在Windows下编译FreeCAD,通常的方法是依赖官方提供的LibPack,但是只有vs2008, vs2012, vs2013等几个版本提供.比如现在感觉vs2017比较好用,可是没有官方Lib ...