前端練習二

特效按鈕效果

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="buttons.css">
</head>
<body>
    <div class="container">
        <button class="btn btn1">Hover Me</button>
        <button class="btn btn2">Hover Me</button>
        <button class="btn btn3">Hover Me</button>
        <button class="btn btn4">Hover Me</button>
    </div>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
}

.container{
    margin-top: 360px;
    text-align: center;
}

.btn{
    padding: 10px 20px;
    border: 1px solid #3498db;
    background: none;
    font-size: 20px;
    margin: 10px;
    cursor: pointer;
    transition: .8s;
    position: relative;
    overflow: hidden;
}

.btn1,.btn2{
    color: #3498db;
}

.btn3,.btn4{
    color: #ffffff;
}

.btn1:hover,.btn2:hover{
    color: #ffffff;
}

.btn3:hover,.btn4:hover{
    color: #3498db;
}

.btn:before{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 0%;
    background-color: #3498db;
    z-index: -1;
    transition: .8s;
}

.btn1:before,.btn3:before{
    top: 0;
    border-radius: 0 0 50% 50%;
}

.btn2:before,.btn4:before{
    bottom: 0;
    border-radius: 50% 50% 0 0;
}

.btn3:before,.btn4:before{
    height: 180%;
}

.btn1:hover::before,.btn2:hover::before{
    height: 180%;
}

.btn3:hover::before,.btn4:hover::before{
    height: 0%;
}

回到頭部按鈕

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="back.css">
    <link rel="stylesheet" >
</head>
<body>

    <section></section>
    <a class="gotopbtn" href="#"><i class="fa fa-arrow-up"></i></a>

</body>
</html>

css代碼

html{
    scroll-behavior: smooth;
}

body{
    margin: 0;
    padding: 0;
}

section{
    width: 100%;
    height: 300vh;
    background: url("https://picsum.photos/id/1015/1000/800") no-repeat center;
    background-size: cover;
}

.gotopbtn{
    position: fixed;
    bottom: 40px;
    right: 50px;
    width: 50px;
    height: 50px;
    background-color: #27ae60;
    text-align: center;
    line-height: 50px;
    color: white;
    text-decoration: none;
    font-size: 22px;
}

帶顯隱的top按鈕

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="top.css">
    <link rel="stylesheet" >
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

</head>
<body>

    <section>

    </section>
    <p>
        There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream what you want to dream;go where you want to go;be what you want to be,because you have only one life and one chance to do all the things you want to do.

        　　May you have enough happiness to make you sweet,enough trials to make you strong,enough sorrow to keep you human,enough hope to make you happy? Always put yourself in others’shoes.If you feel that it hurts you,it probably hurts the other person, too.

        　　The happiest of people don’t necessarily have the best of everything;they just make the most of everything that comes along their way.Happiness lies for those who cry,those who hurt, those who have searched,and those who have tried,for only they can appreciate the importance of people
    </p>
    <button id="topBtn"><i class="fa fa-arrow-up"></i></button>

<script>
    $(function () {
        //事件綁定
        $("#topBtn").click(function () {
            $("html,body").animate({scrollTop:0},800);
        });
        //頁面移動監(jiān)控
        $(window).scroll(function () {
            if($(this).scrollTop() > 40){
                $("#topBtn").fadeIn();
            }else {
                $("#topBtn").fadeOut();
            }
        });
    });
</script>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
}

section{
    width: 100%;
    height: 100vh;
    background: url("https://picsum.photos/id/1015/1000/800") no-repeat center;
    background-size: cover;
}

#topBtn{
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    font-size: 20px;
    background-color: orangered;
    color: white;
    border: none;
    outline: none;
    cursor: pointer;
    display: none;
}

按鈕特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="buttons.css">
    <link rel="stylesheet" >
</head>
<body>
    <div class="middle">
        <a class="btn" href="#">
            <i class="fa fa-facebook-f"></i>
        </a>
        <a class="btn" href="#">
            <i class="fa fa-twitter"></i>
        </a>
        <a class="btn" href="#">
            <i class="fa fa-google"></i>
        </a>
        <a class="btn" href="#">
            <i class="fa fa-instagram"></i>
        </a>
        <a class="btn" href="#">
            <i class="fa fa-youtube"></i>
        </a>
    </div>
</body>
</html>

css代碼

body{
    padding: 0;
    margin: 0;
}

.middle{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
}

.btn{
    display: inline-block;
    width: 90px;
    height: 90px;
    background: #f1f1f1;
    margin: 10px;
    border-radius: 30%;
    box-shadow: 0 5px 15px -5px #00000070;
    color: #3498db;
    overflow: hidden;
    position: relative;
}

.btn i{
    line-height: 90px;
    font-size: 26px;
    transition: .2s linear;
}

.btn:hover i{
    transform: scale(1.3);
    color: #f1f1f1;
}

.btn::before{
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    background-color: #3498db;
    transform: rotate(45deg);
    left: -110%;
    top: 90%;
}

.btn:hover::before{
    animation: aaa 0.7s 1;
    top: -10%;
    left: -10%;
}

@keyframes aaa {
    0%{
        left: -110%;
        top: 90%;
    }
    50%{
        left: 10%;
        top: -30%;
    }
    100%{
        top: -10%;
        left: -10%;
    }
}

響應式列表頁

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="services.css">
    <link rel="stylesheet" >
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
    <div class="services">
        <h1>Our Services</h1>
        <div class="cen">

            <div class="service">
                <i class="fa fa-anchor"></i>
                <h2>Service Name</h2>
                <p>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream </p>
            </div>
            <div class="service">
                <i class="fa fa-angellist"></i>
                <h2>Service Name</h2>
                <p>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream </p>
            </div>
            <div class="service">
                <i class="fa fa-android"></i>
                <h2>Service Name</h2>
                <p>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream </p>
            </div>
            <div class="service">
                <i class="fa fa-apple"></i>
                <h2>Service Name</h2>
                <p>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream </p>
            </div>
            <div class="service">
                <i class="fa fa-archive"></i>
                <h2>Service Name</h2>
                <p>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream </p>
            </div>
            <div class="service">
                <i class="fa fa-briefcase"></i>
                <h2>Service Name</h2>
                <p>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real! Dream </p>
            </div>

        </div>
    </div>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
}

.services{
    background-color: #f1f1f1;
    text-align: center;
}

.services h1{
    display: inline-block;
    text-transform: uppercase;
    font-size: 20px;
    border-bottom: 4px solid #3498db;
    padding-bottom: 10px;
    margin-top: 40px;
}

.cen{
    max-width: 1200px;
    padding: 20px;
    overflow: hidden;
    margin: auto;
}

.service{
    display: inline-block;
    width: calc(100% / 3);
    margin: 0 -2px;
    padding: 20px;
    box-sizing: border-box;
    cursor: pointer;
    transition: .4s;
}

.service:hover{
    background-color: #dddddd;
}

.service i{
    font-size: 34px;
    color: #3498db;
    margin-bottom: 30px;
}

.service h2{
    font-size: 18px;
    text-transform: uppercase;
    font-weight: 500;
    margin: 0;
}

.service p{
    color: gray;
    font-weight: 500;
    font-size: 15px;
}

@media screen and (max-width: 800px){
    .service{
        width: 50%;
    }
}

@media screen and (max-width: 500px){
    .service{
        width: 100%;
    }
}

翻轉效果個人展示

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="3d.css">
    <link rel="stylesheet" >
</head>
<body>

    <div class="card middle">
        <div class="front">
            <img src="https://picsum.photos/id/1018/1000/800" alt="">
        </div>
        <div class="back">
            <div class="back-content middle">
                <h2>DarkCode</h2>
                <span>Youtube Channel</span>
                <div class="sm">
                    <a href="#"><i class="fa fa-facebook-f"></i></a>
                    <a href="#"><i class="fa fa-twitter"></i></a>
                    <a href="#"><i class="fa fa-youtube"></i></a>
                    <a href="#"><i class="fa fa-instagram"></i></a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

css代碼

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body{
    background-color: #333333;
}

.middle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.card{
    width: 340px;
    height: 480px;
    cursor: pointer;
}

.front,.back{
    width: 100%;
    height: 100%;
    overflow: hidden;
    backface-visibility: hidden;
    position: absolute;
    transition: transform .6s linear;
}

.front{
    transform: rotateY(0deg) perspective(600px);
}

.back{
    background-color: #f1f1f1;
    transform: rotateY(180deg) perspective(600px);
}

.back-content{
    width: 100%;
    text-align: center;
    color: #2c3e50;
}

.sm{
    margin: 20px 0;
}

.sm a{
    width: 40px;
    height: 40px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #2c3e50;
    transition: .4s;
    font-size: 18px;
    border-radius: 50%;
}

.sm a:hover{
    background-color: #2c3e50;
    color: white;
}

.card:hover .front{
    transform: rotateY(-180deg) perspective(600px);
}

.card:hover .back{
    transform: rotateY(0deg) perspective(600px);
}

背景圖片漸變動畫

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="grad.css">
</head>
<body>

    <div class="text">
        Gradient Background Animation
    </div>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    background-image: linear-gradient(125deg,#2c3e50,#27ae60,#2980b9,#e74c3c,#8e44ad);
    background-size: 400%;
    animation: bganimation 15s infinite;
}

.text{
    color: white;
    text-align: center;
    text-transform: uppercase;
    margin: 320px auto;
    font-size: 20px;
}

@keyframes bganimation {
    0%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
    100%{
        background-position: 0% 50%;
    }
}

登錄頁切換效果

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <link rel="stylesheet" >
    <link rel="stylesheet" href="form.css">
</head>
<body>

    <div class="show-login-btn"><i class="fa fa-sign-in"></i>Show Login Form</div>

    <div class="login-box">
        <div class="hide-login-btn"><i class="fa fa-times"></i></div>
        <form class="login-form" action="#">
            <h1>Welcome</h1>
            <input class="txtb" type="text" placeholder="Username">
            <input type="password" class="txtb" placeholder="Password">
            <input class="login-btn" type="submit" value="Login">
        </form>
    </div>

<script>
    $(".show-login-btn").click(function () {
        $(".login-box").toggleClass("showed");
    });
    $(".hide-login-btn").click(function () {
        $(".login-box").toggleClass("showed");
    });
</script>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background-color: #333333;
}

.login-box{
    position: absolute;
    left: -100%;
    top: 0;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(45deg,#9fbaa8,#31354c);
    transition: .4s;
}

.login-form{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: white;
}

.login-form h1{
    font-weight: 400;
    margin-top: 0;
}

.txtb{
    display: block;
    box-sizing: border-box;
    width: 240px;
    background-color: #ffffff88;
    border: 1px solid white;
    padding: 10px 20px;
    color: white;
    outline: none;
    margin: 10px 0;
    border-radius: 6px;
    text-align: center;
}

.login-btn{
    width: 240px;
    display: block;
    background-color: #2c3e50;
    border: 0;
    color:white;
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
}

.hide-login-btn{
    color: #000;
    position: absolute;
    top: 40px;
    right: 40px;
    opacity: .7;
    cursor: pointer;
![localhost_63343_blog_test2_text.html.png](https://upload-images.jianshu.io/upload_images/17865672-14ab3980af180fcf.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
    font-size: 24px;
}

.show-login-btn{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    color: white;
    border: 2px solid;
    padding: 10px;
    cursor: pointer;
}

.showed{
    left: 0;
}

收縮菜單

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="text.css">
    <link rel="stylesheet" >
</head>
<body>
    <div class="middle">
        <div class="menu">

            <li class="item" id="profile">
                <a href="#profile" class="btn"><i class="fa fa-user"></i> Profile</a>
                <div class="smenu">
                    <a href="#">Posts</a>
                    <a href="#">Picture</a>
                </div>
            </li>
            <li class="item" id="message">
                <a href="#message" class="btn"><i class="fa fa-envelope"></i> Message</a>
                <div class="smenu">
                    <a href="#">News</a>
                    <a href="#">Sent</a>
                    <a href="#">Spam</a>
                </div>
            </li>
            <li class="item" id="settings">
                <a href="#settings" class="btn"><i class="fa fa-cog"></i> Settings</a>
                <div class="smenu">
                    <a href="#">Password</a>
                    <a href="#">Language</a>
                </div>
            </li>
            <li class="item" id="logout">
                <a href="#" class="btn"><i class="fa fa-sign-out"></i> Logout</a>
            </li>

        </div>
    </div>
</body>
</html>

css代碼

*{
    margin: 0;
    padding: 0;
}

li{
    list-style: none;
}

a{
    text-decoration: none;
}

.middle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.menu{
    width: 300px;
    border-radius: 8px;
    overflow: hidden;
}

.item{
    border-top: 1px solid #2980b9;
    overflow: hidden;
}

.btn{
    display: block;
    padding: 16px 20px;
    background-color: #3498db;
    color: white;
    position: relative;
}

.btn::before{
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background-color: #3498db;
    left: 20px;
    bottom: -7px;
    transform: rotate(45deg);
}

.btn i{
    margin-right: 10px;
}

.smenu{
    background-color: #333333;
    overflow: hidden;
    transition: max-height 0.3s;
    max-height: 0px;
}

.smenu a{
    display: block;
    padding: 16px 26px;
    color: white;
    font-size: 14px;
    margin: 4px 0;
    position: relative;
}

.smenu a::before{
    content: "";
    width: 6px;
    height: 100%;
    background-color: #3498db;
    position: absolute;
    left: 0;
    top: 0;
    transition: .6s;
    opacity: 0;
}

.smenu a:hover::before{
    opacity: 1;
}

.item:target .smenu{
    max-height: 10em;
}

背景圖模糊特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="cover.css">
</head>
<body>

    <div class="middle">
        <div class="image">
            <img class="img" src="https://picsum.photos/id/1019/1000/800" alt="">
            <div class="text">This photo may have a violent content</div>
            <button class="btn" onclick="coverImage()">Uncover Image</button>
        </div>
    </div>

<script>

    var btn = document.getElementsByClassName("btn")[0],
        text = document.getElementsByClassName("text")[0],
        img = document.getElementsByClassName("img")[0],
        flag = 0;

    function coverImage() {
        if(flag == 0){
            btn.innerHTML = "Cover Image"
            text.style.display = "none"
            img.style.filter = "blur(0)"
            flag = 1
        }else{
            btn.innerHTML = "Uncover Image"
            text.style.display = "block"
            img.style.filter = "blur(24px)"
            flag = 0
        }
    }

</script>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
}

.middle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.image{
    width: 450px;
    height: 600px;
    overflow: hidden;
}

.image img{
    width: 100%;
    height: 100%;
    filter: blur(24px);
}

.text{
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
    transform: translate(-50%,-50%);
    color: white;
    font-size: 18px;
    text-shadow: 0 0 10px black;
}

.btn{
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 10px;
    background: rgba(0,0,0,.3);
    color: white;
    border-radius: 6px;
    border: 1px solid white;
    cursor: pointer;
    outline: none;
}

商品大圖展示

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="product.css">
</head>
<body>

    <div class="card">
        <div class="top-section">
            <img src="https://picsum.photos/id/1015/400/320" alt="" class="image-container" id="image-container">
            <div class="nav">
                <img onclick="change(this)" src="https://picsum.photos/id/1016/400/320" alt="">
                <img onclick="change(this)" src="https://picsum.photos/id/1017/400/320" alt="">
                <img onclick="change(this)" src="https://picsum.photos/id/1018/400/320" alt="">
                <img onclick="change(this)" src="https://picsum.photos/id/1019/400/320" alt="">
            </div>
            <div class="price">$80</div>
        </div>
        <div class="product-info">
            <div class="name">Sanglasses</div>
            <div class="dis">Awesome Men Sanglasses</div>
            <a href="#" class="btn">Add to Card</a>
        </div>
    </div>

<script>
    const container = document.getElementById("image-container")
    function change(image) {
        container.src = image.src
    }
</script>
</body>
</html>

css代碼

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body{
    background-color: #6ab04c;
}

.card{
    width: 360px;
    background-color: #f1f1f1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.top-section{
    height: 310px;
    overflow: hidden;
    background-color: #fff;
    position: relative;
}

.image-container{
    width: 360px;
    height: 240px;
}

.nav{
    text-align: center;
}

.nav img{
    width: 80px;
    height: 50px;
    border: 1px solid #ddd;
    margin: 8px 2px;
    cursor: pointer;
    transition: .3s;
}

.nav img:hover{
    border-color: #6ab04c;
}

.price{
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 24px;
    color: white;
}

.product-info{
    padding: 24px;
}

.name{
    text-transform: uppercase;
    font-size: 24px;
    color: #333;
}

.dis{
    font-size: 16px;
    opacity: .7;
}

.btn{
    display: block;
    background-color: #6ab04c;
    color: white;
    text-align: center;
    padding: 10px;
    margin-top: 10px;
    transition: .3s;
}

.btn:hover{
    background-color: #333;
}

加載特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="loading.css">
</head>
<body>

    <div class="loading">
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
        <div class="obj"></div>
    </div>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background-color: #2980b9;
}

.loading{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    height: 40px;
    display: flex;
    align-items: center;
}

.obj{
    width: 6px;
    height: 40px;
    background-color: white;
    margin: 0 3px;
    border-radius: 10px;
    animation: loading 0.8s infinite;
    transform-origin: bottom;
}

.obj:nth-child(2){
    animation-delay: 0.1s;
}

.obj:nth-child(3){
    animation-delay: 0.2s;
}

.obj:nth-child(4){
    animation-delay: 0.3s;
}

.obj:nth-child(5){
    animation-delay: 0.4s;
}

.obj:nth-child(6){
    animation-delay: 0.5s;
}

.obj:nth-child(7){
    animation-delay: 0.6s;
}

.obj:nth-child(8){
    animation-delay: 0.7s;
}

@keyframes loading {
    0%{
        height: 0;
    }
    50%{
        height: 40px;
    }
    100%{
        height: 0;
    }
}

彈窗特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" >
    <link rel="stylesheet" href="modal.css">
</head>
<body>
    <div class="modal">
        <img src="https://picsum.photos/id/1015/1000/800" alt="">
        <div class="content">
            <h1>Awesome Modal</h1>
            <p>Hooray! It's snowing! It's time to make a snowman.</p>
            <a href="#">Read More</a>
        </div>
        <div onclick="hideModal()" class="hide fa fa-times"></div>
    </div>
    <a onclick="showModal()" class="btn" href="#">Show Modal</a>

<script>
    var modal = document.getElementsByClassName("modal")[0]
    function showModal() {
        modal.style.bottom = "20px"
    }
    function hideModal() {
        modal.style.bottom = "-3000px"
    }
</script>
</body>
</html>

css代碼

*{
    text-decoration: none;
}

body{
    margin: 0;
    padding: 0;
}

.modal{
    width: 500px;
    height: 200px;
    overflow: hidden;
    background-color: #34495e;
    position: fixed;
    right: 20px;
    bottom: -3000px;
    display: flex;
    transition: 1s;
}

.modal img{
    width: 200px;
    height: 200px;
}

.modal .content{
    color: white;
    box-sizing: border-box;
    padding: 20px;
}

.content h1{
    font-size: 20px;
}

.content p{
    font-size: 15px;
}

.content a{
    display: inline-block;
    padding: 10px 30px;
    background-color: #e74c3c;
    border-radius: 8px;
    color: white;
}

.hide{
    position: absolute;
    right: 14px;
    top: 14px;
    z-index: 999;
    font-size: 20px;
    color: black;
    opacity: 0.7;
    transition: .3s;
    cursor: pointer;
}

.hide:hover{
    transform: rotate(90deg);
}

.btn{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #e74c3c;
    padding: 10px 20px;
    border: 2px solid;
    border-radius: 8px;
}

開關特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="modal.css">
</head>
<body>
    <div class="middle">
        <div class="mouse"></div>
    </div>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background-color: #e74c3c;
}

.middle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.mouse{
    width: 100px;
    height: 180px;
    border: 4px solid #333333;
    border-radius: 60px;
}

.mouse::before{
    content: "";
    width: 25px;
    height: 25px;
    position: absolute;
    top: 30px;
    background-color: black;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    opacity: 1;
    animation: mouse 2s infinite;
}

@keyframes mouse {
    from{
        opacity: 1;
        top: 30px;
    }
    to{
        opacity: 0;
        top: 150px;
    }
}

點贊特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="modal.css">
    <link rel="stylesheet" >

</head>
<body>
    <div class="container">
        <img src="https://picsum.photos/id/1015/1000/800" alt="">
        <input type="checkbox">
        <div class="heart">
            <i class="fa fa-heart"></i>
        </div>
    </div>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
}

.container{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    transform: translate(-50%,-50%);
    overflow: hidden;
}

.container img{
    width: 100%;
}

.container .heart{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) scale(0);
    color: #f1f1f1;
    font-size: 100px;
    transition: .3s;
}

.container input{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    opacity: 0;
    cursor: pointer;
}

.container:hover .heart{
    transform: translate(-50%,-50%) scale(1);
}

.container input:checked + .heart{
    color: #e74c3c;
}

搜索框特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="search.css">
</head>
<body>

    <div class="middle">
        <form action="#" class="search-box">
            <input type="text" class="input">
            <button type="button" class="btn" name="btn"></button>
        </form>
    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $(".btn").click(function () {
            $(".input").toggleClass("inclicked");
            $(".btn").toggleClass("close");
        });
    </script>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background: #2ecc71;
}

.middle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.input{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    outline: none;
    background: none;
    border: 4px solid #ffffff;
    box-sizing: border-box;
    transition: width 0.4s ease-in-out,
                border-radius 0.8s ease-in-out,
                padding 0.2s;
    transition-delay: .4s;
    color: white;
    font-size: 20px;
}

.inclicked{
    width: 360px;
    border-radius: 0;
    padding: 0 15px;
    padding-right: 40px;
}

.btn{
    position: absolute;
    right: 0;
    top: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
}

.btn::before{
    content: "";
    width: 4px;
    height: 25px;
    background: white;
    position: absolute;
    transform: rotate(-45deg);
    bottom: -16px;
    right: -6px;
    transition: .3s;
}

.close::before,.close::after{
    content: "";
    width: 4px;
    height: 34px;
    background: white;
    position: absolute;
    bottom: 12px;
    right: 28px;
}

.close::before{
    transform: rotate(-45deg);
}

.close::after{
    transform: rotate(45deg);
}

背景圖片帶剪切效果

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="hero.css">
</head>
<body>

    <div class="header">
        <h1>DarkCode</h1>
        <h2>Stande Hero Backgroud</h2>
    </div>
    <p>
        Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening, James opens the door. What does he see? The snowman is moving! James invites him in. The snowman has never been inside a house. He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air! They are flying! What a wonderful night!The next morning, James jumps out of bed
    </p>
    <p>
        Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening, James opens the door. What does he see? The snowman is moving! James invites him in. The snowman has never been inside a house. He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air! They are flying! What a wonderful night!The next morning, James jumps out of bed
    </p>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
}

.header{
    width: 100%;
    height: 500px;
    background: url("https://picsum.photos/id/1015/1000/800") no-repeat;
    background-size: cover;
    overflow: hidden;
    clip-path: polygon(0 0,100% 0,100% 100%, 0 94%);
}

.header h1{
    text-align: center;
    color: white;
    margin-top: 100px;
    text-transform: uppercase;
    font-size: 60px;
    letter-spacing: 14px;
    margin-bottom: 10px;
}

.header h2{
    color: white;
    text-align: center;
    font-size: 30px;
    margin: 0;
}

p{
    padding: 0 14px;
    text-align: justify;
}

按鈕效果

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="buttons.css">
</head>
<body>

    <div class="middle">
        <a href="#" class="btn btn1">Hover Me</a>
        <a href="#" class="btn btn2">Hover Me</a>
        <a href="#" class="btn btn3">Hover Me</a>
        <a href="#" class="btn btn4">Hover Me</a>
    </div>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background-color: #2d3436;
}

.middle{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.btn{
    position: relative;
    display: block;
    color: white;
    font-size: 14px;
    text-decoration: none;
    margin: 30px 0;
    border: 2px solid #ff7675;
    padding: 14px 60px;
    text-transform: uppercase;
    overflow: hidden;
    transition: 1s all ease;
}

.btn::before{
    content: "";
    background-color: #ff7675;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    transition: all 0.6s ease;
}

.btn1::before{
    width: 0;
    height: 100%;
}

.btn1:hover::before{
    width: 100%;
}

.btn2::before{
    width: 100%;
    height: 0;
}

.btn2:hover::before{
    height: 100%;
}

.btn3::before{
    transform: translate(-50%,-50%) rotate(45deg);
    width: 100%;
    height: 0;
}

.btn3:hover::before{
    height: 400%;
}

.btn4::before{
    transform: translate(-50%,-50%) rotate(-45deg);
    width: 100%;
    height: 0;
}

.btn4:hover::before{
    height: 400%;
}

響應式聯系我

效果圖

聯系我

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="contact.css">
</head>
<body>

    <form action="#" class="contact-form">
        <h1>Contact Us</h1>
        <div class="txtb">
            <label for="#">Full Name :</label>
            <input type="text" placeholder="Enter Your Name">
        </div>
        <div class="txtb">
            <label for="#">Email :</label>
            <input type="text" placeholder="Enter Your Email">
        </div>
        <div class="txtb">
            <label for="#">Phone Number :</label>
            <input type="text" placeholder="Enter Your Phone Number">
        </div>
        <div class="txtb">
            <label for="#">Message :</label>
            <textarea></textarea>
        </div>
        <a href="#" class="btn">Send</a>
    </form>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background: url("https://picsum.photos/id/1018/1000/800") no-repeat;
    background-size: cover;
    height: 100vh;
}

.contact-form{
    width: 85%;
    max-width: 600px;
    background-color: #f1f1f1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 30px 40px;
    box-sizing: border-box;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 0 20px #000000b3;
}

.contact-form h1{
    margin-top: 0;
    font-weight: 200;
}

.txtb{
    border: 1px solid gray;
    margin: 8px 0;
    padding: 12px 18px;
    border-radius: 8px;
}

.txtb label{
    display: block;
    text-align: left;
    color: #333333;
    text-transform: uppercase;
    font-size: 14px;
}

.txtb input,.txtb textarea{
    width: 100%;
    margin-top: 6px;
    border: none;
    outline: none;
    background: none;
    font-size: 18px;
}

.btn{
    display: block;
    background-color: #9b59b6;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    padding: 14px 0;
    cursor: pointer;

}

個人介紹

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" >
    <link rel="stylesheet" href="testimonial.css">
</head>
<body>

    <div class="testimonials">
        <h1>testimonials</h1>
        <div class="pic">
            <img src="https://picsum.photos/id/1018/400/400" alt="">
            <i class="fa fa-quote-right icon"></i>
        </div>
        <h2>Melioas</h2>
        <p>There are moments in life when you miss someone so much that you just want to pick them from your dreams and hug them for real</p>
    </div>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    height: 100vh;
}

.testimonials{
    background: #0a1116;
    padding: 40px;
    text-align: center;
}

.testimonials h1{
    color: white;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.pic{
    width: 160px;
    height: 160px;
    position: relative;
    margin: auto;
}

.pic img{
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.icon{
    color: #f1f1f1;
    position: absolute;
    left: -17px;
    top: 0;
    font-size: 60px;
}

.testimonials h2{
    color: gray;
    text-transform: uppercase;
}

.testimonials p{
    width: 600px;
    margin: auto;
    color: #f1f1f1;
}

氣泡效果

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bubbels.css">
</head>
<body>

    <div class="bubbels">
        <div class="bubel"></div>
        <div class="bubel"></div>
        <div class="bubel"></div>
        <div class="bubel"></div>
        <div class="bubel"></div>
        <div class="bubel"></div>
        <div class="bubel"></div>
        <div class="bubel"></div>
        <div class="bubel"></div>
        <div class="bubel"></div>
    </div>

</body>
</html>

css代碼

body,html{
    width: 100%;
    height: 100%;
}

body{
    margin: 0;
    padding: 0;
    background: #9b59b6;
}

.bubbels{
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 0;
    overflow: hidden;
    top: 0;
    left: 0;
}

.bubel{
    position: absolute;
    bottom: 0;
    background-color: white;
    border-radius: 50%;
    opacity: 0.5;
    animation: flying 10s infinite ease-in;
}

.bubel:nth-child(1){
    width: 40px;
    height: 40px;
    left: 10%;
    animation-duration: 8s;
}

.bubel:nth-child(2){
    width: 20px;
    height: 20px;
    left: 20%;
    animation-duration: 5s;
    animation-delay: 1s;
}

.bubel:nth-child(3){
    width: 50px;
    height: 50px;
    left: 35%;
    animation-duration: 10s;
    animation-delay: 2s;
}

.bubel:nth-child(4){
    width: 80px;
    height: 80px;
    left: 50%;
    animation-duration: 7s;
    animation-delay: 0s;
}

.bubel:nth-child(5){
    width: 35px;
    height: 35px;
    left: 55%;
    animation-duration: 6s;
    animation-delay: 1s;
}

.bubel:nth-child(6){
    width: 45px;
    height: 45px;
    left: 65%;
    animation-duration: 8s;
    animation-delay: 3s;
}

.bubel:nth-child(7){
    width: 25px;
    height: 25px;
    left: 75%;
    animation-duration: 7s;
    animation-delay: 2s;
}

.bubel:nth-child(8){
    width: 80px;
    height: 80px;
    left: 80%;
    animation-duration: 6s;
    animation-delay: 1s;
}

.bubel:nth-child(9){
    width: 15px;
    height: 15px;
    left: 70%;
    animation-duration: 9s;
    animation-delay: 0s;
}

.bubel:nth-child(10){
    width: 50px;
    height: 50px;
    left: 85%;
    animation-duration: 5s;
    animation-delay: 3s;
}

@keyframes flying {
    0%{
        bottom: -100px;
        transform: translateX(0);
    }
    50%{
        transform: translateX(100px);
    }
    100%{
        bottom: 1024px;
        transform: translateX(-200px);
    }
}

滾動特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" >
    <link rel="stylesheet" href="sliders.css">
</head>
<body>

    <div class="slider">
        <div class="sliders">
            <div class="slide">
                <img src="https://picsum.photos/id/1015/600/300" alt="">
            </div>
            <div class="slide">
                <img src="https://picsum.photos/id/1016/600/300" alt="">
            </div>
            <div class="slide">
                <img src="https://picsum.photos/id/1019/600/300" alt="">
            </div>
            <div class="slide">
                <img src="https://picsum.photos/id/1018/600/300" alt="">
            </div>
        </div>
        <div class="btnLeft fa fa-chevron-left" onclick="goLeft()"></div>
        <div class="btnRight fa fa-chevron-right" onclick="goRight()"></div>
    </div>

<script>
    var sliders = document.getElementsByClassName("slide")
    var index = 0
    function goLeft() {
        if(index == sliders.length - 1){
            index = 0
        }else {
            index++
        }
        sliders[0].style.marginLeft = -600 * index + "px";
    }

    function goRight() {
        if(index == 0){
            index = sliders.length -1
        }else{
            index--
        }
        sliders[0].style.marginLeft = -600 * index + "px";
    }
    setInterval(goRight,3000)
</script>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
}

.slider{
    position: relative;
    margin: auto;
    width: 600px;
    height: 300px;
    overflow: hidden;
}

.sliders{
    width: 2400px;
    display: flex;
}

.slide{
    width: 600px;
    transition: .6s;
}

.btnLeft,.btnRight{
    width: 60px;
    height: 300px;
    line-height: 300px !important;
    position: absolute;
    top: 0;
    text-align: center;
    font-size: 40px;
    cursor: pointer;
    transition: .3s;
}

.btnLeft:hover,.btnRight:hover{
    background: #000000b3;
}

.btnLeft{
    left: 0;
}

.btnRight{
    right: 0;
}

按鈕特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" >
    <link rel="stylesheet" href="buttons.css">
</head>
<body>

    <div class="s-m">
        <a href="#"><i class="fa fa-facebook"></i></a>
        <a href="#"><i class="fa fa-twitter"></i></a>
        <a href="#"><i class="fa fa-google-plus"></i></a>
        <a href="#"><i class="fa fa-youtube"></i></a>
        <a href="#"><i class="fa fa-instagram"></i></a>
    </div>

</body>
</html>

css代碼

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body{
    background: #f1f1f1;
}

.s-m{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.s-m a{
    display: inline-flex;
    width: 40px;
    height: 40px;
    background: #2c3e50;
    color: white;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    margin: 0 6px;
    transition: .6s;
    font-size: 22px;
}

.s-m a:hover{
    background-color: #e67e22;
}

.s-m i{
    transition: .4s all;
}

.s-m a:hover i{
    transform: scale(1.6) rotate(25deg);
}

倒計時特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="time.css">
</head>
<body>

    <div class="container">
        <h1>DarkCode</h1>
        <h2>We are coming soon.</h2>
        <div class="count">

            <div class="countd">
                <span id="days">00</span>
                DAYS
            </div>
            <div class="countd">
                <span id="hours">00</span>
                HOURS
            </div>
            <div class="countd">
                <span id="minutes">00</span>
                MINUTES
            </div>
            <div class="countd">
                <span id="seconds">00</span>
                SECONDS
            </div>

        </div>
    </div>

<script>
    var count = new Date("2020,4,19,00:00:00").getTime()
    var x = setInterval(function () {
        var now = new Date().getTime()
        var d = count - now
        var days = Math.floor(d/(1000*60*60*24))
        var hours = Math.floor((d%(1000*60*60*24))/(1000*60*60))
        var minutes = Math.floor((d%(1000*60*60))/(1000*60))
        var seconds = Math.floor((d%(1000*60))/(1000))
        document.getElementById("days").innerHTML = days
        document.getElementById("hours").innerHTML = hours
        document.getElementById("minutes").innerHTML = minutes
        document.getElementById("seconds").innerHTML = seconds
        if(d <= 0 ){
            clearInterval(x)
        }
    },1000)
</script>
</body>
</html>

css代碼

html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body{
    background: url("https://picsum.photos/id/1015/1000/800") 50% 50%;
    background-size: cover;
}

.container{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
    color: white;
}

.container h1{
    text-transform: uppercase;
    font-size: 60px;
    letter-spacing: 10px;
    margin: 0;
}

.container h2{
    font-size: 20px;
    margin: 0;
    font-weight: 500;
    font-style: italic;
}

.count{
    margin: 40px 0;
}

.countd{
    width: 80px;
    height: 80px;
    border: 2px solid;
    display: inline-block;
    font-size: 12px;
    border-radius: 50%;
    overflow: hidden;
}

.countd span{
    display: block;
    font-size: 26px;
    margin-top: 14px;
}

進度條特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="progress.css">
</head>
<body>

    <div class="skills">
        <h1>My Skills</h1>
        <li>
            <h3>HTML5</h3><span class="bar"><span class="html"></span></span>
        </li>
        <li>
            <h3>CSS3</h3><span class="bar"><span class="css"></span></span>
        </li>
        <li>
            <h3>JQUERY</h3><span class="bar"><span class="jquery"></span></span>
        </li>
        <li>
            <h3>JAVASCRIPT</h3><span class="bar"><span class="javascript"></span></span>
        </li>
    </div>

</body>
</html>

css代碼

*{
    list-style: none;
    padding: 0;
}

body{
    background: #333333;
}

.skills{
    width: 500px;
    margin: 60px auto;
    color: white;
}

.skills li{
    margin: 20px 0;
}

.bar{
    display: block;
    height: 2px;
    background-color: #353b48;
    border: 1px solid rgba(0,0,0,0.3);
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 10px #2187e7b3;
}

.bar span{
    height: 2px;
    float: left;
    background-color: #2187e7;
}

.html{
    width: 90%;
    animation: html 2s;
}

@keyframes html {
    0%{
        width: 0;
    }
    100%{
        width: 90%;
    }
}

.css{
    width: 65%;
    animation: css 2s;
}

@keyframes css {
    0%{
        width: 0;
    }
    100%{
        width: 65%;
    }
}


.jquery{
    width: 50%;
    animation: jquery 2s;
}

@keyframes jquery {
    0%{
        width: 0;
    }
    100%{
        width: 50%;
    }
}

.javascript{
    width: 75%;
    animation: javascript 2s;
}

@keyframes javascript {
    0%{
        width: 0;
    }
    100%{
        width: 75%;
    }
}

時鐘特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="clock.css">
</head>
<body>

    <div class="clock">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <div class="c">
            <div class="shand"></div>
            <div class="bhand">
                <div></div>
            </div>
        </div>
    </div>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    height: 100vh;
    background: url("https://picsum.photos/id/1018/1000/800") no-repeat 50%;
    background-size: cover;
}

.clock{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    height: 600px;
    transform: translate(-50%,-50%);
}

.clock span{
    width: 50px;
    height: 2px;
    color: white;
    position: absolute;
    background-color: white;
}

.clock span:nth-child(1){
    height: 50px;
    width: 2px;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
}

.clock span:nth-child(2){
    right: 148px;
    top: 78px;
    transform: rotate(-60deg);
}

.clock span:nth-child(3){
    right: 54px;
    top: 172px;
    transform: rotate(-30deg);
}

.clock span:nth-child(4){
    top: 50%;
    transform: translateY(-50%);
    right: 14px;
}

.clock span:nth-child(5){
    right: 54px;
    bottom: 172px;
    transform: rotate(30deg);
}

.clock span:nth-child(6){
    right: 148px;
    bottom: 78px;
    transform: rotate(60deg);
}

.clock span:nth-child(7){
    height: 50px;
    width: 2px;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
}

.clock span:nth-child(8){
    left: 148px;
    bottom: 78px;
    transform: rotate(-60deg);
}

.clock span:nth-child(9){
    left: 50px;
    bottom: 170px;
    transform: rotate(-30deg);
}

.clock span:nth-child(10){
    top: 50%;
    transform: translateY(-50%);
    left: 14px;
}

.clock span:nth-child(11){
    left: 50px;
    top: 170px;
    transform: rotate(30deg);
}

.clock span:nth-child(12){
    left: 148px;
    top: 78px;
    transform: rotate(60deg);
}

.c{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.shand{
    position: absolute;
    width: 120px;
    height: 2px;
    background: white;
    top: 30px;
    transform: rotate(-30deg);
    right: -8px;
}

.bhand{
    width: 400px;
    position: absolute;
    height: 2px;
    left: 50%;
    transform: translate(-50%) rotate(0deg);
    animation: clock 12s infinite;
}

.bhand div{
    width: 200px;
    height: 2px;
    float: left;
    background: white;
}

@keyframes clock {
    7%{
        transform: translateX(-50%) rotate(30deg);
    }
    15%{
        transform: translateX(-50%) rotate(60deg);
    }
    25%{
        transform: translateX(-50%) rotate(90deg);
    }
    34%{
        transform: translateX(-50%) rotate(120deg);
    }
    43%{
        transform: translateX(-50%) rotate(150deg);
    }
    51%{
        transform: translateX(-50%) rotate(180deg);
    }
    60%{
        transform: translateX(-50%) rotate(210deg);
    }
    68%{
        transform: translateX(-50%) rotate(240deg);
    }
    76%{
        transform: translateX(-50%) rotate(270deg);
    }
    84%{
        transform: translateX(-50%) rotate(300deg);
    }
    92%{
        transform: translateX(-50%) rotate(330deg);
    }
    100%{
        transform: translateX(-50%) rotate(360deg);
    }
}

加載特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="loading.css">
</head>
<body>

    <div class="box">
        <div class="b b1"></div>
        <div class="b b2"></div>
        <div class="b b3"></div>
        <div class="b b4"></div>
    </div>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background-color: #e55039;
}

.box{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    overflow: hidden;
    width: 200px;
    height: 200px;
}

.box .b{
    border-radius: 50%;
    border-left: 4px solid;
    border-right: 4px solid;
    border-top: 4px solid transparent !important;
    border-bottom: 4px solid transparent !important;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    animation: ro 2s infinite;
}


.box .b1{
    width: 120px;
    height: 120px;
    border-color: #4a69bd;
}

.box .b2{
    width: 100px;
    height: 100px;
    border-color: #f6b93b;
    animation-delay: .2s;
}

.box .b3{
    width: 80px;
    height: 80px;
    border-color: #2ecc71;
    animation-delay: .4s;
}

.box .b4{
    width: 60px;
    height: 60px;
    border-color: #34495e;
    animation-delay: .6s;
}

@keyframes ro {
    0%{
        transform:translate(-50%,-50%) rotate(0deg);
    }
    50%{
        transform:translate(-50%,-50%) rotate(-180deg);
    }
    100%{
        transform:translate(-50%,-50%) rotate(0deg);
    }
}

眨眼特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="eye.css">
</head>
<body>

    <div class="eye">
        <div class="shut">
            <span></span>
        </div>
        <div class="ball"></div>
    </div>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background-color: #333;
}

.eye{
    width: 200px;
    height: 200px;
    background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(45deg);
    border-radius: 75% 0;
    overflow: hidden;
    cursor: pointer;
}

.ball{
    width: 40px;
    height: 40px;
    background-color: #222f3e;
    border-radius: 50%;
    border: 30px solid #576574;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.shut{
    width: 300px;
    height: 160px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%) rotate(-45deg);
}

.shut span{
    display: block;
    width: 100%;
    height: 15%;
    background-color: #ff6b6b;
    transition: .4s all;
}

.eye:hover > .shut span{
    height: 100%;
}

彈窗特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" >
    <link rel="stylesheet" href="alert.css">
</head>
<body>

    <a class="btn" onclick="pop()">Show Box</a>
    <div id="box">
        <span class="fa fa-check"></span>
        <h1>Good Job !</h1>
        <a class="close" onclick="pop()">Close</a>
    </div>

<script>
    var c = 0
    function pop() {
        if(c == 0){
            document.getElementById("box").style.display = "block"
            c = 1
        }else {
            document.getElementById("box").style.display = "none"
            c = 0
        }
    }
</script>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
}

a{
    text-decoration: none;
}

.btn{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: #e74c3c;
    color: white;
    padding: 10px 30px;
    cursor: pointer;
}

#box{
    width: 500px;
    background-color: #f1f1f1;
    box-shadow: 0 0 20px black;
    border-radius: 8px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    padding: 10px;
    text-align: center;
    z-index: 9999;
    display: none;
}

#box span{
    color: #2ecc71;
    font-size: 40px;
    margin: 20px 0;
    display: block;
}

#box h1{
    color: #333333;
}

.close{
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
    display: inline-block;
    border-radius: 4px;
}

帶顯隱的導航欄

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="nacigation.css">
</head>
<body>

    <div class="header">
        <div class="navigation">
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Works</a>
            <a href="#">Contact</a>
        </div>
    </div>
    <p>
        Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening, James opens the door. What does he see? The snowman is moving! James invites him in. The snowman has never been inside a house. He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air! They are flying! What a wonderful night!The next morning, James jumps out of bed. He runs to the door.He wants to thank the snowman. But he's gone.
    </p>

<script>
    var nav = document.getElementsByClassName("navigation")
    window.onscroll = function sticky() {
        if(window.pageYOffset > nav[0].offsetTop){
            nav[0].classList.add("nav")
        }else {
            nav[0].classList.remove("nav")
        }
    }
</script>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
}

.header{
    width: 100%;
    height: 600px;
    background: url("https://picsum.photos/id/1014/1000/800") no-repeat 50%;
    background-size: cover;
}

.navigation{
    width: 100%;
    padding: 18px 0;
    text-align: center;
}

.navigation a{
    padding: 0px 18px;
    font-size: 20px;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    font-weight: 700;
    text-shadow: 0 0 20px #000000;
    transition: .3s;
}

.navigation a:hover{
    color: #333333;
}

.nav{
    position: fixed;
    background: black;
}

p{
    font-size: 18px;
    padding: 0 40px;
    text-align: justify;
}

背景顏色切換

效果圖

背景顏色

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="color.css">
</head>
<body>

    <div class="color">
        <span id="hex">#e74c3c</span>
        <button onclick="getNewColor()">Get New Color</button>
    </div>

    <script>
        function getNewColor() {
            var symbols,color;
            symbols = "0123456789ABCDEF"
            color = "#"
            for (var i = 0;i < 6;i++){
                color = color + symbols[Math.floor(Math.random() * 16)]
            }
            document.body.style.background = color
            document.getElementById("hex").innerText = color
        }
    </script>
</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background-color: #e74c3c;
}

.color{
    margin-top: 300px;
    text-align: center;
}

#hex{
    color: white;
    display: block;
    font-size: 40px;
    text-transform: uppercase;
}

.color button{
    color: white;
    background: none;
    border: 3px solid white;
    font-size: 24px;
    margin-top: 20px;
    outline: none;
    cursor: pointer;
}

背景輪換特效

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="background.css">
</head>
<body>

    <div class="section-top">
        <div class="content">
            <h1>DarkCode</h1>
            <a href="#">Sign Up Now</a>
        </div>
    </div>
    <p>
        Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening, James opens the door. What does he see? The snowman is moving! James invites him in. The snowman has never been inside a house. He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air! They are flying! What a wonderful night!The next morning, James jumps out of bed. He runs to the door.He wants to thank the snowman. But he's gone.
    </p>
</body>
</html>

css代碼

body,html{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.section-top{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: url("https://picsum.photos/id/1015/1000/800") no-repeat;
    background-size: cover;
    animation: slide 10s infinite;
}

.content{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    text-transform: uppercase;
    text-align: center;
}

.content h1{
    color: white;
    font-size: 60px;
    letter-spacing: 16px;
}

.content a{
    text-decoration: none;
    color: white;
    background-color: #0984e3;
    padding: 10px 24px;
    font-size: 18px;
    border-radius: 20px;
}

p{
    font-size: 20px;
    padding: 10px;
    line-height: 24px;
}

@keyframes slide {
    0%{
        background-image: url("https://picsum.photos/id/1015/1000/800");
    }
    33%{
        background-image: url("https://picsum.photos/id/1016/1000/800");
    }
    67%{
        background-image: url("https://picsum.photos/id/1018/1000/800");
    }
}

個人展示欄

效果圖

html代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="testimonials.css">
</head>
<body>

    <div class="container">
        <p>Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening, James opens the door. What does he see? The snowman is moving! James invites him in. The snowman has never been inside a house. He says hello to the cat. He plays with paper towels</p>

        <div class="client">
            <img src="https://picsum.photos/id/1015/500/500">
            <div>
                <span class="name">DarkCode</span>
                <span class="des">Web Designer</span>
            </div>
        </div>
    </div>

</body>
</html>

css代碼

body{
    margin: 0;
    padding: 0;
    background-color: #ee5253;
}

.container{
    width: 540px;
    background-color: #f1f1f1;
    padding: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.client{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: left;
}

.client img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 10px;
}

.client span{
    display: block;
}

.name{
    font-weight: 600;
}

.des{
    color: #333333;
}

最后編輯于：2020.06.20 19:46:32

?著作權歸作者所有,轉載或內容合作請聯系作者

人面猴
序言：七十年代末搔谴，一起剝皮案震驚了整個濱河市曹动，隨后出現的幾起案子水醋，更是在濱河造成了極大的恐慌，老刑警劉巖欺抗，帶你破解...
沈念sama閱讀 212,383評論 6贊 493
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件审胚，死亡現場離奇詭異视事，居然都是意外死亡胆萧，警方通過查閱死者的電腦和手機，發(fā)現死者居然都...
沈念sama閱讀 90,522評論 3贊 385
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門俐东，熙熙樓的掌柜王于貴愁眉苦臉地迎上來跌穗，“玉大人，你說我怎么就攤上這事虏辫“鑫” “怎么了？”我有些...
開封第一講書人閱讀 157,852評論 0贊 348
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵砌庄，是天一觀的道長羹唠。經常有香客問我奕枢，道長，這世上最難降的妖魔是什么肉迫？我笑而不...
開封第一講書人閱讀 56,621評論 1贊 284
?港島之戀（遺憾婚禮）
正文為了忘掉前任验辞，我火速辦了婚禮稿黄，結果婚禮上喊衫，老公的妹妹穿的比我還像新娘。我一直安慰自己杆怕，他們只是感情好族购，可當我...
茶點故事閱讀 65,741評論 6贊 386
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著陵珍，像睡著了一般互纯。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上只盹，一...
開封第一講書人閱讀 49,929評論 1贊 290
城市分裂傳說
那天兔院，我揣著相機與錄音坊萝，去河邊找鬼菩鲜。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的董习。我是一名探鬼主播，決...
沈念sama閱讀 39,076評論 3贊 410
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼疯暑，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了越锈？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 37,803評論 0贊 268
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤火邓，失蹤者是張志新（化名）和其女友劉穎躲胳，沒想到半個月后，有當地人在樹林里發(fā)現了一具尸體，經...
沈念sama閱讀 44,265評論 1贊 303
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡坚冀，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 36,582評論 2贊 327
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現自己被綠了壳猜。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,716評論 1贊 341
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出舌劳，到底是詐尸還是另有隱情大诸，我是刑警寧澤撵割，帶...
沈念sama閱讀 34,395評論 4贊 333
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發(fā)生泄漏利职。R本人自食惡果不足惜佩憾，卻給世界環(huán)境...
茶點故事閱讀 40,039評論 3贊 316
男人毒藥：我在死后第九天來索命
文/蒙蒙一池凄、第九天我趴在偏房一處隱蔽的房頂上張望碎税。院中可真熱鬧伟端，春花似錦萎庭、人聲如沸肴敛。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,798評論 0贊 21
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春胚吁，著一層夾襖步出監(jiān)牢的瞬間吨掌，已是汗流浹背窿侈。一陣腳步聲響...
開封第一講書人閱讀 32,027評論 1贊 266
情欲美人皮
我被黑心中介騙來泰國打工乘瓤，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留抬吟，地道東北人。一個月前我還...
沈念sama閱讀 46,488評論 2贊 361
代替公主和親
正文我出身青樓擎析，卻偏偏與公主長得像，于是被迫代替她去往敵國和親喜最。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 43,612評論 2贊 350