密通学院

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3680|回复: 1

纯css实现幻灯片代码

[复制链接]

34

主题

7

回帖

2万

铜板

管理员

Rank: 9Rank: 9Rank: 9

积分
23881

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

发表于 2019-4-13 23:20:46 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
很多幻灯片效果都是通过js+css实现的,现在提供一个纯css实现幻灯片效果,如果需要添加图片或其他美化效果,请自行添加。
20180527130632322.gif
源文件:

  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. }
复制代码


回复

使用道具 举报

34

主题

7

回帖

2万

铜板

管理员

Rank: 9Rank: 9Rank: 9

积分
23881

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

 楼主| 发表于 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.         }
复制代码


回复 支持 反对

使用道具 举报

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

本版积分规则

首页|Archiver|手机版|小黑屋|密通学院:专业网络营销服务商

GMT+8, 2024-12-22 13:54 , Processed in 0.123047 second(s), 27 queries QQ

Powered by XMT Inc. © 2015-2025 ArrayV1.0 豫ICP备17022382号

系统运营:密城通 豫公网安备 41018302000212 号

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