从零开始前端学习[37]:爱心心跳动画和3d盒子动画效果示例

最新推荐文章于 2023-07-05 17:35:10 发布

^_^ 小小码nong

最新推荐文章于 2023-07-05 17:35:10 发布

阅读量2k

点赞数 4

分类专栏： # 1.从零开始挑战前端文章标签： 3d盒子模型 3d效果动画前端

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_29924041/article/details/78238799

版权

1.从零开始挑战前端专栏收录该内容

57 篇文章 3 订阅

订阅专栏

爱心心跳动画和3d盒子动画效果

爱心心跳动画效果
3d盒子动画效果

提示
博主:章飞_906285288
博客地址:http://blog.csdn.net/qq_29924041
从某机构视频上面看到的，也就写了下来

爱心心跳动画效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    .heart div{width: 200px;height: 200px;position: absolute;}
    .heart{width: 300px;height: 300px;margin: 100px auto;position: relative;transform: rotate(45deg);animation:play 2s infinite alternate;}
    .middle{right: 0;bottom: 0;background: deeppink}
    .left{left: 0;bottom: 0;background: deeppink;border-radius: 50%;overflow: hidden}
    .right{right: 0;top: 0;background: deeppink;border-radius: 50%;overflow: hidden}
    .heart p{position: absolute;left: 188px;top: 188px;font: bold 24px/24px "";transform: rotate(-45deg)}

    /*注意要在动画的时候，可能会导致覆盖，这个时候也是需要去将其进行旋转处理的*/
    @-webkit-keyframes play {
      25%{transform: scale(1.2) rotate(45deg)}
      50%{transform: scale(1.3) rotate(45deg)}
      75%{transform: scale(1.2) rotate(45deg)}
    }

  </style>
</head>
<body>
  <div class="heart">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
      <p>heart</p>
  </div>
</body>
</html>

效果：

这里写图片描述

细节主要分为两个方面：
第一是要画出静态的爱心，然后进行旋转，
第二就是动画效果的设计
注意：动画效果设计的时候，同样要设置其旋转状态

3d盒子动画效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
  <meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
  <meta name="Author" content="作者是谁">       
  <meta name="Keywords" content="关键词">
  <meta name="Description" content="描述和简介">
  <style type="text/css">                                        
        body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
        ul,ol{margin: 0; list-style: none; padding: 0;}
        a{ text-decoration: none; }
        *{ margin: 0; padding: 0; }
    /**大盒子**/
    .main{width: 400px;height: 400px;box-shadow: 0 0 15px 0 green;margin: 200px auto;text-align: center;border: 1px solid transparent;perspective: 800px}
    .main .box{position:relative;width: 200px;height: 200px;margin: 100px auto;transition: 4s;transform-style:preserve-3d;animation: move 4s infinite alternate;}
    .main .box p{position:absolute;width: 200px;height: 200px;color: red;box-shadow: 0 0 15px 0 red;font:bolder 24px/200px ""}
    .main .box p:nth-child(1){left: 0;top: 0;transform: translateZ(100px)}
    .main .box p:nth-child(2){left:-200px;top:0px;transform: translateZ(100px) rotateY(-90deg);transform-origin: right}
    .main .box p:nth-child(3){left:200px;top:0px;transform: translateZ(100px) rotateY(90deg);transform-origin: left}
    .main .box p:nth-child(4){left:0px;top:200px;transform: translateZ(100px) rotateX(-90deg);transform-origin: top}
    .main .box p:nth-child(5){left:0px;top:-200px;transform: translateZ(100px) rotateX(90deg); transform-origin: bottom;animation: big_box_play infinite 4s alternate;}
    .main .box p:nth-child(6){left: 0;top:0;transform: translateZ(-100px)}

    /**小盒子**/
        .main .small_box{position:absolute;width: 100px;height: 100px;transition: 4s;transform-style:preserve-3d;animation: small_box_play 4s infinite alternate;left:calc(50% - 50px);top:calc(50% - 50px)}
        .main .small_box p{position:absolute;width: 100px;height: 100px;color: red;box-shadow: 0 0 15px 0 red;font:bolder 24px/100px "";background: url("")}
        .main .small_box p:nth-child(1){left: 0;top: 0; background: url("img/1.jpg")no-repeat center/cover;transform: translateZ(50px)}
        .main .small_box p:nth-child(2){left:-100px;top:0px; background: url("img/2.jpg")no-repeat center/cover;transform: translateZ(50px) rotateY(-90deg);transform-origin: right}
        .main .small_box p:nth-child(3){left:100px;top:0px; background: url("img/3.jpg")no-repeat center/cover;transform: translateZ(50px) rotateY(90deg);transform-origin: left}
        .main .small_box p:nth-child(4){left:0px;top:100px; background: url("img/4.jpg")no-repeat center/cover;transform: translateZ(50px) rotateX(-90deg);transform-origin: top}
        .main .small_box p:nth-child(5){left:0px;top:-100px; background: url("img/5.jpg")no-repeat center/cover;transform: translateZ(50px) rotateX(90deg); transform-origin: bottom;}
        .main .small_box p:nth-child(6){left: 0;top:0; background: url("img/6.jpg")no-repeat center/cover;transform: translateZ(-50px)}


        @-webkit-keyframes small_box_play {
          to{transform: rotateY(90deg) translateY(-200px)}
        }

        @-webkit-keyframes move {
          to{transform: rotateY(90deg)}
        }
        @-webkit-keyframes big_box_play {
          to{transform: rotateX(0deg) translateZ(100px)}
        }
  </style>
</head>
<body>
  <div class="main">
    <div class="box">
      <p>1</p>
      <p>2</p>
      <p>3</p>
      <p>4</p>
      <p>5</p>
      <p>6</p>
    </div>
    <div class="small_box">
      <p>s_1</p>
      <p>s_2</p>
      <p>s_3</p>
      <p>s_4</p>
      <p>s_5</p>
      <p>s_6</p>
    </div>
  </div>
</body>
</html>

动画效果如下所示、:

这里写图片描述

^_^ 小小码nong

关注

4
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
从零开始前端学习[37]:爱心心跳动画和3d盒子动画效果示例

爱心心跳动画和3d盒子动画效果爱心心跳动画效果3d盒子动画效果提示博主:章飞_906285288 博客地址:http://blog.csdn.net/qq_29924041 从某机构视频上面看到的，也就写了下来爱心心跳动画效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title
复制链接

扫一扫