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. CentOS 7.x 安装 ZSH 终端

    一.安装基本组件 首先执行 yum 命令来安装需要的 zsh 原始程序与 git 程序来 pull 代码. yum install -y zsh git 安装 oh my zsh 脚本 (这一步需要安 ...

  2. Add a Parametrized Action 添加带参数的按钮

    In this lesson, you will learn how to add a Parametrized Action. These types of Actions are slightly ...

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

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

  4. 【重学Git】高级命令篇

    1.分离HEAD.HEAD 总是指向当前分支上最近一次提交记录. 所谓分离HEAD,就是让HEAD直接指向某一条具体的提交记录,而不是默认的通过分支名指向当前分支的最近一条提交记录. 2.相对引用^. ...

  5. PostgreSQL 中字段类型varchar

    PostgreSql数据库中varchar类型与sql server中字段用法有差别,PostgreSql中如果字段设置为varchar类型长度为10,则无论存字母.数字或其它符号,长度最大为10个, ...

  6. 读数笔记_python网络编程3(4)

    4.套接字名与DNS 讨论网络地址,描述将主机名解析为原始IP地址的分布式服务 4.1. 主机名与socket 浏览器汇总一般键入域名.有些域名标识整个机构.如,python.org,而另一些指定了主 ...

  7. [Linux] 获取出日志中的邮箱shell

    需求是把所有的日志中邮箱获取出来,根据指定关键字过滤,邮箱的格式是\txxx@xxx\t的格式,日志的存放是按照日期作为目录 #!/bin/bash logBasePath="/data1/ ...

  8. 迁移到MAC

    周末折腾了2天环境,主要是从windows迁移到mac上,提升逼格告别山寨,迈向专业化.首先,终于把pomelo的c客户端在xcode上跑起来了,至此已基本解决了网络连接问题.由于是第一次用mac开发 ...

  9. 华硕飞行堡垒_安装kali后N卡问题

      问题来源: 因业务需要,最近打算安装kali linux操作系统,但是安装完成后开机过一会就会卡死,而且没办法进入用户的登录界面 问题分析: 笔记本电脑信息: 华硕飞行堡垒5 TUF GAMING ...

  10. TensorFlow从1到2(十四)评估器的使用和泰坦尼克号乘客分析

    三种开发模式 使用TensorFlow 2.0完成机器学习一般有三种方式: 使用底层逻辑 这种方式使用Python函数自定义学习模型,把数学公式转化为可执行的程序逻辑.接着在训练循环中,通过tf.Gr ...