html5制作3D袜子飘动动画

2019-09-10 郑州网站建设  

<!DOCTYPE html>

<html >

<head>

  <meta charset="UTF-8">

 

  <title>html5制作3D袜子飘动动画</title>

<meta name="keywords" content="3D袜子飘动动画" />

<meta name="description" content="3D袜子飘动动画" />

 

      <link rel="stylesheet" href=http://www.divcss5.com/html5/"css/style.css">

 

 

</head>

 

<body>

  <div id="container">

         <div id="floor"></div>

 

         <div id="crown"></div>

 

</div>

<script src='http://www.5iweb.com.cn/statics/js/jquery.1.7.1.min.js'></script>

<script src='http://www.divcss5.com/html5/js/TweenMax.min.js'></script>

 

      <script src=http://www.divcss5.com/html5/"js/index.js"></script>

 

</body>

</html>

Css部分:

#container{

                   -webkit-perspective: 1400px;

                   -webkit-transform-style: preserve-3d;

}

#floor{

         position: absolute;

         width:1296px;

         height:864px;

         background: url('http://f.cl.ly/items/2K1J3K2F3P2G2v0P261j/allegiance.jpg') no-repeat;

         background-size: 100% 100%;

top:00px;

        

}

 

 

 

.modal{

position: absolute;

}

#modal1{

width:676px; height:278px; /* retina */

left: 285px;

top:70px;

    background-image: url("");

    background-size: cover;

    overflow: visible;

 

}

#modal1dark{

width:676px; height:278px; /* retina */

left: 50%;

margin-left: -318px;

top:160px;

    background-image: url("");

    background-size: cover;

    overflow: visible;

    opacity:0;

 

}

#modal1light{

width:676px; height:278px; /* retina */

left: 50%;

margin-left: -318px;

top:160px;

    background-image: url("");

    background-size: cover;

    overflow: visible;

 

}

.modalSlice{

z-index: -2;

content:"";

         overflow: visible;

         position: absolute;

 

}

.darkSlice{

z-index: -1;

content:"";

         overflow: visible;

         position: absolute;

         opacity:0;

 

}

.modalMom{

         position: absolute;

         top:0px;

         z-index: 100;

         height:300px;

         -webkit-transform-style: preserve-3d;

         -moz-transform-style: preserve-3d;


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1879.html转载请标明出处,谢谢合作!
标签:
  • HTML
  • Doctype
  • !
  • he
  • html53D