找回密码
当前位置：前端开发者 > CSS > 正文

前端开发 纯CSS实现网页轮播图切换！

2018-07-04 分类：CSS 阅读(1223) 评论(0)

c#web前端开发工程师|前端开发人员还需要看什么书？|安卓开发 什么是前端？

代码：

<!DOCTYPE html>
<html class=”no-js” lang=””>
<head>
    <meta charset=”utf-8″>
    <meta http-equiv=”x-ua-compatible” content=”ie=edge”>
    <title>web前端开发主要是些什么：轮播图</title>
    <meta name=”description” content=””>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <style type=”text/css”>
        html,
        body {
            margin: 0px;
            padding: 0px;
        }
        .carousel {
            position: relative;
            box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.64);
            margin-top: 26px;
        }
        .carousel-inner {
            position: relative;
            overflow: hidden;
            width: 100%;
        }
        .carousel-open:checked+.carousel-item {
            position: static;
            opacity: 100;
        }
        .carousel-item {
            position: absolute;
            opacity: 0;
            -webkit-transition: opacity 0.6s ease-out;
            transition: opacity 0.6s ease-out;
        }
        .carousel-item img {
            display: block;
            height: auto;
            max-width: 100%;
        }
        .carousel-control {
            background: rgba(0, 0, 0, 0.28);
            border-radius: 50%;
            color: #fff;
            cursor: pointer;
            display: none;
            font-size: 40px;
            height: 40px;
            line-height: 35px;
            position: absolute;
            top: 50%;
            -webkit-transform: translate(0, -50%);
            cursor: pointer;
            -ms-transform: translate(0, -50%);
            transform: translate(0, -50%);
            text-align: center;
            width: 40px;
            z-index: 10;
        }
        .carousel-control.prev {
            left: 2%;
        }
        .carousel-control.next {
            right: 2%;
        }
        .carousel-control:hover {
            background: rgba(0, 0, 0, 0.8);
            color: #aaaaaa;
        }
        #carousel-1:checked~.control-1,
        #carousel-2:checked~.control-2,
        #carousel-3:checked~.control-3 {
            display: block;
        }
        .carousel-indicators {
            list-style: none;
            margin: 0;
            padding: 0;
            position: absolute;
            bottom: 2%;
            left: 0;
            right: 0;
            text-align: center;
            z-index: 10;
        }
        .carousel-indicators li {
            display: inline-block;
            margin: 0 5px;
        }
        .carousel-bullet {
            color: #fff;
            cursor: pointer;
            display: block;
            font-size: 35px;
        }
        .carousel-bullet:hover {
            color: #aaaaaa;
        }
        #carousel-1:checked~.control-1~.carousel-indicators li:nth-child(1) .carousel-bullet,
        #carousel-2:checked~.control-2~.carousel-indicators li:nth-child(2) .carousel-bullet,
        #carousel-3:checked~.control-3~.carousel-indicators li:nth-child(3) .carousel-bullet {
            color: #428bca;
        }
        #title {
            width: 100%;
            position: absolute;
            padding: 0px;
            margin: 0px auto;
            text-align: center;
            font-size: 27px;
            color: rgba(255, 255, 255, 1);
            font-family: ‘Open Sans’, sans-serif;
            z-index: 9999;
            text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.33), -1px 0px 2px rgba(255, 255, 255, 0);
        }
        .carousel-item .imgs {
            display: block;
            width: 100%;
            height: 80vh;
        }
        .imgs1 {
            background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
        }
        .imgs2 {
            background-image: -webkit-gradient(linear, left bottom, left top, from(#a18cd1), to(#fbc2eb));
            background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
        }
        .imgs3 {
            background-image: -webkit-gradient(linear, left bottom, left top, from(#fad0c4), to(#ffd1ff));
            background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
        }
    </style>
</head>
<body>
    <div class=”carousel”>
        <div class=”carousel-inner”>
            <input class=”carousel-open” type=”radio” id=”carousel-1″ name=”carousel” aria-hidden=”true” hidden=”” checked=”checked”>
            <div class=”carousel-item”>
                <div class=”imgs imgs1″></div>
            </div>
            <input class=”carousel-open” type=”radio” id=”carousel-2″ name=”carousel” aria-hidden=”true” hidden=””>
            <div class=”carousel-item”>
                <div class=”imgs imgs2″></div>
            </div>
            <input class=”carousel-open” type=”radio” id=”carousel-3″ name=”carousel” aria-hidden=”true” hidden=””>
            <div class=”carousel-item”>
                <div class=”imgs imgs3″></div>
            </div>
            <label for=”carousel-3″ class=”carousel-control prev control-1″>‹</label>
            <label for=”carousel-2″ class=”carousel-control next control-1″>›</label>
            <label for=”carousel-1″ class=”carousel-control prev control-2″>‹</label>
            <label for=”carousel-3″ class=”carousel-control next control-2″>›</label>
            <label for=”carousel-2″ class=”carousel-control prev control-3″>‹</label>
            <label for=”carousel-1″ class=”carousel-control next control-3″>›</label>
            <ol class=”carousel-indicators”>
                <li>
                    <label for=”carousel-1″ class=”carousel-bullet”>•</label>
                </li>
                <li>
                    <label for=”carousel-2″ class=”carousel-bullet”>•</label>
                </li>
                <li>
                    <label for=”carousel-3″ class=”carousel-bullet”>•</label>
                </li>
            </ol>
        </div>
    </div>
</body>
</html>

前端开发需要用什么软件下载？|开发 前端 测试干什么？|网页设计为什么要懂前端开发

赞(0)
前端开发者 » 前端开发 纯CSS实现网页轮播图切换！
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论