当前位置:   article > 正文

html+css制作3D七夕表白旋转相册特效_animation: go 45s linear infinite;

animation: go 45s linear infinite;

一个温暖的拥抱,一句轻声的问候,一个暖心的笑容,一双坚实的双手,让我们日久天长,健健康康,快乐每一天!祝你们七夕快乐!一个基于html+css制作简易的3D七夕表白旋转相册特效,就当送给你们当作七夕表白的礼物吧!记得送给自己喜欢的人,嘿嘿嘿。

一、3D七夕表白旋转相册特效效果图

在这里插入图片描述

二、页面背景设置

   *{
       padding:0px;
       margin:0px;
   }
  • 1
  • 2
  • 3
  • 4

高度设置成100%,具体高度以自身所需为准

   body{
       height:100%;
   }
   
  • 1
  • 2
  • 3
  • 4

/* background-size:100% 100%;按容器比列撑满,图片变形 */

  body{
     /*  background-size:100% 100%;按容器比列撑满,图片变形 */
    background-image:url("images/3.png") 
    /* background-size:100% 100%; */
   }
  • 1
  • 2
  • 3
  • 4
  • 5
   #box{
       width:280px;
       height:400px;
   }
  • 1
  • 2
  • 3
  • 4

/*生成绝对定位的元素 */

   position:fixed;
   left:0px;
   right:0px;
   top:0;
   bottom:0px;
  • 1
  • 2
  • 3
  • 4
  • 5

/* 元素水平居中 */

margin:auto;
  • 1

/*指定嵌套元素,在3D空间中呈现 */

transform-style:preserve-3d;
  • 1

/* 设置X,Y的旋转点 */

   transform:rotateX(0deg) rotateY(0deg);
  • 1
   /* 动画时长:   45s infinite 循环播放 每45s默认循环播放一次  
   infinite 循环播放     linear 默认循环一次 */
  • 1
  • 2

三、animation属性的作用

animation:简易属性,用于设置六个动画属性
在这里先打三个???,后面我们会用到它,嘿嘿嘿

  animation: go 45s linear infinite; 
  • 1
   #box img{
       width:280px;
       height:400px;
       /*绝对定位 */
       position:absolute;
       left:0px;
       top:0px;
   }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

在这里插入图片描述
在这里插入图片描述

让图片向外推出,使用translateZ(650px);
rotateY(0deg):以Y轴0度为盒子的旋转中心点(如上图演示)

   #box img:nth-child(1){
       transform:rotateY(0deg) translateZ(650px);
   }

   #box img:nth-child(2){
       transform:rotateY(36deg) translateZ(650px);
   }
   #box img:nth-child(3){
       transform:rotateY(72deg) translateZ(650px);
   }
   #box img:nth-child(4){
       transform:rotateY(108deg) translateZ(650px);
   }
   #box img:nth-child(5){
       transform:rotateY(144deg) translateZ(650px);
   }
   #box img:nth-child(6){
       transform:rotateY(216deg) translateZ(650px);
   }
   #box img:nth-child(7){
       transform:rotateY(288deg) translateZ(650px);
   }
   #box img:nth-child(8){
       transform:rotateY(324deg) translateZ(650px);
   }
  • 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

四、什么是 @keyframes属性

@keyframes :定义一个动画,并定义具体的动画效果,如,放大或者位移等等
@keyframes go:以百分比:来规定改变发生的时间
@keyframes它定义的动画并不能直接执行,需要借助animation来运转
百分比是指动画完成一遍的时间长度的百分比,
0%是动画的开始时间,50%是动画完成一半的时间,100%动画是动画的结束时间

   @keyframes go{
       0%{
           transform:rotateX(0deg) rotateY(0deg);
       }
       25%{
           transform:rotateX(20deg) rotateY(180deg);
       }
       50%{
           transform:rotateX(0deg) rotateY(360deg);
       }
       75%{
           transform:rotateX(0deg) rotateY(540deg);
       }
       100%{
           transform:rotateX(0deg) rotateY(720deg);
       }
   }
</style>
<body>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

五、放置图片的容器

<-- 放置图片的容器–>

    <div id="box">
    <img src="images/1.png"alt="">
    <img src="images/2.png"alt="">
    <img src="images/3.png"alt="">  
    <img src="images/4.png"alt="">
    <img src="images/5.png"alt="">
    <img src="images/6.png"alt="">
    <img src="images/7.png"alt="">
    <img src="images/8.png"alt="">
    </div>
</body>
</html>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

在这里插入图片描述

六、视频演示

演示视频中运用一些特效素材,发送对方的时候可以充充门面,它不香吗?
最后祝天下有情人终成眷属,今生只愿温柔的懂你,细腻的疼你,热烈的爱你。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/花生_TL007/article/detail/127340
推荐阅读
相关标签
  

闽ICP备14008679号