妙味茶馆

 找回密码
 注册

QQ登录

只需一步,快速开始

楼主: leo

《妙味2013年新官网制作过程全揭秘》——HTML5+CSS3远程实战班

  [复制链接]
创美易-miaov 发表于 2014-7-22 20:55:25 | 显示全部楼层
老婆 推荐来的,顶一个,leo大大滴好~~~
回复 支持 反对

使用道具 举报

银狐 发表于 2014-7-23 23:16:29 | 显示全部楼层
html hash这样写 data-hash="#student"
是不是js就不用去设置location.hash
回复 支持 反对

使用道具 举报

motao 发表于 2014-7-24 16:12:47 | 显示全部楼层
银狐 发表于 2014-7-23 23:16
html hash这样写 data-hash="#student"
是不是js就不用去设置location.hash

木有啥关系
回复 支持 反对

使用道具 举报

老红头 发表于 2014-7-28 16:49:52 | 显示全部楼层
好好的学习下。
回复 支持 反对

使用道具 举报

koko222 发表于 2014-8-8 10:44:31 | 显示全部楼层
请老师帮我看看,官网首页那个折纸效果
鼠标移入移除,怎么都弄不出来那个效果
请指点。



  1. <!DOCTYPE html PUBdivC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <style>
  6. @-webkit-keyframes two{
  7.         0%
  8.         {
  9.                 -webkit-transform:rotateX(-180deg);
  10.         }       
  11.         40%
  12.         {
  13.                 -webkit-transform:rotateX(30deg);
  14.         }
  15.         60%
  16.         {
  17.                 -webkit-transform:rotateX(-20deg);
  18.         }
  19.         80%
  20.         {
  21.                 -webkit-transform:rotateX(10deg);
  22.         }
  23.         100%
  24.         {
  25.                 -webkit-transform:rotateX(0deg);
  26.         }
  27. }
  28. *{ padding:0; margin:0; divst-style:none;}
  29. #warp { width:302px; margin:auto; position:relative; top:50px; perspective:800px;  }
  30. #zhedie { width:302px;  margin:auto; position:relative; perspective:800px; transition:.3s; }
  31. #zhedie p{ width:300px; height:50px;background:#F03; text-align:center; font:16px/50px "微软雅黑"; color:#fff; position:relative; z-index:2;}
  32. #zhedie div {width:300px; height:40px; position:absolute; background:#39C;top:42px; transform-style:preserve-3d; transform-origin:top; transform:rotateX(-180deg); box-shadow:inset 0 0 40px 30px rgba(0,0,0,1); transition:.5s; }
  33. #zhedie>div { top:50px; }
  34. #zhedie span{ display:block; width:300px; height:40px; text-align:center; font:18px/40px "微软雅黑"; color:white; }

  35. #zhedie .open {-webkit-animation: 2s two; transform:rotateX(0deg); box-shadow:inset 0 0 40px 20px rgba(0,0,0,0);}

  36. #zhedie span:hover { background:#F93; }

  37. </style>
  38. <script src="jquery-1.11.0.min.js"></script>
  39. <script>
  40. $(document).ready(function() {

  41.         var oZhedie=$('#zhedie');
  42.         var aDiv=$('#zhedie div');
  43.         var timer=null;
  44.        
  45.         oZhedie.mousemove(function(e){               
  46.         /*        var i=0;
  47.                 clearInterval(timer);
  48.                 timer=setInterval(function(){
  49.                         aDiv.eq(i).addClass('open');
  50.                         i++;
  51.                         if(i==aDiv.length)
  52.                         {  clearInterval(timer);  }
  53.                 },80);*/
  54. /*                aDiv.eq(aDiv.length-1).css( {'animation':'2s two','box-shadow':'inset 0 0 40px 20px rgba(0,0,0,0)' } );*/
  55.                 var i=0;
  56.                 clearInterval(timer);
  57.                 timer=setInterval(function(){
  58.                         aDiv.eq(i).css( {'animation':'2s two','box-shadow':'inset 0 0 40px 20px rgba(0,0,0,0)' } );
  59.                         i++;
  60.                         if(i==aDiv.length)
  61.                         {  
  62.                                 clearInterval(timer);
  63.                                 aDiv.css( { 'box-shadow':'inset 0 0 40px 20px rgba(0,0,0,0)', 'transform':'rotateX(0deg)' } );
  64.                         }
  65.                 },80);
  66.                
  67.                 var iX=Math.ceil(e.pageX-$(this).offset().left);       
  68.                 var iL=Math.ceil(iX*0.2)-30;       
  69.                 $(this).css('transform','rotateY('+iL+'deg)');
  70.         });
  71.        
  72.         oZhedie.mouseout(function(){
  73.                 $(this).css('transform','rotateY(0deg)');

  74.                 var i=aDiv.length-1;

  75.                 clearInterval(timer);
  76.                         timer=setInterval(function(){
  77.                                 aDiv.eq(i).css( {'animation':'2s two','transform':'rotateX(-180deg)','box-shadow':'inset 0 0 40px 30px rgba(0,0,0,1)' } );
  78.                                 i--;
  79.                                 if(i<0)
  80.                                 {  clearInterval(timer);}
  81.                 },80);

  82.                
  83.         });
  84.        
  85. /*        aDiv.bind('webkitAnimationEnd',function(){
  86.                 aDiv.css( { 'box-shadow':'inset 0 0 40px 20px rgba(0,0,0,0)', 'transform':'rotateX(0deg)' } );
  87.         });*/
  88. });

  89. </script>
  90. <title>无标题文档</title>
  91. </head>

  92. <body>
  93. <!--<input type="button" value="展开" />
  94. <input type="button" value="收缩" />-->
  95. <div id="warp">
  96. <ul id="zhedie">
  97. <p>标题</p>
  98.         <div><span>0</span>
  99.                 <div><span>1</span>
  100.                         <div><span>2</span>
  101.                                 <div><span>3</span>
  102.                                         <div><span>4</span>
  103.                                                 <div><span>5</span>
  104.                                                         <div><span>6</span>
  105.                                                         </div>
  106.                                                 </div>
  107.                                         </div>
  108.                                 </div>
  109.                         </div>
  110.                 </div>
  111.         </div>
  112. </ul>
  113. </div>
  114. </body>
  115. </html>
复制代码



回复 支持 反对

使用道具 举报

motao 发表于 2014-8-8 17:29:06 | 显示全部楼层
koko222 发表于 2014-8-8 10:44
请老师帮我看看,官网首页那个折纸效果
鼠标移入移除,怎么都弄不出来那个效果
请指点。

把 景深 3D 和 transform的前缀都加上
回复 支持 反对

使用道具 举报

素材库 发表于 2014-9-3 08:58:34 | 显示全部楼层
很不错,很好啊
回复 支持 反对

使用道具 举报

a412537370 发表于 2015-1-27 15:05:34 | 显示全部楼层
在看你们的视频   顶一下
回复 支持 反对

使用道具 举报

mvpicy 发表于 2015-3-21 11:35:45 | 显示全部楼层
视频那里有
回复 支持 反对

使用道具 举报

summer-5 发表于 2015-7-13 16:24:30 | 显示全部楼层
这老师讲课怎么老要起范,“这块儿”“那块儿的”,听得人晕乎乎的!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|Archiver|小黑屋|妙味课堂 ( 京ICP备08102442号

GMT+8, 2019-3-22 21:55 , Processed in 0.152303 second(s), 19 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表