企业管理系统定制开发只用html+css做出会跳动爱心

企业管理系统定制开发今天分享一个HTML企业管理系统定制开发动画的小技巧，完全用CSS企业管理系统定制开发来画一个会动的爱心。动画效用的就是CSS的动画属性，但是爱心图案并不是图片，而是用CSS拼出来的，这个小技巧还是有令人眼前一亮的感觉。

制作，用到css的动画，有比较难的部分都做了注释

先来看一下最终的动态效果图是怎么样的：

    

下面是代码部分

  HTML部分

  1. 首先在body中建“heart”类，在heart里添加span标签，使用外链CSS样式。
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>炫彩爱心</title>
  8.     <!-- 外链css文件 css代码在后面 -->
  9.     <link rel="stylesheet" href="aixin.css">
  10. </head>
  11. <body>
  12.     <div class="heart">
  13.         <span></span>
  14.         <span></span>
  15.         <span></span>
  16.         <span></span>
  17.         <span></span>
  18.         <span></span>
  19.         <span></span>
  20.         <span></span>
  21.         <span></span>
  22.     </div>
  23. </body>
  24. </html>

css部分 

友情提示复制记得外联！！！

2.在body里设置图形页面的窗口高度，加上渐变，使用-content: center居中对齐。

  1. body{
  2.     margin:0;
  3.     /* 图形在页面窗口的高度 */
  4.     height: 100vh;
  5.     display: flex;
  6.     align-items: center;
  7.     justify-content: center;
  8.     /* 渐变背景图 */
  9.     background:radial-gradient(circle at center,#937bda,#000) ;
  10. }

3.给heart部分增加边框和宽高，在设置display:flex,justify-content: space-betweend的时候，它会把子元素靠边对齐平均分剩余的空间。

  1. .heart{
  2.     width: 280px;
  3.     height: 220px;
  4.     display: flex;
  5.     justify-content: space-between;
  6.     /* border: 1px solid red; */
  7. }

4.给添加边框圆角，加上背景颜色、宽度和高度，用相对定位。然后加上动画效果，播放时间间隔1s，无限次播放 。

  1. .heart span{
  2.     /* 函数方法多次调用的时候好用 */
  3.     --c:plum;
  4.     --h:50%;
  5.     --t:25%;
  6.     background-color: var(--c);
  7.     width: 20px;
  8.     /* 边框圆角 */
  9.     border-radius: 10px;
  10.     position: relative;
  11.     height: var(--h);
  12.     top: var(--t);
  13.     /*  播放间隔1s   无限次播放   infinite */
  14.     animation: beating 1s infinite;
  15. }

5.使用后代选择器，选择需要设置的span标签，修改每个标签里需要的属性，以达到需要的效果，代码如下： 

  1. /* 后代选择器   第一个span和第九个*/
  2. .heart span:nth-child(1),
  3. .heart span:nth-child(9){
  4.   --c:lightcoral;
  5.   --h:80px;
  6.   --t:20px;
  7. }
  8. .heart span:nth-child(2),
  9. .heart span:nth-child(8){
  10.     --c:lightskyblue;
  11.   --h:120px;
  12.   --t:12x;
  13. }
  14. .heart span:nth-child(3),
  15. .heart span:nth-child(7){
  16.     --c:lightgreen;
  17.   --h:160px;
  18.   --t:0px;
  19. }
  20. .heart span:nth-child(4),
  21. .heart span:nth-child(6){
  22.     --c:gold;
  23.   --h:180px;
  24.   --t:16px;
  25. }
  26. .heart span:nth-child(5){
  27.     --c:plum;
  28.     --h:180px;
  29.     --t:32px;
  30. }

6. 给设置完的标签添加动画，0%、30%，60%、70%两个部分，分别设置不同的参数，代码如下图：

  1. @keyframes beating{
  2.     0%,30%{
  3.         height: var(--h);
  4.         top: var(--t);
  5.         background-color: var(--c);
  6.         filter: blur(0);
  7.     }
  8.     60%,70%{
  9.         height: 50%;
  10.         top: 25%;
  11.         background-color: plum;
  12.         /* 模糊 */
  13.         filter: blur(5px);
  14.     }

 以下是完整的CSS代码

  1. body{
  2.     margin:0;
  3.     /* 图形在页面窗口的高度 */
  4.     height: 100vh;
  5.     display: flex;
  6.     align-items: center;
  7.     justify-content: center;
  8.     /* 渐变背景图 */
  9.     background:radial-gradient(circle at center,#937bda,#000) ;
  10. }
  11. .heart{
  12.     width: 280px;
  13.     height: 220px;
  14.     display: flex;
  15.     justify-content: space-between;
  16.     /* border: 1px solid red; */
  17. }
  18. .heart span{
  19.     /* 函数方法多次调用的时候好用 */
  20.     --c:plum;
  21.     --h:50%;
  22.     --t:25%;
  23.     background-color: var(--c);
  24.     width: 20px;
  25.     /* 边框圆角 */
  26.     border-radius: 10px;
  27.     position: relative;
  28.     height: var(--h);
  29.     top: var(--t);
  30.     /*  播放间隔1s   无限次播放   infinite */
  31.     animation: beating 1s infinite;
  32. }
  33. /* 后代选择器   第一个span和第九个*/
  34. .heart span:nth-child(1),
  35. .heart span:nth-child(9){
  36.   --c:lightcoral;
  37.   --h:80px;
  38.   --t:20px;
  39. }
  40. .heart span:nth-child(2),
  41. .heart span:nth-child(8){
  42.     --c:lightskyblue;
  43.   --h:120px;
  44.   --t:12x;
  45. }
  46. .heart span:nth-child(3),
  47. .heart span:nth-child(7){
  48.     --c:lightgreen;
  49.   --h:160px;
  50.   --t:0px;
  51. }
  52. .heart span:nth-child(4),
  53. .heart span:nth-child(6){
  54.     --c:gold;
  55.   --h:180px;
  56.   --t:16px;
  57. }
  58. .heart span:nth-child(5){
  59.     --c:plum;
  60.     --h:180px;
  61.     --t:32px;
  62. }
  63. @keyframes beating{
  64.     0%,30%{
  65.         height: var(--h);
  66.         top: var(--t);
  67.         background-color: var(--c);
  68.         filter: blur(0);
  69.     }
  70.     60%,70%{
  71.         height: 50%;
  72.         top: 25%;
  73.         background-color: plum;
  74.         /* 模糊 */
  75.         filter: blur(5px);
  76.     }
  77. }

上面的代码可以实现一个动态的爱心，不过动态效果并不是无限次重复动的，当打开网页后，爱心大小会收缩和放大， 上面呢就是这个动态效果的代码展示以及画面展示。代码很简单，但是效果却挺好看的。可以发给自己喜欢的人看看。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发