<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>大屏幕</title>
<style type="text/css">
.sliderBox{height:12em;position:relative;overflow: hidden;}
.slider{position:absolute;width:100%;height:100%;}
.slider li{position:absolute;top:0;left:0;width:100%;height:100%;}
.slider li:nth-of-type(2){left:100%;}
.slider li:nth-child(3){left:200%;}
.slider li img{height:12em;}
.animate-slider{
animation: slider 12s linear infinite 0s alternate;
-webkit-animation: slider 12s linear infinite 0s alternate;
}
/*
@keyframes slider {
0% {left:0;}
25%{left:0;}
33.3%{left:-100%;}
66.6%{left:-100%;}
75%{left:-200%;}
100%{left:-200%}
}
@-webkit-keyframes slider {
0% {left:0;}
25%{left:0;}
33.3%{left:-100%;}
66.6%{left:-100%;}
75%{left:-200%;}
100%{left:-200%}
}
*/
@keyframes slider {
0% {transform:translateX(0);}
25%{transform:translateX(0)}
33.3%{transform:translateX(-100%);}
66.6%{transform:translateX(-100%);}
75%{transform:translateX(-200%);}
100%{transform:translateX(-200%);}
}
@-webkit-keyframes slider {
0% {-webkit-transform:translateX(0);}
25%{-webkit-transform:translateX(0)}
33.3%{-webkit-transform:translateX(-100%);}
66.6%{-webkit-transform:translateX(-100%);}
75%{-webkit-transform:translateX(-200%);}
100%{-webkit-transform:translateX(-200%);}
}
</style>
</head>
<body>
<section style="margin-top: 50px;">
<div style="position:fixed;top:0;left:0;height:50px;width:100%;background: #dcc;">黑色3</div>
<div>
<div class="sliderBox">
<ul class="slider animate-slider">
<li><a><img src="images/0888.jpg" /></a></li>
<li><a><img src="images/dao_bg.gif" /></a></li>
<li><a><img src="images/footer.png" /></a></li>
</ul>
</div>
</div>
</section>
</body>
</html>
分享到：
相关推荐
使用CSS3Slider，您可以创建具有响应能力的简单滑块，并提供简单但美观的滑动动画。 正在安装 当前，只有一种使用NPM来安装CSS3Slider的方法： $ npm install css3slider 如何使用 首先，您需要CSS3Slider： ...
7. **无JS实现的局限性**：尽管纯CSS3实现的轮播在简单场景下是可行的，但缺乏JavaScript的支持可能导致一些功能受限，例如自动播放、手动控制、动态加载等。此外，对于不支持CSS3的老旧浏览器，可能无法正常显示...
优雅的回退功能意味着当用户的浏览器不支持某些高级特性（如CSS3、JavaScript等）时，组件能够自动降级到一个仍然可用但可能功能较弱的版本，确保所有用户都能访问内容。 标签 "jquery" 提示我们这个3D轮播是基于...
【标题】"simple-HTML-CSS_Slider"项目是一个基于纯HTML和CSS技术实现的简单滑动图片展示组件。这个项目旨在提供一个无依赖、轻量级且易于定制的解决方案，帮助开发者在网页中实现基本的图片轮播功能，而无需...
FluxSlider是一个强大的基于CSS3动画的图像过渡框架，专为网页中的图片展示设计。它利用现代浏览器对CSS3特性的支持，实现了平滑、高效且具有视觉吸引力的图片滑动效果，为用户带来优质的浏览体验。在JavaScript开发...
标题中的“纯CSS3简单的滑动开关按钮特效源码”是指使用CSS3技术实现的一种交互式的滑动开关按钮效果。这种效果通常用于网站上的ON/OFF切换、开启/关闭功能等，无需JavaScript或其他编程语言，仅通过CSS3的属性和...
在CSS3中，实现滑块通常涉及到创建一个可拖动的元素，该元素可以在特定的轨道上移动，以此来调整某个值或者展示不同的内容。这个功能广泛应用于各种界面设计，如音量控制、进度条、选择器等。下面将详细介绍如何使用...
在本文中，我们将深入探讨如何使用CSS3来创建滑杆开关切换按钮，这是一种常见的用户界面元素，常用于打开/关闭功能或切换设置。滑杆开关通常由一个可移动的滑块组成，用户可以通过拖动滑块来改变开关的状态。在这个...
在提供的压缩包中，包含了多个示例文件（demo1.html、demo2.html、demo3.html、demo4.html），这些文件展示了chop slider的不同应用场景和效果。通过查看这些示例，开发者可以直观地了解插件的用法，并从中获得灵感...
在本文中，我们将深入探讨如何使用纯CSS3技术来创建一个鼠标滑动开关灯的特效。这个效果在网页设计中非常常见，可以用于模拟实际生活中的开关操作，为用户提供直观的交互体验。CSS3（层叠样式表第三版）是CSS的最新...
3. **触屏友好**：考虑到移动设备的广泛使用，Slider.js 对触屏操作进行了优化，用户可以通过手势滑动来切换图片，确保在手机和平板上的良好用户体验。 4. **响应式设计**：Slider.js 自适应不同屏幕尺寸，无论是在...
<link rel="stylesheet" href="jqueryslider.css"> <div id="slider"> $(document).ready(function(){ $("#slider").slider(); }); ``` 这段代码展示了如何在页面加载完成后，通过`$("#slider")....
这可能涉及到更新UI元素的样式（如CSS的left属性），以及调整与Slider关联的任何其他界面元素，如显示的数值或进度条。 5. **回调处理**：如果Slider与某些业务逻辑相关联，例如控制音量或动画速度，那么滑块位置的...
页面中可以设置幻灯片的标题、图片样式以及文章的标题、内容，设置起来都十分的简单，这里就不多加介绍了，下面说说它的使用吧！ Smooth Slider使用： 1、如果你想要在主页中显示这些内容，那么，在后台点击...
6. **样式设计**：slider组件的外观可以通过CSS进行定制，Vue.js可以结合CSS预处理器（如Sass、Less）或CSS Modules来组织和复用样式。 在压缩包文件`vue-easy-slider-master`中，我们可以预见到它可能是一个开源的...
通过这款软件，无论是网站设计师还是普通用户，都能够无需深入学习复杂的HTML和CSS，只需几步简单操作就能完成专业级别的动态效果设计。 在WowSlider中，你可以： 1. **添加图片**：导入你需要展示的图片，支持...
在本文中，我们将深入探讨如何使用CSS3来创建一个简单的滑动开关按钮，这个按钮具有类似于安卓系统的样式。滑动开关是一种常见的用户界面元素，用于切换两种状态，如开/关、是/否等。利用CSS3的强大功能，我们可以...
2. **CSS3**：利用CSS3的动画属性（如`transition`和`animation`），可以创建平滑的图片切换效果。 3. **Bootstrap Carousel**：Bootstrap框架内置的轮播组件，提供了一套完整的轮播解决方案，易于集成且高度可定制...
此外，nivo-slider还支持通过CSS进行深度定制，以实现独特的设计风格。 五、总结 nivo-slider3.1以其强大的功能和易用性，成为网页设计中不可或缺的一部分。无论你是前端开发者还是网页设计师，都能借助这个插件...