CSS3淡入淡出滑块

最新推荐文章于 2024-11-07 17:12:57 发布
最新推荐文章于 2024-11-07 17:12:57 发布
阅读量694 收藏
点赞数
文章标签： html css less css3 animation
原文链接：https://www.script-tutorials.com/css3-fade-slider/
版权
CSS3 Fade slider
CSS3 Fade slider

CSS3 Fade slider Today I would like to show you how to create nice and smooth css3 slider. It uses fade effect to switch between slides. Plus, you can use custom promo text for each slide. We will use basic UL-LI unordered list to make this slider. We don’t need to click anywhere to switch slides – everything is automatically (css3 animation).

CSS3 Fade滑块今天，我想向您展示如何创建美观而平滑的CSS3滑块。 它使用淡入淡出效果在幻灯片之间切换。 另外，您可以为每张幻灯片使用自定义促销文字。 我们将使用基本的UL-LI无序列表来制作此滑块。 我们无需单击任何位置即可切换幻灯片-一切都是自动的(css3动画)。

现场演示

[sociallocker]

[社交储物柜]

下载结果

[/sociallocker]

[/ sociallocker]

So, lets start

所以，让我们开始吧

步骤1. HTML (Step 1. HTML)

Html markup is very easy. There are four slides. Each slide consists of image (as background) and promo text in DIV. If you need – you always can add more slides here.

HTML标记非常简单。 有四张幻灯片。 每张幻灯片都包含图片(作为背景)和DIV中的促销文字。 如果需要–您随时可以在此处添加更多幻灯片。 


<div class="slides">
    <ul> <!-- slides -->
        <li><img src="images/pic1.jpg" alt="image01" />
            <div>Promo text #1</div>
        </li>
        <li><img src="images/pic2.jpg" alt="image02" />
            <div>Promo text #2</div>
        </li>
        <li><img src="images/pic3.jpg" alt="image03" />
            <div>Promo text #3</div>
        </li>
        <li><img src="images/pic4.jpg" alt="image04" />
            <div>Promo text #4</div>
        </li>
    </ul>
</div>


<div class="slides">
    <ul> <!-- slides -->
        <li><img src="images/pic1.jpg" alt="image01" />
            <div>Promo text #1</div>
        </li>
        <li><img src="images/pic2.jpg" alt="image02" />
            <div>Promo text #2</div>
        </li>
        <li><img src="images/pic3.jpg" alt="image03" />
            <div>Promo text #3</div>
        </li>
        <li><img src="images/pic4.jpg" alt="image04" />
            <div>Promo text #4</div>
        </li>
    </ul>
</div>

步骤2. CSS (Step 2. CSS)

Now, it’s time to define css styles for our slider. Here are styles for main slider element, inner slides and for promo titles:

现在，是时候为滑块定义CSS样式了。 以下是主滑块元素，内部幻灯片和促销标题的样式： 


/* fade slider */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px;
}
.slides ul {
    list-style:none;
    position:relative;
}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;
    /* css3 animation */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}


/* fade slider */
.slides {
    height:300px;
    margin:50px auto;
    overflow:hidden;
    position:relative;
    width:900px;
}
.slides ul {
    list-style:none;
    position:relative;
}
/* keyframes #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
.slides ul li {
    opacity:0;
    position:absolute;
    top:0;
    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}
/* css3 delays */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}
/* keyframes #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
.slides ul li div {
    background-color:#000000;
    border-radius:10px 10px 10px 10px;
    box-shadow:0 0 5px #FFFFFF inset;
    color:#FFFFFF;
    font-size:26px;
    left:10%;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top:50%;
    width:200px;
    /* css3 animation */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

You can see that I use two css3 animations here: anim_slides and anim_titles. First one is for separated slides, second one – for promo texts. In order to switch between slides – we change opacity of slides. For titles – we change Left position and opacity too.

您可以看到我在这里使用了两个css3动画：anim_slides和anim_titles。 第一个用于单独的幻灯片，第二个用于促销文本。 为了在幻灯片之间切换–我们更改幻灯片的不透明度。 对于标题-我们也会更改“左”位置和不透明度。

现场演示

结论 (Conclusion)

That is all for today. We have just created new cool pure CSS3-based slider with Fade effect. I hope that you like it. Good luck!

今天就这些。 我们刚刚创建了带有Fade效果的全新酷炫纯CSS3滑块。 我希望你喜欢。 祝好运！

翻译自: https://www.script-tutorials.com/css3-fade-slider/

css3如何实现滑块
04-26
NULL 博文链接：https://1060049850.iteye.com/blog/2357345
CSS3淡入效果
MikazukiMo的博客
04-23 293
<style> .a1 { height: 50px; width: 50px; background-color: aqua; animation: test 500ms ease-in-out forwards; } @keyframes test{ 0%{opacity: 0;...
CSS 淡入淡出增加元素隐藏
最新发布
y523648的博客
11-07 440
IsShow是一个控制显示和透明度的变量，可以用代码控制。
css3图片淡出淡入怎么做,css3图像淡入淡出(css3 image fadein)
weixin_35828338的博客
08-03 2784
css3图像淡入淡出(css3 image fadein)我试图让图像在加载后与css3一起淡入。 问题在于我的方法目前被链接的方式将它淡入淡出一秒两次。 而不是只是空白和淡入。我的解决方案是尝试将动画代码拆分为一个独立的类，我应用后，我最初设置不透明度为零(我这样做在JS，所以没有启用js的人仍然可以看到图像)。它仍然没有工作我认为它是因为在这段代码中，它将不透明度设置为零，并立即添加一个动画过...
CSS3原生实现淡入淡出效果
热门推荐
liguo9860的专栏
02-23 3万+
淡入淡出效果 #targetDiv { width: 150px; height:200px; text-align:center; padding-top:80px; background: #8a8a8a; color: #fff; positio
css3 滑块_纯CSS3滑块
cuken7684698822的博客
08-02 1040
css3 滑块Pure CSS3 Slider 纯CSS3滑块 Today I’ll tell you about a remarkable thing that you can implement with CSS3 – it’s a slider. I think you may have noticed that some time ago was very popular variety...
HTML5/CSS3淡入淡出滑块焦点图 非常清新
04-16
解压密码：RJ4587 我们已经分享过几款简单的CSS3/jQuery焦点图插件，像HTML5结合jQuery实现图片滑块特效、CSS3/jQuery全屏立体焦点图等，大家可以到焦点图栏目下查找。今天要分享的这款焦点图切换时有淡如淡出的动画...
banner大图轮换图片淡入淡出切换效果源码下载
11-17
【标题】"Banner大图轮换图片淡入淡出切换效果源码下载"涉及的核心知识点主要是网页设计中的动态效果实现，特别是JavaScript与CSS3技术在创建动态Banner中的应用。 【描述】"Banner大图轮换图片淡入淡出切换效果"是...
jquery+css3简单内容滑块焦点图.zip
09-25
jQuery特效可能指的是使用jQuery提供的方法实现了一些特殊效果，如淡入淡出、滑动等。 压缩包内的文件名称列表： 1. index.html：这是项目的主HTML文件，其中包含了网页的结构和内容，以及引用CSS和JavaScript文件...
css3硬件加速滑块.zip
11-17
这些动画可以应用于滑块的切换效果，如淡入淡出、左右滑动等。 JavaScript和jQuery则用于处理用户的交互和逻辑控制。例如，它们可以监听滑动事件，判断何时开始和结束滑动，以及当前应该显示哪个幻灯片。jQuery提供...
jQuery+CSS3实现动画滑块幻灯片.zip
11-19
`animation`属性则允许我们定义和控制复杂的动画序列，如淡入淡出、滑动等。 HTML5是现代Web开发的基础，它提供了一些新的标签和API，使得结构化内容和富媒体的处理更加便捷。在这个项目中，HTML5可能用到了`<div>`...
css3 实现网页的淡入效果
u013993319的博客
09-24 1万+
用css3的animation动画属性实现网页的淡入，主要点在于改变页面的opacity属性。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> @keyframes fadein{ 0%{opacity: 0;
css3自定义滑块_制作自适应CSS3图像滑块
cungui5726的博客
08-20 590
css3自定义滑块Previously, I’ve demonstrated how to make a fixed-width CSS image slider. Increasingly, web developers desire solutions that not only scale across viewport sizes, but perform well on mobile d...
纯CSS3实现的图片滑块程序，效果非常酷
weixin_30530939的博客
06-30 145
接下来我们一起来分析一下源码，首先是HTML代码，非常简单： <div id="gal"> <nav class="galnav"> <ul> <li><input type="radio" name="btn" value="one" checked="checked" /> ...
CSS3滑块菜单
w1366352655的博客
12-05 296
CSS3滑块菜单 在线演示 本地下载 posted @ 2018-12-05 20:04 栖息地 阅读(...) 评论(...) 编辑 收藏
用javascript和css实现菜单淡入淡出及滑动效果
m566666的博客
10-25 1881
先写一个HTML文件里面嵌入css代码如下 <!DOCTYPE html> <html lang="en"> <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"
【HTML+CSS+JQ】滑动淡入效果
NpcCat的博客
11-06 3015
滑动淡入源码HTML+JS+JQ部分CSS部分效果 源码 HTML+JS+JQ部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link type="text/css" href="CSS/enter.css" rel="stylesheet" /> <script src="https://cdn.boo
CSS3淡入淡出动画效果与幻灯片效果
DgboSql的博客
09-18 1167
通过在HTML元素中应用相应的CSS类，你可以轻松地为网页添加这些动画效果。通过适当调整CSS属性和动画定义，可以实现更多样化的效果。CSS3的动画功能为网页设计提供了更多的交互和视觉效果，使得网页更加生动和吸引人。CSS3是一种用于样式设计的技术，它可以为网页添加各种各样的动画效果。其中，淡入淡出动画效果和幻灯片效果是常见且非常实用的效果之一。在动画中，我们逐步调整幻灯片的透明度，从而实现幻灯片的切换效果。通过以上代码，我们创建了一个包含三个幻灯片项的幻灯片效果。的CSS类，用于指示当前显示的幻灯片。
实现带小图标的图片淡入淡出切换效果
在本资源中，滑块动画被用来实现图片的左右淡入淡出切换效果。 知识点三：图片切换特效的实现 图片切换特效是一种常见的网页交互效果，它通过在网页上展示一系列的图片，并在用户交互（如点击、鼠标悬停等）时切换...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值