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----超级好看的心跳,粉色的的更多相关文章

  1. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  2. 62.纯 CSS 创作一只蒸锅(感觉不好看呀)

    原文地址:https://segmentfault.com/a/1190000015389338 HTML code: <!-- steamer: 蒸锅: lid: 盖子: pot: 锅 --& ...

  3. 【WEB前端系列之CSS】CSS3动画之Animation

    前言 动画使用示例https://github.com/AndyFlower/web-front/tree/master/css3/loading 学习CSS3中Animation之前先来看一个动画特 ...

  4. css—动画(transform, transition, animation)

    transform 静态属性,一旦写进style里面,会立即显示作用,无任何变化过程.(类似于left, right, top, bottom这类属性) 主要用来做元素的变形 改变元素样式的属性主要有 ...

  5. 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. ...

  6. [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 ...

  7. [CSS] Build a Fluid Loading Animation in CSS

    In this lesson, we will create a fluid loading animation using Animations and Transformations in CSS ...

  8. Odometer使用JavaScript和CSS制作数字滑动效果

    Odometer是一个使用JavaScript和CSS技术,制作出数字上下滑动的动画效果插件,有点类似与我们的天然气的读数的动画效果,这个插件是轻量级的,压缩版本只有3kg,使用CSS3动画技术,所以 ...

  9. CSS+transform画动态表情

    先给大家看下画完后是什么样子: 代码看这里: html代码: <body> <div class="emoji emoji_like"> <div c ...

随机推荐

  1. 痞子衡嵌入式:飞思卡尔i.MX RTyyyy系列MCU特性那些事(2)- RT1052DVL6性能实测(CoreMark)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的性能. 在前面的文章 i.MXRTyyyy微控制器概览 里,痞子衡给大家简介过恩智浦半导体在2 ...

  2. SpringBoot配置文件yml ScannerException: while scanning an alias *

    在使用yml编写配置我呢见 management: endpoints: web: base-path: /actuator jmx: exposure: include: * 报了如下错误 解决方案 ...

  3. C#深入浅出之数据类型

    基本数据类型        C#支持完整的BCL(基类库)名字,但是最好都统一使用关键字进行使用与开发,比如使用int而不是System.Int32,以及使用string类型时候应当使用string而 ...

  4. SpringBoot+MyBatisPlus+ElementUI一步一步搭建前后端分离的项目(附代码下载)

    场景 一步一步教你在IEDA中快速搭建SpringBoot项目: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/87688277 ...

  5. 7天教你精通变大神,学CAD关键还要掌握方法,纯干货新手要看

    接触CAD初期是“痛苦”的,“煎熬”的,也是充满“成就”的. 痛苦是初学者怎么都不懂,需要学习的东西很多,整个过程是有些痛苦的. 煎熬也是每个求学阶段都会遇到的状态,眼睛会了,手不会,这个状态很难受. ...

  6. 1-5-JS基础-数组应用及实例应用

    array 数组 一般简写arr 格式 var arr [ '第1个','第2个','第3个','第4个' ] 最后一个不要叫逗号 alert(arr.length) 弹出数组长度 4个 alert( ...

  7. 查询物料单位PAC成本

    select cpp.period_name 期间名称, ccga.organization_id 组织ID, ood.ORGANIZATION_CODE 组织代码, OOD.ORGANIZATION ...

  8. Linux-3.14.12内存管理笔记【伙伴管理算法(3)】

    前面分析了伙伴管理算法的初始化,在切入分析代码实现之前,例行先分析一下其实现原理. 伙伴管理算法(也称之为Buddy算法),该算法将所有空闲的页面分组划分为MAX_ORDER个页面块链表进行管理,其中 ...

  9. Young and Beautiful 新红楼剪辑(by up)

    up剪辑的新红楼视频,配上Young and Beautiful 这首英文歌,很优美^_^

  10. 不依赖官方LibPack编译FreeCAD的一次尝试

    在Windows下编译FreeCAD,通常的方法是依赖官方提供的LibPack,但是只有vs2008, vs2012, vs2013等几个版本提供.比如现在感觉vs2017比较好用,可是没有官方Lib ...