css神奇的不规则图形之跳动的心

一只眼镜猫
52 阅读2分钟

1、效果图

2、实现过程

1、观察及思考

如何使用css画爱心呢？面对不规则图形的爱心相信许多没多少经验的同学可能会束手无策。先别慌，面对不规则的图形我们要学会思考，它是由哪些规则的图形组合而成的呢？

2、分解

  1. 从代码入手，我们先让这颗心暂停跳动。
    注释掉代码：animation: beat 1.5s cubic-bezier(0.075, 0.82, 0.165, 1) .1s infinite （动画样式在这里不做过多赘述）
  2. 通过代码发现实现该图形的代码结构很简单：一个div标签和它的两个伪类。

image.png

  1. 给这个标签和两个伪类分别换上不同的颜色和黑边框：不难发现爱心是由一个旋转45deg的正方形和两个半径相同的圆形组合而成的。

image.png

不信的话把两个圆移动位置看看效果。

image.png

3、实现正方形

平平无奇的正方形实现方式很简单。设置长宽相等的矩形，填充颜色即可。 实现旋转的话需要借助transform的rotate即可。

transform: rotate();——必须是块元素
（1）以x、y、z轴进行旋转，默认是z轴；
（2）rotateX（）、rotateY（）、rotateZ（）
（3）（）内的值单位是：deg角度 比如：transform: rotate(45deg);顺时针 transform: rotate(-45deg);逆时针

4、实现圆形

  1. 圆形是由正方形转换而来的。
    实现圆形的方法更不必说。首先我们要先画一个正方形，其次是关键步骤，给该正方形设置border-radius。radius英文解释是弧度的意思即圆角，它可以使得我们的边框有棱有角。
    border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性。

//语法：
border-radius: border-top-left-radius 
               border-top-right-radius 
               border-bottom-right-radius 
               border-bottom-left-radius;
  1. 实现原理：
    设置DIV宽度和高度一致(正方形)，然后四个角设置为高度或者宽度的1/2。
.circle{
     width: 100px;
    height: 100px;
    border-radius: 50%;
}

  1. 实现爱心的重点：
    正方形的尺寸和圆形的尺寸相等！

  2. 举一反三（制作半圆的方法）：
    元素的高度是宽度的一半，左上角和右上角的半径元素的高度一致（大于高度也是可以的，至少为height值）。

.circle{
     width:100px;
    height:50px;//高度是宽度的一半
    border-radius:50px 50px 0 0;//左上和右上至少为height值
}

5、完成

“零件”准备好了，现在拼合就可以了。使用position:relative/bsolute给它们放置到合适的位置，填充相同的颜色再加上合适的动画即可啦~

image.png

3、总结：

我们要有一双善于发现的眼睛，学会把复杂的东西简单化，这样遇到问题就会迎刃而解可~

边学习边整理，如有问题欢迎指正，大家一起加油！侵删~

avatar
文章
阅读
粉丝