css3实现幻灯片效果

最新推荐文章于 2021-11-25 21:43:50 发布
最新推荐文章于 2021-11-25 21:43:50 发布
阅读量1.4k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwwjiahuan/article/details/73028418
版权 
<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta charset="utf-8">
	<title>幻灯片效果</title>
	<style type="text/css">
		.slider-wrapper ul,
		.slider-wrapper li,
		.slider-wrapper div,
		.slider-wrapper img,
		.slider-wrapper a {
		    margin: 0;
		    padding: 0;
		    border: none;
		    outline: none;
		    list-style: none;
		}
		 
		.slider-wrapper {
		    width: 508px;
		    overflow: hidden;
		}
		 
		ul.s-thumbs li {
		    float: left;
		}
		 
		ul.s-slides,
		ul.s-slides li,
		ul.s-slides a,
		ul.s-slides img {
		    width: 500px;
		    height: 350px;
		    position: relative;
		}
		 
		ul.s-slides {
		    overflow: hidden;
		    clear: both;
		}
		 
		ul.s-slides li {
		    position: absolute;
		    z-index: 50;
		}
		ul.s-thumbs li {
	    float: left;
	    margin-bottom: 10px;
	    margin-right: 11px;
		}
 
		ul.s-thumbs li:last-child {
		    margin-left: 1px;
		    margin-right: 0;
		}
 
		ul.s-thumbs a {
		    display: block;
		    position: relative;
		    width: 55px;
		    height: 55px;
		    border: 4px solid transparent;
		 
		    -webkit-transition: all 0.25s ease-in-out;
		    -moz-transition: all 0.25s ease-in-out;
		    -o-transition: all 0.25s ease-in-out;
		    -ms-transition: all 0.25s ease-in-out;
		    transition: all 0.25s ease-in-out;
		 
		    font: bold 12px/25px Arial, sans-serif;
		    color: #515151;
		    text-decoration: none;
		    text-shadow: 1px 1px 0px rgba(255,255,255,.25), inset 1px 1px 0px rgba(0,0,0,.15);
		}
		 
		ul.s-thumbs img {
		    -webkit-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
		    -moz-box-shadow: 1px 1px 5px rgba(0,0,0,.5);
		    box-shadow: 1px 1px 5px rgba(0,0,0,.5);
		}
		 
		ul.s-thumbs a:hover,
		ul.s-slides {
		    border: 4px solid #141517;
		 
		    -webkit-border-radius: 3px;
		    -moz-border-radius: 3px;
		    border-radius: 3px;
		 
		    -webkit-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
		    -moz-box-shadow: 0px 1px 0px rgba(255,255,255,.05);
		    box-shadow: 0px 1px 0px rgba(255,255,255,.05);
		}
		ul.s-thumbs li a:hover span {
		    position: absolute;
		    z-index: 101;
		    bottom: -30px;
		    left: -22px;
		    display: block;
		    width: 100px;
		    height: 25px;
		    text-align: center;
		 
		    -webkit-border-radius: 3px;
		    -moz-border-radius: 3px;
		    border-radius: 3px;
		 
		    -webkit-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
		    -moz-box-shadow: 0px 1px 0px rgba(0,0,0,.4);
		    box-shadow: 0px 1px 0px rgba(0,0,0,.4);
		 
		    -webkit-transition: all 0.25s ease-in-out;
		    -moz-transition: all 0.25s ease-in-out;
		    -o-transition: all 0.25s ease-in-out;
		    -ms-transition: all 0.25s ease-in-out;
		    transition: all 0.25s ease-in-out;
		 
		    background: #ffffff; /* Old browsers */
		    background: -moz-linear-gradient(top,  #ffffff 0%, #bcbcbc 100%); /* FF3.6+ */
		    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#bcbcbc)); /* Chrome,Safari4+ */
		    background: -webkit-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Chrome10+,Safari5.1+ */
		    background: -o-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* Opera 11.10+ */
		    background: -ms-linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* IE10+ */
		    background: linear-gradient(top,  #ffffff 0%,#bcbcbc 100%); /* W3C */
		}
		 
		ul.s-thumbs li a:hover span:before {
		    width: 0;
		    height: 0;
		    border-bottom: 5px solid #ffffff;
		    border-left: 5px solid transparent;
		    border-right: 5px solid transparent;
		    content: '';
		    position: absolute;
		    top: -5px;
		    left: 44px;
		}
		 
		ul.s-thumbs li:first-child a:hover span {
		    left: -3px;
		}
		 
		ul.s-thumbs li:first-child a:hover span:before {
		    left: 25px;
		}
		 
		ul.s-thumbs li:last-child a:hover span {
		    left: auto;
		    right: -3px;
		}
		 
		ul.s-thumbs li:last-child a:hover span:before {
		    left: auto;
		    right: 26px;
		}
		/* Slide Left */
		 
		@-webkit-keyframes 'slideLeft' {
		    0% { left: -500px; }
		    100% { left: 0; }
		}
		 
		ul.s-slides li.slideLeft:target {
		    z-index: 100;
		 
		    -webkit-animation-name: slideLeft;
		    -webkit-animation-duration: 1s;
		    -webkit-animation-iteration-count: 1;
		}
		/* Slide Right */
		 
		@-webkit-keyframes 'slideRight' {
		    0% { left: 500px; }
		    100% { left: 0; }
		}
		 
		ul.s-slides li.slideRight:target {
		    z-index: 100;
		 
		    -webkit-animation-name: slideRight;
		    -webkit-animation-duration: 1s;
		    -webkit-animation-iteration-count: 1;
		}
		/* Slide Top */
		 
		@-webkit-keyframes 'slideTop' {
		    0% { top: -350px; }
		    100% { top: 0; }
		}
		 
		ul.s-slides li.slideTop:target {
		    z-index: 100;
		 
		    -webkit-animation-name: slideTop;
		    -webkit-animation-duration: 1s;
		    -webkit-animation-iteration-count: 1;
		}
		/* Slide Bottom */
		 
		@-webkit-keyframes 'slideBottom' {
		    0% { top: 350px; }
		    100% { top: 0; }
		}
		 
		ul.s-slides li.slideBottom:target {
		    z-index: 100;
		 
		    -webkit-animation-name: slideBottom;
		    -webkit-animation-duration: 1s;
		    -webkit-animation-iteration-count: 1;
		}
		/* Zoom In */
		 
		@-webkit-keyframes 'zoomIn' {
		    0% { -webkit-transform: scale(0.1); }
		    100% { -webkit-transform: none; }
		}
		 
		ul.s-slides li.zoomIn:target {
		    z-index: 100;
		    top: 4px;
		 
		    -webkit-animation-name: zoomIn;
		    -webkit-animation-duration: 1s;
		    -webkit-animation-iteration-count: 1;
		}
		/* Zoom Out */
		 
		@-webkit-keyframes 'zoomOut' {
		    0% { -webkit-transform: scale(2); }
		    100% { -webkit-transform: none; }
		}
		 
		ul.s-slides li.zoomOut:target {
		    z-index: 100;
		 
		    -webkit-animation-name: zoomOut;
		    -webkit-animation-duration: 1s;
		    -webkit-animation-iteration-count: 1;
		}
		/* Rotate */
		 
		@-webkit-keyframes 'rotate' {
		    0% { -webkit-transform: rotate(-360deg) scale(0.1); }
		    100% { -webkit-transform: none; }
		}
		 
		ul.s-slides li.rotate:target {
		    z-index: 100;
		    top: 4px;
		 
		    -webkit-animation-name: rotate;
		    -webkit-animation-duration: 1s;
		    -webkit-animation-iteration-count: 1;
		}
		/* Not Target */
		 
		@-webkit-keyframes 'notTarget' {
		    0% { z-index: 75; }
		    100% { z-index: 75; }
		}
		 
		ul.s-slides li:not(:target) {
		    -webkit-animation-name: notTarget;
		    -webkit-animation-duration: 1s;
		    -webkit-animation-iteration-count: 1;
		}
		/* First Slide */
		 
		ul.s-slides li.first {
		    z-index: 60;
		}
		/* Slider Load */
		 
		@-webkit-keyframes 'load' {
		    0% { opacity: 0; }
		    50% { opacity: 0; }
		    100% { opacity: 1; }
		}
		 
		.slider-wrapper {
		    -webkit-animation-name: load;
		    -webkit-animation-duration: 2s;
		    -webkit-transition-timing-function: ease-in-out;
		    -webkit-animation-iteration-count: 1;
		}
	</style>
</head>
<body>
	<div class="slider-wrapper">		
		<ul class="s-thumbs">
		    <li><a href="#slide-1"><img src="img/thumb1.png" alt="" /><span>Image 1</span></a></li>
		    <li><a href="#slide-2"><img src="img/thumb2.png" alt="" /><span>Image 2</span></a></li>
		    <li><a href="#slide-3"><img src="img/thumb3.png" alt="" /><span>Image 3</span></a></li>
		    <li><a href="#slide-4"><img src="img/thumb4.png" alt="" /><span>Image 4</span></a></li>
		    <li><a href="#slide-5"><img src="img/thumb5.png" alt="" /><span>Image 5</span></a></li>
		    <li><a href="#slide-6"><img src="img/thumb6.png" alt="" /><span>Image 6</span></a></li>
		    <li><a href="#slide-7"><img src="img/thumb7.png" alt="" /><span>Image 7</span></a></li>
		</ul>
		<ul class="s-slides">
		    <li id="slide-1" class="slideLeft"><img src="img/thumb1.png" alt="" /></li>
		    <li id="slide-2" class="slideRight"><img src="img/thumb2.png" alt="" /></li>
		    <li id="slide-3" class="slideTop"><img src="img/thumb3.png" alt="" /></li>
		    <li id="slide-4" class="slideBottom"><img src="img/thumb4.png" alt="" /></li>
		    <li id="slide-5" class="zoomIn"><img src="img/thumb5.png" alt="" /></li>
		    <li id="slide-6" class="zoomOut"><img src="img/thumb6.png" alt="" /></li>
		    <li id="slide-7" class="rotate"><img src="img/thumb7.png" alt="" /></li>
		</ul>
	</div>
</body>
</html>

wwwjiahuan
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
用CSS写一个简单的幻灯片效果页面
php_martin的博客
07-18 322
用CSS写一个简单的幻灯片效果页面
如何使用CSS实现一个响应式图片幻灯片（Responsive Image Slider）效果？
最新发布
官方推荐
09-01 9899
如何使用CSS实现一个响应式图片幻灯片（Responsive Image Slider）效果？
html5 css3实现幻灯片效果代码,CSS3实现的渐变幻灯片效果
weixin_42144201的博客
06-07 428
实现效果代码htmlCSS3: CSS3 delivers a wide range of stylization and effects, enhancing the web app without sacrificing your semantic structure or performance. Additionally Web Open Font Format (WOFF) provid...
37种经典的css3图片切换幻灯片效果
02-11
37种经典的css3图片切换幻灯片效果
css3实现幻灯片切换
04-02
css3实现幻灯片切换是一款纯CSS3实现的图片幻灯片切换效果。
纯CSS3实现超酷幻灯片切换
04-06
纯CSS3实现超酷幻灯片切换是一款无jQuery代码就可以实现流畅的切换效果，效果很酷很漂亮哦。本作品由
CSS3+JavaScript实现翻页幻灯片效果
10-19
主要介绍了CSS3+JavaScript实现翻页幻灯片效果,非常不错，具有参考借鉴价值，需要的朋友可以参考下
纯CSS3图片幻灯片切换效果
06-12
首先真的非常感谢世界上有了CSS3这么个东西，它使得很多网页特效不再需要依赖javascript脚本代码，使得浏览器执行起来更加方便快捷。但有一点我们得注意，因为目前绝大多数浏览器还是比较“旧”的版本，还不支持CSS3...
纯CSS3实现的图片切换幻灯片代码
04-06
纯CSS3实现的图片切换幻灯片代码是一款没用到JS跟jQuery实现的CSS3幻灯片特效。
前端复习--css实现幻灯片效果
hellokingqwe的博客
09-24 3969
1 原文链接：http://caibaojian.com/css-slide.html 前端开发博客 (http://caibaojian.com/css-slide.html)    这是一种较为简单原始的方法，主要原理：有多张照片放在一个div中，div的属性尺寸设置为每一次只能显示一张照片，且overflow:hidden，然后在每张照片中设置锚点，即可。 css实现幻
纯CSS实现幻灯片效果
lhxsirky的博客
11-11 1268
先上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>css幻灯片</title> <link rel="stylesheet" href=""> </head> <style>...
使用CSS3实现的幻灯图片效果
qq_51049931的博客
11-25 542
一、代码 1.html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3</title> <link rel="stylesheet" type="text/css" href="./ppt.css"/> </head> <body> <div class="container"&gt
用CSS实现幻灯片
qq_52207728的博客
05-13 623
<!doctype htm l> <html> <head> <style> img { display: none; width: 100px; height: 100px; } input:checked + img { display: block; } input { position: absolute; left: -9999
纯CSS3实现超酷幻灯片图文切换效果
js网页特效
12-27 964
纯CSS3实现绚丽焦点图切换效果，这是一款纯CSS3实现的焦点图插件，焦点图设计十分清新简单，图片滑动特别流畅，是一款值得一用的CSS3焦点图。切换点通过表单radio来实现，通过radio的checked判断图片的切换位置。 当然要使用这个css3特效的话只能在支持CSS3的环境下才行，像IE9以下的那些就不要用了。 判断radio的checked的css3样式如下   input[t...
用CSS实现一个简单的幻灯片效果页面
juzipchy的博客
03-02 7331
又是一个常见面试题，不搜不知道，一搜吓一跳，有很多很有意思的写法。第一反应是利用CSS3的animation。不过为了兼容浏览器，记得加各浏览器前缀（“chrome和safira：-webkit-”、“firefox:-moz-”、“opera:-o-”） 下面说说用到的animation各属性。 animation-name(动画名字，需用引号包裹) animation-duration(动
html页面实现ppt效果图,用CSS实现一个简单的幻灯片效果页面
weixin_29124423的博客
06-03 878
用CSS实现一个简单的幻灯片效果页面，第一反应是利用CSS3的animation。不过为了兼容浏览器，记得加各浏览器前缀(“chrome和safira：-webkit-”、“firefox:-moz-”、“opera:-o-”)，我最开始写的时候忘记加浏览器前缀，在chrome中一直没有任何显示。下面说说用到的animation各属性。animation-name(动画名字，需用引号包裹)anim...
使用CSS实现一个简单的幻灯片效果
hahahhahahahha123456的博客
09-09 954
方法一： 简单的CSS代码实现幻灯片效果 话不多说，直接上代码 &lt;!DOCTYPE html&gt; &lt;html lang="zh-CN"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;CSS实现简单的幻灯片效果&lt;/title&gt; &lt;st
用css3动画制作幻灯片效果实现不了的问题
csdn_haow的博客
11-22 1005
css3动画制作幻灯片出现的问题
css 如何实现一个幻灯片效果
05-23
要实现一个幻灯片效果，可以使用 CSS3 中的动画属性。具体步骤如下： 1. 首先，需要将幻灯片中的每个图片包裹在一个 div 中，并将它们都放置在同一个容器内。 2. 然后，可以使用 CSS3 中的 animation 属性定义一个...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值