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

 

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

 

　　一、使用css画个心

 

　　首先在HTML中定义一个div，

 

　　<divclass="heart"></div>

 

　　只需要一个p即可，我使用伪元素来画出；

 

　　

 

　　

 

　　<style>

 

　　/*基于父级定位*/

 

　　.heart{

 

　　position:relative;

 

　　}

 

　　/*使用伪元素画出两个图像,使用图形拼接来造出一个心*/

 

　　.heart::after,

 

　　.heart::before{

 

　　content:"";

 

　　position:absolute;

 

　　top:100px;

 

　　left:0;

 

　　right:0;

 

　　margin:auto;

 

　　width:50px;

 

　　height:80px;

 

　　background:red;

 

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

 

　　border-radius:50px50px00;

 

　　/*旋转元素，两个一起旋转。等下只需要调动一个即可*/

 

　　transform:rotate(-45deg);

 

　　transform-origin:0100%;

 

　　}

 

　　/*旋转元素使它和before伪元素拼接成一个心*/

 

　　.heart::after{

 

　　left:-100px;

 

　　transform:rotate(45deg);

 

　　transform-origin:100%100%;

 

　　}

 

　　</style>

 

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

 

　　2345截图20180809143249.png

 

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

 

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

 

　　先定义一个div，取名为taiji

 

　　<divid="taiji"></div>

 

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

 

　　

 

　　

 

　　

 

　　<styletype="text/css">

 

　　#taiji{

 

　　position:relative;

 

　　width:200px;

 

　　height:100px;

 

　　background:white;

 

　　border-color:black;

 

　　border-style:solid;

 

　　border-width:4px4px100px4px;

 

　　/*变成圆形*/

 

　　border-radius:50%;

 

　　margin:100pxauto;

 

　　/*定义动画名称时长匀速无限循环播放*/

 

　　animation:myfirst4slinearinfinite;

 

　　}

 

　　#taiji::before,

 

　　#taiji::after{

 

　　content:"";

 

　　position:absolute;

 

　　top:50%;

 

　　left:0;

 

　　width:25px;

 

　　height:25px;

 

　　background:white;

 

　　border:38pxsolidblack;

 

　　border-radius:50%;

 

　　}

 

　　#taiji::after{

 

　　left:50%;

 

　　background:black;

 

　　border-color:white;

 

　　}

 

　　/*定义动画*/

 

　　@keyframesmyfirst{

 

　　0%{

 

　　transform:rotate(0deg);

 

　　}

 

　　100%{

 

　　transform:rotate(360deg);

 

　　}

 

　　}

 

　　</style>






本文转载自中文网