切换风格

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

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

QQ登录

只需一步,快速开始

返回列表 发新帖

[练习与作业] css3第一屏动画练习15

[复制链接]
     
  • TA的每日心情
    开心
    4 小时前
  • 签到天数: 1523 天

    [LV.Master]伴坛终老

    65

    主题

    1965

    帖子

    7万

    积分

    博士

    Rank: 8Rank: 8

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

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

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

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

    118.     //大总管变量
    119.     var c=0;
    120.     //get screen height
    121.     var screen_height=$(window).height();
    122.         $('body').swipeUp(function(){
    123.                 c++;
    124.                 //count screen up height
    125.                 var t=c*-screen_height;
    126.         $('#contain').css('margin-top',t);
    127.         })
    128.         //screen down
    129.         $('body').swipeDown(function(){
    130.                 c--;
    131.                 var t=c*-screen_height;
    132.                 $('#contain').css('margin-top',t);
    133.         })
    134. </script>
    135. </html>
    复制代码
    欢迎大家一起来自学css3,小菜鸟编程群:230998551,一起自学css3交流、讨论。

    发表回复

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

    本版积分规则

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