在页面中放置一个类名为container的层作为盛放心心的容器，在该层中再定义一个名为heart的子层，HTML代码描述如下：

<div class="container">

<div class="heart"></div>

</div>

分别为container和heart定义CSS样式规则如下：

.container

{

margin: 0 auto;

width: 300px;

height:300px;

position: relative;

display:flex;

justify-content:center;

align-items:center;

background-image: radial-gradient(#FFC0CB, #FF8888);

border: 4px solid rgba(255, 0, 0, 0.9);

border-radius: 10%;

}

.heart

{

width: 100px;

height: 100px;

background-color: #FF6347;

position: relative;

animation:beat .6s infinite ease-in;

}

.heart:before, .heart:after

{

content:"";

position: absolute;

width: 100px;

height: 100px;

background-color: #FF6347;

border-radius: 50%;

}

.heart:before

{

left: 50px;

}

.heart:after

{

top: -50px;

}

在CSS样式的作用下，这2个层在浏览器中显示如图1所示，其中心心由三个部分构成：一个高度和宽度均为100px的正方形（由.heart样式规则决定）、正方形右边拼接的一个半圆（由.heart:before样式规则决定）和正方形上边拼接的一个半圆（由.heart:after样式规则决定）。

图1  一颗心心

若将上面的CSS属性设置中“left: 50px;”改成“left: -50px;”，“top: -50px;”改成“top: 50px;”，则显示如图2所示的心心。

图2  另一颗心心

若将图1的心心逆时针旋转45°，即在.heart样式定义中加上语句“transform:rotate(-45deg);”，则显示如图3所示的心心。

图3  正放的心心

现为图3所示的心心添加动画效果，编写的完整HTML文件如下。

<!DOCTYPE html>

<html>

<head>

<title>躁动的心</title>

<style>

  .container

  {

     margin: 0 auto;

     width: 300px;

     height:300px;

     position: relative;

     display:flex;

     justify-content:center;

     align-items:center;

     background-image: radial-gradient(#FFC0CB, #FF8888);

     border: 4px solid rgba(255, 0, 0, 0.9);

     border-radius: 10%;

   }

   .heart

   {

      width: 100px;

      height: 100px;

      background-color:    #FF6347;

      position: relative;

      animation: beat 0.6s infinite;

   }

    .heart:before, .heart:after

   {

      content:"";

      position: absolute;

      width: 100px;

      height: 100px;

      background-color: #FF6347;

      border-radius: 50%;

   }

   .heart:before

   {

      left: 50px;

   }

   .heart:after

   {

      top: -50px;

   }

   @keyframes beat

   {

      0%    { transform:scale(1) rotate(-45deg); }

      40%   { transform:scale(1.1) rotate(-45deg); }

      55%   { transform:scale(1.3) rotate(-30deg); }

      70%   { transform:scale(1.1) rotate(-45deg);  }

      85%   { transform:scale(1.3) rotate(-60deg); }

      100%  { transform:scale(1) rotate(-45deg); }

   }

</style>

</head>

<body>

<div class="container">

  <div class="heart"></div>

</div>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图4所示的动画效果。

图4  一颗躁动的心

图4中动画效果在放大过程中旋转角度还有所变化，因此心心显得躁动不安。若保持旋转角度-45deg不变，只让心心放大缩小，改写关键帧定义为：

@keyframes beat

{

0%    { transform:scale(1) rotate(-45deg);}

50%   { transform:scale(1.8) rotate(-45deg); }

100%  { transform:scale(1) rotate(-45deg) ; }

}

则呈现的动画效果如图5所示。

图5  心心放大后缩小

有了前面的基础，下面我们在容器中放4颗心心（在container层中定义4个子层），每颗心心的大小和背景色均不同（事先通过定义变量—scale和—color的方式确定）。

编写HTML文件内容如下。

<!DOCTYPE html>

<html>

<head>

<title>躁动的心</title>

<style>

  .container

  {

     margin: 0 auto;

     width: 300px;

     height:300px;

     position: relative;

     overflow: hidden;

     display:flex;

     justify-content:center;

     align-items:center;

     background-image:  radial-gradient(circle, #000, transparent);

     border: 4px solid rgba(255, 0, 0, 0.9);

     border-radius: 10%;

   }

   .heart:nth-child(1n+0)

   {

      width: 100px;

      height: 100px;

      opacity: 0.5;

      position: absolute;

      background: var(--color);

      transform:scale(var(--scale)) rotate(-45deg);

   }

   .heart:nth-child(1n+0):before, .heart:nth-child(1n+0):after

   {

      content:"";

      position: absolute;

      width: 100px;

      height: 100px;

      border-radius: 50%;

      background: var(--color);

   }

   .heart:nth-child(1n+0):before

   {

      left: 50px;

   }

   .heart:nth-child(1n+0):after

   {

      top: -50px;

   }

</style>

</head>

<body>

<div class="container">

    <div class="heart" style="--scale: 1.8;--color:#6f3"></div>

    <div class="heart" style="--scale: 1.4;--color:#93f"></div>

    <div class="heart" style="--scale: 1;--color:#f0f"></div>

    <div class="heart" style="--scale: 0.6;--color:#ff6"></div>

</div>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以显示如图6所示的图案。

图6  心中有心

为这4颗心设置放大动画效果，编写动画关键帧定义并加入CSS样式规则定义如下：

.heart:nth-child(1)

{

animation: beat 5s infinite -3s linear;

}

.heart:nth-child(2)

{

animation: beat 5s infinite -2s linear;

}

.heart:nth-child(3)

{

animation: beat 5s infinite -1s linear;

}

.heart:nth-child(4)

{

animation: beat 5s infinite linear;

}

@keyframes beat

{

0%    { transform:scale(0.6) rotate(-45deg);}

20%   { transform:scale(1) rotate(-45deg); }

40%  { transform:scale(1.4) rotate(-45deg) ; }

60%    { transform:scale(1.8) rotate(-45deg);}

80%   { transform:scale(2.4) rotate(-45deg); }

81%   { transform:scale(0.2) rotate(-45deg); }

100%  { transform:scale(0.6) rotate(-45deg) ; }

}

此时，在浏览器中呈现出如图7所示的效果。

图7  逐个放大的心心

CSS动画实例：一颗躁动的心的更多相关文章

  1. CSS动画实例

    上一篇讲过css动画transform transition的语法,这一节展示自己做的几个小例子加深印象 1. 线条动画效果 代码:最外层div包含2个小的div : a和b.   a有左右边框(高度 ...

  2. CSS动画实例：太极图在旋转

    利用CSS可以构造出图形,然后可以对构造的图形添加动画效果.下面我们通过旋转的太极图.放大的五角星.跳“双人舞”的弯月等实例来体会纯CSS实现动画的方法. 1．旋转的太极图 设页面中有<div ...

  3. CSS动画实例：移动的眼珠子

    适当地利用CSS的box-shadow可以构造图形,然后可以对构造的图形添加动画效果.下面我们通过移动的眼珠子.圆珠一二三.一分为四.四小圆旋转扩散等实例来体会box-shadow属性在动画制作中的使 ...

  4. CSS动画实例：小圆球的海洋

    CSS背景属性用于定义HTML元素的背景,在CSS提供的背景属性中, background-image:指定要使用的一个或多个背景图像: background-color:指定要使用的背景颜色: ba ...

  5. CSS动画实例：行星和卫星

    设页面中有<div class=" planet "></div>,用来绘制一个行星和卫星图形.这个图形包括三部分:行星.卫星和卫星旋转的轨道.定义. pl ...

  6. CSS动画实例：旋转的圆角正方形

    在页面中放置一个类名为container的层作为效果呈现容器,在该层中再定义十个名为shape的层层嵌套的子层,HTML代码描述如下: <div class="container&qu ...

  7. CSS动画实例：跳跃的字符

    1．翻转的字符 在页面中放置一个类名为container的层作为容器,在该层中放置5个字符区域,HTML代码描述如下: <div class="container"> ...

  8. CSS动画实例：Loading加载动画效果（三）

    3．小圆型Loading 这类Loading动画的基本思想是:在呈现容器中定义1个或多个子层,再对每个子层进行样式定义,使得其均显示为一个实心圆形,最后编写关键帧动画控制,使得各个实心圆或者大小发生改 ...

  9. CSS动画实例：升空的气球

    1．制作一个气球 设页面中有<div class="balloon"></div>,为. balloon设置样式规则如下: .balloon { heigh ...

随机推荐

  1. Mysql报Too many connections，不要乱用ulimit了，看看如何正确修改进程的最大文件数

    背景 今天在学习mysql时,看到一个案例,大体来说,就是客户端报Too many connections.但是,客户端的连接池,限制为了200,两个客户端java进程,那也才400,然后mysql配 ...

  2. echarts 实战 : 怎么处理特殊的图表数字 label ？

    所谓Label,就是在图表上面显示的那个数字. 但有的时候我们需要柱状图堆叠. 那如果我们需要所有数字都在外面,并且以 320/210/310/410/1320 这样的形式显示呢? 那么 echart ...

  3. scratch编程体感游戏

    体感游戏有很多种,最常见的就是摄像头和声控了,今天我们要用scratch编写一系列的体感游戏!!!是不是很激动呢? 首先我们来编摄像头类的: No.1拳头打幽灵 挥动头就能打到幽灵了哟! 具体程序如下 ...

  4. element-ui设置级联选择器表单验证

    data(){<el-form :model="ruleForm" :rules="rules" ref="ruleForm" lab ...

  5. 循序渐进nginx(二)：反向代理、负载均衡、缓存服务、静态资源访问

    目录 反向代理 使用 1.创建代理目标服务端: 2.配置nginx反向代理目标服务端: 3.测试使用: 负载均衡 使用 1.准备服务端 2.修改nginx配置 3.测试 负载均衡策略 负载均衡的额外参 ...

  6. css的一些小技巧。修改input样式

    在第一次正式写项目的时候,遇到了几个布局的小技巧.记录一下. 我们常常会遇到图片和文字对齐的一种样式.比如 这样的样式,我们写的时候有时候会出现不对齐的情况.我们有俩种方法 一种就是flex的布局,还 ...

  7. 基于jqgrid + ashx + nhibernate的分页

    因为我目前运维的是一个webform项目,项目中未用到分页的功能,我百度了很多文章也没有一篇是结合jqgrid + ashx + nhibernate的分页,可能是因为后台要请求ashx的原因,不像m ...

  8. 全栈的自我修养: 0005 Java 包扫描实现和应用(Jar篇)

    全栈的自我修养: 0005 Java 包扫描实现和应用(Jar篇) It's not the altitude, it's the attitude. 决定一切的不是高度而是态度. Table of ...

  9. Java基础篇(03)：流程控制语句，和算法应用

    本文源码:GitHub·点这里 || GitEE·点这里 一.分支语句 流程控制语句对任何一门编程语言都是非常重要的,Java中基于流程控制程序执行的不同步骤和代码块. 1.IF条件 IF条件语句会根 ...

  10. 高度塌陷与BFC

    高度塌陷的产生条件 子元素浮动,脱离文档流 子元素绝对定位或固定定位,脱离文档流 定位产生的高度塌陷只能通过加固定高度或更换其他方案解决塌陷,本文主要讨论浮动产生塌陷的解决方法. 高度塌陷的解决方法 ...