当前位置:主页 > 网页特效 > HTML5+CSS3 >

html5纯css3带自动视频播放的iPhone4手机360度旋转展示

发布时间:2018/06/18 来源:互联网 浏览: 关键词:CSS3 HTML5 
html5纯css3带自动视频播放的iPhone4手机360度旋转展示 html5纯css3带自动视频播放的iPhone4手机360度旋转展示
阿里云

简要教程


这款作品给人的第一感觉是flash做的,但其实不然,它出自css3之手。并且它没有使用任何的图片,看过效果之后是不是觉得非常不可思议?

iPhone手机展示中的视频部分使用的是html5的video,整个手机不论是高光、阴影,还是旋转动画都是使用css3完成。

HTML结构


<divid="scene3D">
  <divid="iphone">
    <divclass="slab black">         
      <divclass="top"></div>
      <divclass="right"></div>
      <divclass="bottom"></div>
      <divclass="left"></div>
      <divid="webcam">
        <divid="flash"></div>
      </div>
      <divid="speaker-front">
        <divclass="dot"></div>
        ...
      </div>
      <divid="screen">
        <videocontrols autoplay muted loopsrc="http://www.htmleaf.com/assist/apple-html5-demo-tron-us_848x352.m4v"width="328.2"height="218"></video>
      </div>
      <divid="home-button">
        <divid="square"></div>
      </div>
      <divclass="front thickness-end"></div>
      <divclass="front thickness"></div>
      <divclass="front"></div>
      <divclass="back"></div>
    </div>
    <divclass="slab">
      <divclass="top">
        <divclass="join"></div>
        <divclass="on-off">
          <divclass="on-off on-off-1"></div>
          ...
        </div>
        <divid="earphone"></div>
        <divid="click"></div>
      </div>
      <divclass="right">
        <divclass="join"></div>
        <divid="sim">
          <divid="hole"></div>
        </div>
      </div>
      <divclass="bottom">
        <divclass="speaker">
          <divclass="dot"></div>
          ...
        </div>
        <divclass="screws">X</div>
        <divid="dock">
          <divid="connector"></div>
        </div>
        <divclass="screws screws-right">X</div>
        <divclass="speaker speaker-right">
          <divclass="dot"></div>
          ...
        </div>
      </div>
      <divclass="left">
        <divid="ringtone">
          <divclass="lock">
            <divclass="lock lock-1"></div>
            ...
          </div>
        </div>
        <divclass="volume">
          <divclass="volume volume-1"></div>
          ...
        </div>
        <divclass="volume volume-less">
          <divclass="volume volume-1"></div>
          ...
        </div>
        <divclass="join"></div>             
      </div>
      <divclass="front"></div>
      <divclass="back"></div>
    </div>
    <divclass="slab black black-back">
      <divclass="top"></div>
      ...
    </div>
  </div>
</div> 

动画部分的css


* {
  -webkit-transform-style:preserve-3d;
  transform-style:preserve-3d;
}
#scene3D { 
  -webkit-perspective:1200px;       
  perspective:1200px; 
}
#iphone {
  width:254px;
  height:500px;
  margin:50pxauto0;
  -webkit-animation: rotateiphone15s infinite linear;
  animation: rotateiphone15s infinite linear;
  /*-webkit-transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);
  transform: rotateX(45deg) rotateY(0deg) rotateZ(45deg);*/
}
@-webkit-keyframes rotateiphone {
  from {
    -webkit-transform:rotateX(45deg )rotateY(0deg ) rotateZ(45deg );
  }
  to {
    -webkit-transform:rotateX(405deg )rotateY(360deg ) rotateZ(405deg );
  }
}
@keyframes rotateiphone {
  from {
    transform:rotateX(45deg )rotateY(0deg ) rotateZ(45deg );
  }
  to {
    transform:rotateX(405deg )rotateY(360deg ) rotateZ(405deg );
  }
}
@-webkit-keyframes reflection {      
  from {
    background-position:300px0,00;
  }
  12%{
    background-position:00,00;
  }
  15%{
    background-position:300px0,00;
  }      
  43%{
    background-position:00,00;
  }
  57%{
    background-position:300px0,00;
  }        
  to {
    background-position:300px0,00;
  }      
}
@keyframes reflection {      
  from {
    background-position:300px0,00;
  }
  12%{
    background-position:00,00;
  }
  15%{
    background-position:300px0,00;
  }      
  43%{
    background-position:00,00;
  }
  57%{
    background-position:300px0,00;
  }        
  to {
    background-position:300px0,00;
  }      
}



共有人阅读,期待你的评论!评论
Top