C语言学习网

怎么用css实现3d动画特效

发表于:2022-08-12 作者:安全数据网编辑
编辑最后更新 2022年08月12日,小编给大家分享一下怎么用css实现3d动画特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!属性perspective:透

小编给大家分享一下怎么用css实现3d动画特效,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  属性

  perspective:透距离,单位像素(值越小,透视距离越近,效果越明显):设置父元素上

  perspective-origin:设置透视点的位置

  transform-style:指定某元素的子元素是位于三维空间内,取值:flat|preserve-3d

  1.1.1思路

  (1)有三个p,一起放到一个盒子里面。

  

  

  

  

  

  

  

  (2)为其盒子设置样式

  .cube{

  width:200px;

  height:300px;

  transform-style:preserve-3d;

  margin:100pxauto;

  position:relative;

  transform:rotateX(30deg);

  border-radius:50%;

  padding:60px;

  }

  (3)为其每个p设置样式

  .mian{

  width:200px;

  height:300px;

  background-image:url(1.jpg);

  background-position:400px0;

  position:absolute;

  background:url(aka.jpg);

  border:1pxsolid#ccc;

  transition:2s;

  }

  /*.mian1:hover{

  transform-origin:right;

  transform:rotateY(-60deg);

  }*/

  .mian1{

  transform-origin:right;

  transform:translateX(-200px)rotateY(45deg);

  background-position:00;

  }

  .mian2{

  background-position:400px0;

  }

  .mian3{

  transform-origin:left;

  transform:translateX(200px)rotateY(45deg);

  background-position:200px0;

  }

  (4)为其设置动画

  .mian3:hover{

  transform:translateX(200px)rotateY(0deg);

  }

  .mian1:hover{

  transform:translateX(-200px)rotateY(0deg);

  }

  1.1.1源码:

  

  

  

  

  

  

  书页

  

  

  

  

  

  

  

  

  

  

  

  

  1.1.2

  2094583391-5b70f66722968_articlex.gif

  1.1.2思路:

  (1)有五个p,分别放上五个字。

  

  

  

  

  

  

  

  (2)给box和p总体设置样式

  #box{

  margin:100pxauto;

  font-size:100px;

  color:#005aa0;

  text-align:center;

  }

  .ze1,.ze2,.ze3,.ze4,.ze5{

  display:inline-block;

  width:90px;

  height:100%;

  position:relative;

  }

  (3)设置伪元素before和after

  .ze1:before,.ze2:before,.ze3:before,.ze4:before,.ze5:before{

  content:attr(data);

  position:absolute;

  color:#ffffff;

  top:0;

  left:2px;

  transform-origin:left;

  transition:transform.5s;

  }

  .ze1:before{

  content:"前";

  }

  .ze2:before{

  content:"端";

  }

  .ze3:before{

  content:"小";

  }

  .ze4:before{

  content:"学";

  }

  .ze5:before{

  content:"生";

  }

  .ze1:after,.ze2:after,.ze3:after,.ze4:after,.ze5:after{

  position:absolute;

  color:#b3b3b3;

  top:3px;

  left:10px;

  z-index:-1;

  transform-origin:left;

  transition:transform.5s;

  }

  .ze1:after{

  content:"前";

  }

  .ze2:after{

  content:"端";

  }

  .ze3:after{

  content:"小";

  }

  .ze4:after{

  content:"学";

  }

  .ze5:after{

  content:"生";

  }

  (4)为其设置动画

  .ze1:hover:before,.ze2:hover:before,.ze3:hover:before,.ze4:hover:before,.ze5:hover:before{

  transform:rotateY(-40deg)skewY(10deg);

  }

  .ze1:hover:after,.ze2:hover:after,.ze3:hover:after,.ze4:hover:after,.ze5:hover:after{

  transform:rotateY(40deg)skewY(10deg);

  }

  1.1.2源码:

  

  

  

  

  动态字

  

  

  

  

  

  

  

  

  

  

  

  

  1.1.3思路不写,只写源码

  1.1.3源码:

  

  

  

  

  

  

  3d动画

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  .ak.sj2{

  width:10px;

  height:10px;

  margin-top:5px;

  background:#fff;

  border-radius:5px;

  }

  @keyframesmi{

  0%{

  transform:rotate(0deg)

  }

  100%{

  transform:rotate(720deg)

  }

  }

  @keyframesol{

  0%{

  transform:rotate(0deg)

  }

  100%{

  transform:rotate(720deg)

  }

  }

  .mian{

  width:240px;

  height:240px;

  border:1pxsolid#ccc;

  position:absolute;

  border-radius:120px;

  top:195px;

  left:575px;

  animation:af5sinfinitelinear;

  }

  .mian.ap{

  width:10px;

  height:10px;

  border-radius:5px;

  background:#f0f;

  margin:30px0030px;

  }

  @keyframesaf{

  0%{

  transform:rotate(0deg)

  }

  100%{

  transform:rotate(720deg)

  }

  }

  .chen{

  width:160px;

  height:160px;

  border:1pxsolid#ccc;

  position:absolute;

  border-radius:80px;

  top:235px;

  left:615px;

  animation:oa4sinfinitelinear;

  }

  .ze{

  width:10px;

  height:10px;

  border-radius:5px;

  background:#0c0;

  margin:20px0015px;

  }

  @keyframesoa{

  0%{

  transform:rotate(0deg)

  }

  100%{

  transform:rotate(720deg)

  }

  }

  .yu{

  width:80px;

  height:80px;

  background-color:darkorange;

  border-radius:40px;

  position:absolute;

  top:275px;

  left:655px;

  opacity:.7;

  }

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  

  


以上是"怎么用css实现3d动画特效"这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!

0