前端练习二

特效按钮效果

效果图

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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <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);
        });
        //页面移动监控
        $(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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
</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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

</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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <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" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">
    <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阅读 203,547评论 6赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,399评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,428评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,599评论 1赞 274
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,612评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,577评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,941评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,603评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,852评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,605评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,693评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,375评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,955评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,936评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,172评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,970评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,414评论 2赞 342