浙江 杭州

当iphone手机遇上html5和css3玩转360度旋转自动播放展示

系统分类: 网页特效 - html5 - html5模板 2016-05-17

人气18096

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

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

HTML结构

<div id="scene3D">
  <div id="iphone">
    <div class="slab black">          
      <div class="top"></div>
      <div class="right"></div>
      <div class="bottom"></div>
      <div class="left"></div>
      <div id="webcam">
        <div id="flash"></div>
      </div>
      <div id="speaker-front">
        <div class="dot"></div>
        ...
      </div>
      <div id="screen">
        <video controls autoplay muted loop src="http://www.ui3g.com/assist/apple-html5-demo-tron-us_848x352.m4v" width="328.2" height="218"></video>
      </div>
      <div id="home-button">
        <div id="square"></div>
      </div>
      <div class="front thickness-end"></div>
      <div class="front thickness"></div>
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <div class="slab">
      <div class="top">
        <div class="join"></div>
        <div class="on-off">
          <div class="on-off on-off-1"></div>
          ...
        </div>
        <div id="earphone"></div>
        <div id="click"></div>
      </div>
      <div class="right">
        <div class="join"></div>
        <div id="sim">
          <div id="hole"></div>
        </div>
      </div>
      <div class="bottom">
        <div class="speaker">
          <div class="dot"></div>
          ...
        </div>
        <div class="screws">X</div>
        <div id="dock">
          <div id="connector"></div>
        </div>
        <div class="screws screws-right">X</div>
        <div class="speaker speaker-right">
          <div class="dot"></div>
          ...
        </div>
      </div>
      <div class="left">
        <div id="ringtone">
          <div class="lock">
            <div class="lock lock-1"></div>
            ...
          </div>
        </div>
        <div class="volume">
          <div class="volume volume-1"></div>
          ...
        </div>
        <div class="volume volume-less">
          <div class="volume volume-1"></div>
          ...
        </div>
        <div class="join"></div>              
      </div>
      <div class="front"></div>
      <div class="back"></div>
    </div>
    <div class="slab black black-back">
      <div class="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: 50px auto 0;
  -webkit-animation: rotateiphone 15s infinite linear;
  animation: rotateiphone 15s 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: 300px 0, 0 0;
  }
  12% {
    background-position: 0 0, 0 0;
  }
  15% { 
    background-position: 300px 0, 0 0;
  }       
  43% {
    background-position: 0 0, 0 0;
  }
  57% {
    background-position: 300px 0, 0 0;
  }         
  to {
    background-position: 300px 0, 0 0;
  }       
}
@keyframes reflection {       
  from { 
    background-position: 300px 0, 0 0;
  }
  12% {
    background-position: 0 0, 0 0;
  }
  15% { 
    background-position: 300px 0, 0 0;
  }       
  43% {
    background-position: 0 0, 0 0;
  }
  57% {
    background-position: 300px 0, 0 0;
  }         
  to {
    background-position: 300px 0, 0 0;
  }       
}

完整代码请参考下载包中的文件。

查看演示
下载资源:3
下载资源
错误提交:

格式:zip 大小:6.14KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2256.html 非特殊说明,本文版权归原作者所有,转载请注明出处
当iphone手机遇上html5和css3玩转360度旋转自动播放展示

我当前G币余额:0 已下载次数:3

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有1 评论)