php 3d animation,HTML和CSS3中的2D、3D结合实现动画效果

这篇文章给大家介绍的内容是关于HTML和CSS3中的2D、3D结合实现动画效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

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

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

一、使用css画个心

首先 在HTML中定义一个div，

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

/* 基于父级定位 */

.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: 50px 50px 0 0;

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

transform: rotate(-45deg);

transform-origin: 0 100%;

}

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

.heart::after{

left: -100px;

transform: rotate(45deg);

transform-origin: 100% 100%;

}

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

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

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

先定义一个div，取名为 taiji

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

#taiji {

position: relative;

width: 200px;

height: 100px;

background: white;

border-color: black;

border-style: solid;

border-width: 4px 4px 100px 4px;

/*变成圆形*/

border-radius: 50%;

margin: 100px auto;

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

animation: myfirst 4s linear infinite;

}

#taiji::before,

#taiji::after {

content: " ";

position: absolute;

top: 50%;

left: 0;

width: 25px;

height: 25px;

background: white;

border: 38px solid black;

border-radius: 50%;

}

#taiji::after {

left: 50%;

background: black;

border-color: white;

}

/* 定义动画 */

@keyframes myfirst {

0% {

transform: rotate(0deg);

}

100% {

transform: rotate(360deg);

}

}

效果如下：

相关文章推荐：