HTML+CSS3 中的2D、3D和动画效果

虽然我们我们在前端工作中,对于2D、3D和动画效果一般来说都用不上,基本上都是用JS或jQ来完成这些动画效果,但是最基础的这些你是否已经忘记了呢?

昨天重温了一下这些东西,顺手写了两个小例子

一、使用css画个心

首先 在HTML中定义一个div,

只需要一个div即可,我使用伪元素来画出;

 

通过以上代码我们就得到了一个红红火火的心

HTML+CSS3 中的2D、3D和动画效果_第1张图片

二、使用css画一个太极图,并且加上动画 使它自动旋转

和上面画心形 一样 我依然使用的是伪元素来写的

先定义一个div,取名为 taiji

然后再用伪元素 且看我是如何把它给造出来,话不多说,直接上代码

HTML+CSS3 中的2D、3D和动画效果_第2张图片

你可能感兴趣的:(HTML+CSS3 中的2D、3D和动画效果)