css3之target选择器

最新推荐文章于 2024-06-13 21:20:19 发布

szwhjz8451

最新推荐文章于 2024-06-13 21:20:19 发布

阅读量710

点赞数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }
        .clearfix:after {
            content: " ";
            display: block;
            clear: both;
            height: 0;
        }
        .clearfix {
            zoom: 1;
        }
        .container{
            position: absolute;
            width: 100%;
            bottom: 100px;
            text-align: center;
            z-index: 999;
        }
        .list li{
            display: inline-block;
            width: 174px;
            border: 2px solid #fff;
            font-size: 22px;
            border-radius: 5px;
            margin-right: 10px;
            vertical-align: top;
        }
        .list li a{
            color: #fff;
            padding-top: 70px;
            padding-bottom: 20px;
            text-decoration: none;
            display: block;
            position: relative;
        }
        .list li a:after{
            content: '';
            display: block;
            position: absolute;
            width: 120px;
            height: 120px;
            left: 50%;
            margin-left: -60px;
            top:-80px;
            border-radius: 50%;
            border: 2px solid #fff;
            background: url("img/sbg1.jpg") no-repeat center;
        }
        .list li:nth-of-type(1) a{
            background: #02646e;
        }
        .list li:nth-of-type(2) a{
            background: #eb0837;
        }
        .list li:nth-of-type(3) a{
            background: #67b374;
        }
        .list li:nth-of-type(4) a{
            background: #e6674a;
        }
        .list li:nth-of-type(5) a{
            background: #e61061;
        }
        .list li:nth-of-type(2) a:after{
            background-image:url("img/sbg2.jpg");
        }
        .list li:nth-of-type(3) a:after{
            background-image:url("img/sbg3.jpg");
        }
        .list li:nth-of-type(4) a:after{
            background-image:url("img/sbg4.jpg");
        }
        .list li:nth-of-type(5) a:after{
            background-image:url("img/sbg5.jpg");
        }
        .bg{
            position: fixed;
            width: 100%;
            height: 100%;
            z-index: 9;
        }
        /*slideLeft*/
        @-webkit-keyframes slideLeft
        {
            0%{
                left: -100%;
            }
            100%{
                left: 0;
            }
        }
        .slideLeft:target{
            z-index: 99;
            animation:slideLeft 1s 1;
            -webkit-animation:slideLeft 1s 1;
        }
        /*slideBottom*/
        @-webkit-keyframes slideBottom
        {
            0%{
                top:100%;
            }
            100%{
                top:0;
            }
        }
        .slideBottom:target{
            z-index: 99;
            animation:slideBottom 1s 1;
            -webkit-animation:slideBottom 1s 1;
        }
        /*zoomIn*/
        @-webkit-keyframes zoomIn {
            0% {
                -webkit-transform: scale(0.1);
            }
            100% {
                -webkit-transform: none;
            }
        }
        .zoomIn:target {
            z-index: 100;
            -webkit-animation: zoomIn 1s 1;
            animation: zoomIn 1s 1;
        }
        /*zoomOut*/
        @-webkit-keyframes zoomOut {
            0% {
                -webkit-transform: scale(2);
            }
            100% {
                -webkit-transform: none;
            }
        }
        .zoomOut:target {
            z-index: 100;
            -webkit-animation: zoomOut 1s 1;
            animation: zoomOut 1s 1;

        }
        /*rotate*/
        @-webkit-keyframes rotate {
            0% {
                -webkit-transform: rotate(-360deg) scale(0.1);
            }
            100% {
                -webkit-transform: none;
            }
        }
        .rotate:target {
            z-index: 100;
            -webkit-animation: rotate 1s 1;
            animation: rotate 1s 1;

        }
    </style>
<body>
    <div class="container">
        <ul class="list clearfix">
            <li>
                <a href="#bg1">Hipster Fashion Haircut</a>
            </li>
            <li>
                <a href="#bg2">Cloud Computing Services & Consulting</a>
            </li>
            <li>
                <a href="#bg3">My haire is sooo fantastic!</a>
            </li>
            <li>
                <a href="#bg4">Eat healthy & excersice!</a>
            </li>
            <li>
                <a href="#bg5">Lips so kissable I could die ...</a>
            </li>
        </ul>
    </div>
    <img src="img/bg1.jpg" class="bg slideLeft" id="bg1" />
    <img src="img/bg2.jpg" class="bg slideBottom" id="bg2" />
    <img src="img/bg3.jpg" class="bg zoomIn" id="bg3" />
    <img src="img/bg4.jpg" class="bg zoomOut" id="bg4" />
    <img src="img/bg5.jpg" class="bg rotate" id="bg5" />
</body>
</html>

szwhjz8451

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css3之target选择器

html>html lang="en">head> meta charset="UTF-8"> title>Titletitle> style> *{ margin: 0; padding: 0; list-style: none; box-sizing: b
复制链接

扫一扫