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 ...
随机推荐
- 我来告诉你:VS2019开发ASP.NET Core 3.0 Web项目,修改视图后,刷新浏览器看不到修改后的效果怎么处理
VisualStudio2019下一个2.2另一个3.0页面修改如下,但是3.0刷新没有任何变化,难道VS以后不能做前端开发了?大家可能没有看官方文档 根据文章所说你需要: 1.安装 Microsof ...
- 解决vscode中golang插件依赖安装失败问题
vscode中安装ms-vscode.go插件后可以开启对go语言的支持,ms-vscode.go插件需要依赖一些工具,安装完成后提示 gocode go-outline go-symbols gur ...
- js写个小时钟
原生js写个小时钟 一.代码 今天美化博客园自学的哈,分享一下 <!--标题变成时钟--> <div id="Header1_HeaderTitle">&l ...
- 松软科技带你学前端:JavaScript 输出
JavaScript 不提供任何内建的打印或显示函数. JavaScript 显示方案 JavaScript 能够以不同方式“显示”数据: 使用 window.alert() 写入警告框 使用 doc ...
- 用html,CSS 写一个静态的博客网页
<!doctype html> <html> <br/><br/><br/> <head> <meta http-equi ...
- Beyond Compare 4.X 破解方法(亲测有效)
Windows下Beyond Compare 4 30天评估到期了的话,可以尝试下面两种方式: 破解方式把Beyond Compare 4安装文件夹下面的BCUnrar.dll文件删掉就行了,但是这种 ...
- easyUI+servlet+mysql项目总结
项目介绍 利用easyUI做前端框架,进行数据展示和用户数据收集 使用servlet做后端的控制层,并调用业务逻辑组件的业务逻辑方法,处理用户请求,根据不同处理结果返回不同的结果到前端 mysql进行 ...
- linux相关(一)
一.调整xshell终端显示的最大行数 1.文件 -> 属性 -> 终端,如下图 2.调整缓冲区大小的行数,确定即可,如下图: 注意:此方法只是修改了连接该主机时的显示行数,其他主机的还是 ...
- python接口自动化根据请求接口类型进行封装
根据不同的请求类型(GET/POST)进行接口请求封装 import requests import json class RunMain: def __init__(self, url, metho ...
- 【Oracle】SQL的一些关键字
1. distinct 关键词 DISTINCT 用于返回唯一不同的值: 只可以在select中使用: 既可以对一列,也可以对多列使用: distinct对NULL是不进行过滤的,即返回的结果中是包含 ...