css3 滑块_纯CSS3滑块

最新推荐文章于 2024-04-01 15:00:51 发布

cuken7684698822

最新推荐文章于 2024-04-01 15:00:51 发布

阅读量1k

点赞数

文章标签： html less css bootstrap js ViewUI

原文链接：https://www.script-tutorials.com/pure-css3-slider/

版权

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 of sliders, and many chose their decision to use jQuery easySlider example. But it appears the same tasks can be implemented using pure CSS3, today I will tell you exactly how this can be done.

今天，我将告诉您有关CSS3可以实现的非凡之处-它是一个滑块。我想您可能已经注意到，一段时间前滑块非常流行，许多选择使用jQuery easySlider示例的决定。但是似乎可以使用纯CSS3来实现相同的任务，今天我将确切地告诉您如何完成此任务。

Here are samples and downloadable package:

以下是示例和可下载的软件包：

现场演示

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

Ok, download the example files and lets start coding !

好的，下载示例文件并开始编码！

步骤1. HTML (Step 1. HTML)

Here are html source code of our demo. Pay attention how we built our slider. To implement the desired effect – I’ve put our slides followed one another (float: left). And put the correct links.

这是我们演示的html源代码。请注意我们如何构建滑块。为了实现理想的效果–我将幻灯片放在一起(浮动：左)。并把正确的链接。

index.html (index.html)


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Pure CSS3 Slider | Script Tutorials</title>
        <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen">
    </head>
    <body>
        <header>
            <h2>Pure CSS3 Slider</h2>
            <a href="https://www.script-tutorials.com/pure-css3-slider/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="slider">
                <span id="root"></span>
                <span id="parent1"></span>
                <span id="parent2"></span>
                <span id="parent3"></span>
                <span id="child1"></span>
                <span id="child2"></span>
                <span id="subchild1"></span>
                <div id="tabs">
                    <dl>
                        <dd>
                            <a class="fwd" href="#parent1">Parent #1</a>
                            <a class="fwd" href="#parent2">Parent #2</a>
                            <a class="fwd" href="#parent3">Parent #3</a>
                        </dd>
                    </dl>
                    <dl class="parent1">
                        <dd>
                            <a class="fwd" href="#child1">Child #1#1</a>
                            <a class="fwd" href="#child2">Child #1#2</a>
                            <a href="#">Child #1#3</a>
                            <a href="#">Child #1#4</a>
                            <a href="#">Child #1#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="parent2">
                        <dd>
                            <a href="#">Child #2#1</a>
                            <a href="#">Child #2#2</a>
                            <a href="#">Child #2#3</a>
                            <a href="#">Child #2#4</a>
                            <a href="#">Child #2#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="parent3">
                        <dd>
                            <a href="#">Child #3#1</a>
                            <a href="#">Child #3#2</a>
                            <a href="#">Child #3#3</a>
                            <a href="#">Child #3#4</a>
                            <a href="#">Child #3#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="child1">
                        <dd>
                            <a class="fwd" href="#subchild1">SubChild #1#1</a>
                            <a href="#">SubChild #1#2</a>
                            <a href="#">SubChild #1#3</a>
                            <a href="#">SubChild #1#4</a>
                            <a href="#">SubChild #1#5</a>
                        </dd>
                        <dd><a href="#parent1">Back</a></dd>
                    </dl>
                    <dl class="child2">
                        <dd>
                            <a href="#">SubChild #2#1</a>
                            <a href="#">SubChild #2#2</a>
                            <a href="#">SubChild #2#3</a>
                            <a href="#">SubChild #2#4</a>
                            <a href="#">SubChild #2#5</a>
                        </dd>
                        <dd><a href="#parent1">Back</a></dd>
                    </dl>
                    <dl class="subchild1">
                        <dd>
                            <a href="#">Links #1</a>
                            <a href="#">Links #2</a>
                            <a href="#">Links #3</a>
                        </dd>
                        <dd><a href="#child1">Back</a></dd>
                    </dl>
                </div>
            </div>
        </div>
    </body>
</html>


<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta charset="utf-8" />
        <title>Pure CSS3 Slider | Script Tutorials</title>
        <link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
        <link rel="stylesheet" href="css/slider.css" type="text/css" media="screen">
    </head>
    <body>
        <header>
            <h2>Pure CSS3 Slider</h2>
            <a href="https://www.script-tutorials.com/pure-css3-slider/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
        </header>
        <div class="container">
            <div class="slider">
                <span id="root"></span>
                <span id="parent1"></span>
                <span id="parent2"></span>
                <span id="parent3"></span>
                <span id="child1"></span>
                <span id="child2"></span>
                <span id="subchild1"></span>
                <div id="tabs">
                    <dl>
                        <dd>
                            <a class="fwd" href="#parent1">Parent #1</a>
                            <a class="fwd" href="#parent2">Parent #2</a>
                            <a class="fwd" href="#parent3">Parent #3</a>
                        </dd>
                    </dl>
                    <dl class="parent1">
                        <dd>
                            <a class="fwd" href="#child1">Child #1#1</a>
                            <a class="fwd" href="#child2">Child #1#2</a>
                            <a href="#">Child #1#3</a>
                            <a href="#">Child #1#4</a>
                            <a href="#">Child #1#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="parent2">
                        <dd>
                            <a href="#">Child #2#1</a>
                            <a href="#">Child #2#2</a>
                            <a href="#">Child #2#3</a>
                            <a href="#">Child #2#4</a>
                            <a href="#">Child #2#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="parent3">
                        <dd>
                            <a href="#">Child #3#1</a>
                            <a href="#">Child #3#2</a>
                            <a href="#">Child #3#3</a>
                            <a href="#">Child #3#4</a>
                            <a href="#">Child #3#5</a>
                        </dd>
                        <dd><a href="#root">Back</a></dd>
                    </dl>
                    <dl class="child1">
                        <dd>
                            <a class="fwd" href="#subchild1">SubChild #1#1</a>
                            <a href="#">SubChild #1#2</a>
                            <a href="#">SubChild #1#3</a>
                            <a href="#">SubChild #1#4</a>
                            <a href="#">SubChild #1#5</a>
                        </dd>
                        <dd><a href="#parent1">Back</a></dd>
                    </dl>
                    <dl class="child2">
                        <dd>
                            <a href="#">SubChild #2#1</a>
                            <a href="#">SubChild #2#2</a>
                            <a href="#">SubChild #2#3</a>
                            <a href="#">SubChild #2#4</a>
                            <a href="#">SubChild #2#5</a>
                        </dd>
                        <dd><a href="#parent1">Back</a></dd>
                    </dl>
                    <dl class="subchild1">
                        <dd>
                            <a href="#">Links #1</a>
                            <a href="#">Links #2</a>
                            <a href="#">Links #3</a>
                        </dd>
                        <dd><a href="#child1">Back</a></dd>
                    </dl>
                </div>
            </div>
        </div>
    </body>
</html>

步骤2. CSS (Step 2. CSS)

Here are the CSS styles of our slider. Maybe you’ve noticed – that in our html we have two CSS files: layout.css and menu.css. The first file (layout.css) contain the styles of our demo page. We will not publish these styles in this article, but if you wish – you can find these styles in the package.

这是滑块CSS样式。也许您已经注意到–在我们的html中，我们有两个CSS文件：layout.css和menu.css。第一个文件(layout.css)包含我们演示页面的样式。我们不会在本文中发布这些样式，但是如果您愿意–您可以在包中找到这些样式。

css / slider.css (css/slider.css)


.slider {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin: 50px auto;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 200px;
}
.slider span {
    display:none
}
#tabs {
    background-color: #FFFFFF;
    margin-left: 0;
    overflow: hidden;
    width: 2000px;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
#tabs dl {
    float: left;
    height: 300px;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: relative;
    width: 200px;
}
#tabs dl:first-child {
    opacity:1;
}
#tabs dl dd a.fwd {
    background-color:#C8CEFF;
}
#tabs dl dd a {
    background-color: #F4F5FE;
    color: #000000;
    display: block;
    font-size: 18px;
    line-height: 32px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -ms-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -o-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
#tabs dl dd:first-child {
    height: 250px;
    overflow: auto;
    border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
}
#tabs dl dd a:hover {
    box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
}
#root:target ~ #tabs {
    margin-left:0;
}
#parent1:target ~ #tabs {
    margin-left:-200px;
}
#parent2:target ~ #tabs {
    margin-left:-400px;
}
#parent3:target ~ #tabs {
    margin-left:-600px;
}
#child1:target ~ #tabs {
    margin-left:-800px;
}
#child2:target ~ #tabs {
    margin-left:-1000px;
}
#subchild1:target ~ #tabs {
    margin-left:-1200px;
}
#parent1:target ~ #tabs .parent1 {
    opacity:1;
}
#parent2:target ~ #tabs .parent2 {
    opacity:1;
}
#parent3:target ~ #tabs .parent3 {
    opacity:1;
}
#child1:target ~ #tabs .child1 {
    opacity:1;
}
#child2:target ~ #tabs .child2 {
    opacity:1;
}
#subchild1:target ~ #tabs .subchild1 {
    opacity:1;
}


.slider {
    background-color: #FFFFFF;
    border: 1px solid #000000;
    margin: 50px auto;
    overflow: hidden;
    padding: 10px;
    position: relative;
    width: 200px;
}
.slider span {
    display:none
}
#tabs {
    background-color: #FFFFFF;
    margin-left: 0;
    overflow: hidden;
    width: 2000px;
    -moz-transition: 0.5s;
    -ms-transition: 0.5s;
    -o-transition: 0.5s;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
#tabs dl {
    float: left;
    height: 300px;
    margin: 0;
    opacity: 0;
    padding: 0;
    position: relative;
    width: 200px;
}
#tabs dl:first-child {
    opacity:1;
}
#tabs dl dd a.fwd {
    background-color:#C8CEFF;
}
#tabs dl dd a {
    background-color: #F4F5FE;
    color: #000000;
    display: block;
    font-size: 18px;
    line-height: 32px;
    margin: 10px;
    text-align: center;
    text-decoration: none;
    border-radius:10px;
    -moz-border-radius:10px;
    -ms-border-radius:10px;
    -o-border-radius:10px;
    -webkit-border-radius:10px;
    box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -moz-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -ms-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -o-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -webkit-box-shadow:0px 0px 7px rgba(0,0,0,0.4) inset, 0px 0px 0px 4px rgba(255,255,255,0.1);
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
#tabs dl dd:first-child {
    height: 250px;
    overflow: auto;
    border-radius:5px;
    -moz-border-radius:5px;
    -ms-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
}
#tabs dl dd a:hover {
    box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
    -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5);
}
#root:target ~ #tabs {
    margin-left:0;
}
#parent1:target ~ #tabs {
    margin-left:-200px;
}
#parent2:target ~ #tabs {
    margin-left:-400px;
}
#parent3:target ~ #tabs {
    margin-left:-600px;
}
#child1:target ~ #tabs {
    margin-left:-800px;
}
#child2:target ~ #tabs {
    margin-left:-1000px;
}
#subchild1:target ~ #tabs {
    margin-left:-1200px;
}
#parent1:target ~ #tabs .parent1 {
    opacity:1;
}
#parent2:target ~ #tabs .parent2 {
    opacity:1;
}
#parent3:target ~ #tabs .parent3 {
    opacity:1;
}
#child1:target ~ #tabs .child1 {
    opacity:1;
}
#child2:target ~ #tabs .child2 {
    opacity:1;
}
#subchild1:target ~ #tabs .subchild1 {
    opacity:1;
}

现场演示

结论 (Conclusion)

Looks great, isn’t it? If you have got any good ideas you would like to share, be sure to drop those in the comments as well. Good luck!

看起来不错，不是吗？如果您有任何想分享的好主意，请确保也将其删除。祝好运！

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

css3 滑块

cuken7684698822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 滑块_纯CSS3滑块

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...
复制链接

扫一扫