澳门六星彩资料-澳门2020年三合开奖结果-澳门三合图正版 今晚

密通学院

 找回密码
 立即注册

扫一扫,访问微社区

QQ登录

只需一步,快速开始

搜索
查看: 646|回复: 1
打印 上一主题 下一主题

纯css实现幻灯片代码

[复制链接]
  • TA的每日心情
    萌哒
    2018-7-9 11:48
  • 34

    主题

    41

    帖子

    2万

    铜板

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    21039

    最佳新人活跃会员热心会员

    跳转到指定楼层
    楼主
    发表于 2019-4-13 23:20:46 | 只看该作者 |只看大图 回帖奖励 |倒序浏览 |阅读模式
    很多幻灯片效果都是通过js+css实现的,现在提供一个纯css实现幻灯片效果,如果需要添加图片或其他美化效果,请自行添加。

    源文件:

    1. <html>
    2. <head>
    3.     <meta charset="utf-8">   
    4.     <link href="css/test.css" rel="stylesheet" type="text/css" media="all" />
    5. </head>
    6. <body>
    7. <div class="contain">
    8.     <ul class="slide-auto">
    9.         <li class="one">one</li>
    10.         <li class="two">two</li>
    11.         <li class="three">three</li>
    12.     </ul>
    13. </div>
    14. </div>
    15. </body>
    16. </html>
    复制代码


    css代码如下:
    1. .contain{
    2.     position: relative;
    3.     margin:auto;
    4.     width: 600px;
    5.     height: 200px;
    6.     text-align: center;
    7.     font-family: Arial;
    8.     color: #FFF;
    9.     overflow: hidden;
    10. }

    11. .contain ul{
    12.     margin:10px 0;
    13.     padding:0;
    14.     width: 1800px;
    15.     transition:all 0.5s;
    16. }

    17. .contain li{
    18.     float: left;
    19.     width: 600px;
    20.     height: 200px;
    21.     list-style: none;
    22.     line-height: 200px;
    23.     font-size: 36px;
    24. }

    25. .one{
    26.     background: #9fa8ef;
    27. }

    28. .two{
    29.     background: #ef9fb1;
    30. }

    31. .three{
    32.     background: #9fefc3;
    33. }

    34. .contain .slide-auto{        
    35.     animation:marginLeft 10.5s infinite;
    36. }

    37. @keyframes marginLeft{
    38.     0%{margin-left: 0;}
    39.     28.5%{margin-left: 0;}
    40.     33.3%{margin-left: -600px;}
    41.     62%{margin-left: -600px;}
    42.     66.7%{margin-left: -1200px;}
    43.     95.2%{margin-left: -1200px;}
    44.     100%{margin-left: 0;}
    45. }
    复制代码


  • TA的每日心情
    萌哒
    2018-7-9 11:48
  • 34

    主题

    41

    帖子

    2万

    铜板

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    21039

    最佳新人活跃会员热心会员

    沙发
     楼主| 发表于 2019-4-13 23:23:36 | 只看该作者

    另一个


    源代码:
    1. <div id="container">
    2.     <div id="photo">
    3.         <img src="1.png" />
    4.         <img src="2.png" />
    5.         <img src="3.png" />
    6.     </div>
    复制代码


    css:
    1. #container {
    2.         width: 400px;
    3.         height: 300px;
    4.         overflow: hidden;
    5. }

    6. #photo {
    7.         width: 1200px;
    8.         animation: switch 5s ease-out infinite;
    9. }

    10. #photo > img {
    11.         float: left;
    12.         width: 400px;
    13.         height: 300px;
    14. }

    15. @keyframes switch {
    16.         0%, 25% {
    17.                 margin-left: 0;
    18.         }
    19.         35%, 60% {
    20.                 margin-left: -400px;
    21.         }
    22.         70%, 100% {
    23.                 margin-left: -800px;
    24.         }
    复制代码


    快速回复: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 感恩
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    澳门六星彩资料-澳门2020年三合开奖结果-澳门三合图正版 今晚|Archiver|手机版|小黑屋|密通学院:专业网络营销服务商

    GMT+8, 2020-5-21 16:26 , Processed in 0.192383 second(s), 29 queries ()

    Powered by XMT Inc. © 2015-2021 ArrayV1.0

    系统运营:

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