切换风格

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

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

QQ登录

只需一步,快速开始

返回列表 发新帖

[练习与作业] css3微场景练习12

[复制链接]
     
  • TA的每日心情
    开心
    昨天 14:48
  • 签到天数: 1411 天

    [LV.10]以坛为家III

    64

    主题

    1810

    帖子

    7万

    积分

    博士

    Rank: 8Rank: 8

    积分
    70989
    活动推广币
    10 个
    后盾币
    70989 个
    注册时间
    2011-5-11
    在线时间
    885 小时
    帖子
    1810
    发表于 2017-7-9 18:18:47 |显示全部楼层 | 阅读模式
    本帖最后由 yumeiren456 于 2017-7-9 18:21 编辑
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="utf-8">
    5.     <title>Swiper css3微场景练习</title>
    6.     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

    7.     <!-- Link Swiper's CSS -->
    8.     <link rel="stylesheet" href="css/swiper.min.css">

    9.     <!-- Demo styles -->
    10.     <link rel="stylesheet" href="css/ji.css">
    11.    <!--  加载动画效果 -->
    12.     <link rel="stylesheet" href="css/animate.min.css">
    13. </head>
    14. <body>
    15.     <!-- Swiper -->
    16.     <div class="swiper-container">
    17.         <div class="swiper-wrapper">
    18.             <div class="swiper-slide bb">
    19.             <div id="outone" class="ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
    20.              <img src="img/one.jpg"/>
    21.              </div>
    22.              <div id="bottom">
    23.                  <img src="img/jiezhi.png" class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s" swiper-animate-delay="2s"/>
    24.                  <img src="img/womenjiehunla.png" class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="1.5s"/>
    25.                  <img src="img/2016117.png" class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="3s"/>
    26.              </div>

    27.             </div>
    28.             <div class="swiper-slide bgtwo">
    29.                 <div class="towimg ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0s">
    30.                     <img src="./img/two1.jpg" />
    31.                 </div>
    32.                 <div class="right ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="0.8s">
    33.                     <div class="rightimg ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="1s">
    34.                         <img src="./img/two2.jpg" />

    35.                     </div>
    36.                     <img src="./img/twoline.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="2.5s" class="ani">
    37.                     <img src="./img/t1.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="2.8s" class="ani"longdesc="">
    38.                     <img src="./img/twoline.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="3.3s" class="ani">
    39.                     <img src="./img/t2.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="3.6s" class="ani">
    40.                     <img src="./img/twoline.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="4.1s" class="ani">
    41.                     <img src="./img/t3.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="4.4s" class="ani">
    42.                     <img src="./img/twoline.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="4.9s" class="ani">
    43.                     <img src="./img/t4.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="5.2s" class="ani">
    44.                     <img src="./img/twoline.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="5.7s" class="ani">
    45.                     <img src="./img/t5.png" alt="" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="6s" class="ani">
    46.                 </div>
    47.                  <img src="./img/fengche.gif" class="windmill ani" swiper-animate-effect="fadeIn" swiper-animate-duration="1.5s" swiper-animate-delay="4s"/>
    48.             </div>
    49.             
    50.         </div>

    51.         <!-- Add Pagination -->
    52.         <div class="swiper-pagination"></div>
    53.     </div>
    54.      <p id="copy">最底部的文字,仅用于展示效果。</p>
    55. <!--    外层音乐图标的div -->
    56.                 <div id="music">
    57.                     <image id="one" src="./img/music.gif">
    58.                     <image id="two" src="./img/music_off.png">
    59.                     <audio src="./img/bgmusic.mp3" autoplay="autoplay" loop="loop" id="au"></audio>
    60.                 </div>
    61.     <!-- Swiper JS -->
    62.     <script src="js/swiper.min.js"></script>
    63.      <script src="js/animate.min.js"></script>
    64.     <!-- Initialize Swiper -->
    65.     <script src="js/ji.js"></script>
    66.    
    67.    
    68.    
    69. </body>
    70. </html>
    复制代码
    1.jpg
    欢迎大家一起来自学css3,小菜鸟编程群:230998551,一起自学css3交流、讨论。
         
  • TA的每日心情
    郁闷
    2017-7-13 00:00
  • 签到天数: 2 天

    [LV.1]初来乍到

    0

    主题

    8

    帖子

    16

    积分

    幼儿园

    Rank: 1

    积分
    16
    活动推广币
    0 个
    后盾币
    16 个
    注册时间
    2017-7-12
    在线时间
    0 小时
    帖子
    8
    发表于 2017-7-12 23:58:15 |显示全部楼层
    自学css3交流 简单

    发表回复

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

    本版积分规则

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