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


本文摘自PHP中文网,作者不言,侵删。

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

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

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

一、使用css画个心

首先 在HTML中定义一个div,

1

<div class="heart"></div>

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

<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>

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

2345截图20180809143249.png

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

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

先定义一个div,取名为 taiji

1

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

<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>

效果如下:

2345截图20180809143452.png

相关文章推荐:

如何使用纯CSS实现一头绿猪的效果

css怎么实现图片放大?(酷炫特效示例)

以上就是HTML和CSS3中的2D、3D结合实现动画效果的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

Html如何实现网页跳转

css中伪类和伪元素的详细介绍(代码示例)

Html的注释标记是什么

css3的default伪类选择器使用详解

Html中的段落文本如何换行?一篇文章告诉你换行标签br的用法

前端javascript写excel的代码示例

Html里空格应该如何使用

Html的i标签有什么作用

Html实现点击直接下载文件

Html small标签的如何使用?Html small标签的用法总结

更多相关阅读请进入《Html》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...