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

来源：动视网责编：小采时间：2020-11-27 15:24:35

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

HTML和CSS3中的2D、3D结合实现动画效果:这篇文章给大家介绍的内容是关于HTML和CSS3中的2D、3D结合实现动画效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。虽然我们我们在前端工作中，对于2D、3D动画效果一般来说都用不上，基本上都是用JS或jQ来完成这些动画效果，但是最基础

推荐度：

点击下载本文 文档为doc格式

导读HTML和CSS3中的2D、3D结合实现动画效果:这篇文章给大家介绍的内容是关于HTML和CSS3中的2D、3D结合实现动画效果，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。虽然我们我们在前端工作中，对于2D、3D动画效果一般来说都用不上，基本上都是用JS或jQ来完成这些动画效果，但是最基础

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

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

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

一、使用css画个心

首先在HTML中定义一个div，

<div class="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: 50px 50px 0 0; 
 
 /* 旋转元素，两个一起旋转。等下只需要调动一个即可 */
 transform: rotate(-45deg);
 transform-origin: 0 100%; 
 }
 /* 旋转元素 使它和before伪元素 拼接成一个心 */
 .heart::after{
 left: -100px;
 transform: rotate(45deg);
 transform-origin: 100% 100%;
 }
 </style>

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

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

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

先定义一个div，取名为 taiji

<div id="taiji"></div>

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

<style type="text/css">
 #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);
 }
 
 }
 </style>

效果如下：