设为首页收藏本站
桌面版

密通学院

 找回密码
 立即注册

QQ登录

只需一步，快速开始

关于我们
服务项目
注册会员
会员认证
在线充值
赞助我们
源码下载
建站素材
下载中心
最新资讯
联系我们
热线服务
会员认证
形象展示
服务项目
最新资讯
联系我们
热线服务
招商中心
今日资讯
新客户端
密通学院
在线客服
新浪微博
腾讯微博
微信关注
密通学院»密通学院 › 共享资源 › 代码下载 › 纯css实现幻灯片代码
返回列表 发新帖
查看: 3679|回复: 1

纯css实现幻灯片代码

[复制链接]
admin实名认证

34

主题

7

回帖

2万

铜板

管理员

Rank: 9Rank: 9Rank: 9

积分
23881

最佳新人活跃会员热心会员
发表于 2019-4-13 23:20:46 | 显示全部楼层 |阅读模式

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

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

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

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

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

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

  28. .one{
  29.     background: #9fa8ef;
  30. }

  32. .two{
  33.     background: #ef9fb1;
  34. }

  36. .three{
  37.     background: #9fefc3;
  38. }

  40. .contain .slide-auto{        
  41.     animation:marginLeft 10.5s infinite;
  42. }

  44. @keyframes marginLeft{
  45.     0%{margin-left: 0;}
  46.     28.5%{margin-left: 0;}
  47.     33.3%{margin-left: -600px;}
  48.     62%{margin-left: -600px;}
  49.     66.7%{margin-left: -1200px;}
  50.     95.2%{margin-left: -1200px;}
  51.     100%{margin-left: 0;}
  52. }
复制代码
回复

使用道具 举报

admin实名认证

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. }

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

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

  18. @keyframes switch {
  19.         0%, 25% {
  20.                 margin-left: 0;
  21.         }
  22.         35%, 60% {
  23.                 margin-left: -400px;
  24.         }
  25.         70%, 100% {
  26.                 margin-left: -800px;
  27.         }
复制代码
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

GMT+8, 2024-12-22 13:18 , Processed in 0.146484 second(s), 28 queries QQ

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

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

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