切换风格

后盾网PHP论坛-php培训论坛-php教程-PHP视频教程-北京PHP培训

  • 咨询热线: 400-682-3231
  • QQ咨询: 联系在线客服老师 联系在线客服老师 联系在线客服老师

QQ登录

只需一步,快速开始

返回列表 发新帖

[练习与作业] css3微场景重复触发练习16

[复制链接]
     
  • TA的每日心情
    奋斗
    昨天 20:17
  • 签到天数: 1470 天

    [LV.10]以坛为家III

    65

    主题

    1892

    帖子

    7万

    积分

    博士

    Rank: 8Rank: 8

    积分
    73405
    活动推广币
    10 个
    后盾币
    73405 个
    注册时间
    2011-5-11
    在线时间
    932 小时
    帖子
    1892
    发表于 2017-7-16 21:14:18 |显示全部楼层 | 阅读模式
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.         <meta charset="UTF-8">
    5.         <title>css3微场景练习</title>
    6. </head>
    7. <body>
    8.         <div id="contain">
    9.                 <div class="box one" style="background-color: dodgerblue;">
    10.             <h1 class="animated zoomInLeft">欢迎进行css3的练习</h1>
    11.            
    12.             <img src="img1/02.gif" class="imgtwo  animated fadeInDown ani" />
    13.             <img src="img1/03.jpg" class="imgthree animated fadeInRight ani" />
    14.             <img src="img1/04.gif" class="imgfour animated fadeInLeft ani" />
    15.             <img src="img1/05.jpg" class="imgfive animated bounceIn ani" />
    16.             <img src="img1/06.jpg" class="imgsix animated bounceInUp ani" />
    17.                 </div>
    18.                 <div class="box" style="background-color: orangered;">第2屏</div>
    19.                 <div class="box" style="background-color: greenyellow;">第3屏</div>
    20.         </div>
    21. </body>
    22. <link rel="stylesheet" type="text/css" href="css1/animate.min.css">
    23. <style type="text/css">
    24.         *{
    25.                 margin:0;
    26.                 padding:0;
    27.         }
    28.         html,body{
    29.                 /* 必须要定义总的百分比 */
    30.                 width:100%;
    31.                 height:100%;
    32.         overflow:hidden;
    33.         }
    34.         #contain{
    35.                 width:100%;
    36.                 height:100%;
    37.                 transition:all 1s;
    38.                 position: relative;
    39.                
    40.         }
    41.         #contain>.box{
    42.         width:100%;
    43.         height:100%;
    44.         }
    45.         #contain .box.one{
    46.                 background:url(./img1/01.gif) no-repeat;
    47.                 background-size:100% 100%;
    48.                 position:relative;
    49.         }
    50.         #contain .box.one h1{
    51.                 width:60%;
    52.                 color:white;
    53.                 background:greenyellow;
    54.                 position:absolute;
    55.                 /* 距离左边一般 如使用子级h1 margin定位,父级.box.one外边框的位置会下移,
    56.                 因父级无边框或内边距。 */
    57.                 left:50%;
    58.                 top:5%;
    59.                 /* 相对于自身宽度运行的一半 */
    60.                 transform:translateX(-50%);
    61.                 line-height:1.5em;
    62.                 font-size:4vw;
    63.                 text-align:center;
    64.             /* 运动延迟 */
    65.                 animation-delay:2s;
    66.                 /* 动画整体效果运动的时间 */
    67.                 animation-duration:2s;

    68.         }
    69.         #contain .box.one .imgtwo{
    70.         /* width:70%;
    71.         position:absolute;
    72.         left:50%;
    73.         top:20%;
    74.         transform:translateX(-50%); */
    75.         width:60%;
    76.         margin-left:20%;
    77.         margin-top:20%;
    78.         animation-duration:0.5s;
    79.         }
    80.         #contain .box.one .imgthree{
    81.                 width:30%;
    82.                 position:absolute;
    83.                 left:0;
    84.                 bottom:0;
    85.         animation-delay: 0.5s;
    86.         animation-duration:1s;
    87.         }
    88.         #contain .box.one .imgfour{
    89.                 width:30%;
    90.                 position:absolute;
    91.                 right:0;
    92.                 bottom:0;
    93.                 animation-delay:1.2s;
    94.                 animation-duration:0.8s;

    95.         }
    96.    #contain .box.one .imgfive{
    97.                 width:30%;
    98.                 position:absolute;
    99.                 left:20%;
    100.                 top:40%;
    101.         animation-delay:2s;
    102.         animation-duration:0.5s;
    103.         }
    104.     #contain .box.one .imgsix{
    105.                 width:30%;
    106.                 position:absolute;
    107.                 left:40%;
    108.                 bottom:30%;
    109.                 animation-delay:2.3s;
    110.                 animation-duration:0.5s;

    111.         }
    112. </style>
    113. <script type="text/javascript" src="js/zepto.min.js"></script>
    114. <script type="text/javascript" src="js/touch.js"></script>
    115. <script type="text/javascript">

    116.     //大总管变量
    117.     var c=0;
    118.     //get screen height
    119.     var screen_height=$(window).height();
    120.         $('body').swipeUp(function(){
    121.                 c++;
    122.         $('#contain .box').eq(c).find('.ani').hide();
    123.                 setTimeout(function(){
    124.                 $('#contain .box').eq(c).find('.ani').show().addClass('animated');
    125.                 },1000);
    126.                 //count screen up height
    127.                 var t=c*-screen_height;
    128.         $('#contain').css('margin-top',t);
    129.         })
    130.         //screen down
    131.         $('body').swipeDown(function(){
    132.                 c--;               
    133.                 //找到索引c里面的运动元素,去掉animated
    134.                 //alert($('contain box').eq(c).find('.ani'));
    135.                 $('#contain .box').eq(c).find('.ani').hide();
    136.                 setTimeout(function(){
    137.                 $('#contain .box').eq(c).find('.ani').show().addClass('animated');
    138.                 },1000);
    139.                 var t=c*-screen_height;
    140.                 $('#contain').css('margin-top',t);
    141.         })
    142. </script>
    143. </html>
    复制代码
    欢迎大家一起来自学css3,小菜鸟编程群:230998551,一起自学css3交流、讨论。

    发表回复

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

    本版积分规则

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