前端练习二

特效按钮效果

效果图

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;
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

相关阅读更多精彩内容

  • 前端练习
    参考视频:https://www.bilibili.com/video/av80058155 登陆界面 完成效果 ...
    soul_ec83阅读 1,041评论 0赞 0
  • 我的眼
    一、事实 早起看手机眼睛不舒服 二、感受 无奈、平和 三、思维 1.少用手机写作业了！可以拍照片！少看手机视频 2...
    生命的触动阅读 156评论 0赞 1
  • 适合发给对象的五十个温柔小句子
    1、以后不准和别人太好了 我会吃醋 会跺脚 还会赖地上打滚让你抱抱 2、我可以亲口对你说晚安吗先亲口再说 3、人总...
    句子本阅读 2,453评论 0赞 3
  • 我家卷卷
    在过去十二年六个月十四天的日子里，只要一提起这个名字，总不能抑制泪奔，仍旧凌迟我每一根神经和心脏乃至肺腑。 亲手写...
    小美Prisca阅读 644评论 0赞 9
  • 米奇教室2019新春贺词
    亲爱的米奇家长、小米奇们: 大家好！ 亲爱的米奇家长们，你们用奋斗的姿态告诉孩子们努力的意义，你们的信任和...
    静好嫣然阅读 333评论 0赞 0

友情链接更多精彩内容