虽然我们在前端工作中一般不使用2D和3D动画效果，但是这些动画效果基本上都是用JS或者jQ来完成的，但是最基础的你忘了吗？

昨天复习了这些东西，写了两个小例子

首先，用css画一个心形

首先，在HTML中定义一个div，

divclass='heart'/div

只需要一个p，我用伪元素画；

风格

/*基于父代的定位*/。heart{

位置：相对；

}

/*用伪元素绘制两幅图像，用图形拼接创建一个心形*/

心脏。之后，

. heart:before{

content :“”；

position:absolute值；

top:100px

left:0

right:0

margin:auto

宽度：50 px；

height:80px

background:red

/*borde-radius有四个值对应四个角，分别对应左上角、右上角、右下角和左下角*/

border-radius :50 px50 px00；

/*旋转元素，两者一起旋转。等等，你只需要转一个*/

transform : rotate(-45度)；

转换-原始：0；

}

/*旋转元素，使其与之前的伪元素拼接成心形*/

在{}之后的. heart 33603 . 33:3366

left :-100 px；

变压器：旋转(45度)；

transform-origin:1000%；

}

/style

通过上面的代码，我们得到了一颗欣欣向荣的心

2345截图20180809143249.png

第二，用css画一个太极图，加上动画让它自动旋转

像上面的心形，我还是用假元素写的

首先，定义一个div，并将其命名为太极

divid='太极'/div

然后使用伪元素，看看我是如何创建的。不多说，我直接编码

styletype='text/css '

#太极{

位置：相对；

宽度width:200px

height:100px

背景：白色；

边框颜色：黑色；

border-style : solid；

border-width :4 px4px 100 px4px；

/*变成圆形*/

边界半径：50%；

margin:100pxauto

/*定义动画名称并以恒定速度无限循环播放*/

animate : myfrist4 linear infinite；

}

# taiji:before之前，

#taiji:after{

content :“”；

position:absolute值；

top :50%；

left:0

width:25px

height:25px

背景：白色；

border:38pxsolidblack

边界半径：50%；

}

#taiji:after{

左侧：50%；

背景：黑色；

边框颜色：白色；

}

/*定义动画*/

@keyframesmyfirst{

0%{

transform : rotate(0 deg)；

}

{

变压器：旋转(360度)；

}

}

/style

本文转载自中文网站