前端练习二

特效按钮效果

效果图

html代码

    
    
    


    

        Hover Me
        Hover Me
        Hover Me
        Hover Me
    

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代码

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代码

    
    
    
    
    




    


    
    

        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
    
    

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代码

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代码

    
    
    
    
    


    

        
Our Services
        


            

                
                
Service Name
                
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 
            
            

                
                
Service Name
                
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 
            
            

                
                
Service Name
                
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 
            
            

                
                
Service Name
                
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 
            
            

                
                
Service Name
                
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 
            
            

                
                
Service Name
                
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 
            

        
    

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代码

    
    
    
    



    

        

            
        
        

            

                
DarkCode
                Youtube Channel
                

                    
                    
                    
                    
                
            
        
    

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代码

    
    
    



    

        Gradient Background Animation
    

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代码

    
    
    
    
    



    
Show Login Form

    

        

        

            
Welcome
            
            
            
        
    

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代码

    
    
    
    


    

        


            

                 Profile
                

                    Posts
                    Picture
                
            
            

                 Message
                

                    News
                    Sent
                    Spam
                
            
            

                 Settings
                

                    Password
                    Language
                
            
            

                 Logout
            

        
    

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代码

    
    
    



    

        

            
            
This photo may have a violent content
            Uncover Image
        
    

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代码

    
    
    



    

        

            
            

                
                
                
                
            
            
$80
        
        

            
Sanglasses
            
Awesome Men Sanglasses
            Add to Card
        
    

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代码

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代码

    
    
    
    


    

        
        

            
Awesome Modal
            
Hooray! It's snowing! It's time to make a snowman.
            Read More
        
        

    
    Show Modal

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代码

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代码

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代码

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代码

    
    
    



    

        
DarkCode
        
Stande Hero Backgroud
    
    

        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
    
    

        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
    

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代码

    
    
    



    

        Hover Me
        Hover Me
        Hover Me
        Hover Me
    

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代码

    
    
    



    

        
Contact Us
        

            Full Name :
            
        
        

            Email :
            
        
        

            Phone Number :
            
        
        

            Message :
            
        
        Send
    

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代码

    
    
    
    



    

        
testimonials
        

            
            
        
        
Melioas
        
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
    

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代码

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代码

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代码

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代码

    
    
    



    

        
DarkCode
        
We are coming soon.
        


            

                00
                DAYS
            
            

                00
                HOURS
            
            

                00
                MINUTES
            
            

                00
                SECONDS
            

        
    

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代码

    
    
    



    

        
My Skills
        

            
HTML5

        
        

            
CSS3

        
        

            
JQUERY

        
        

            
JAVASCRIPT

        
    

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代码

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代码

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代码

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代码

    
    
    
    



    Show Box
    

        
        
Good Job !
        Close
    

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代码

    
    
    



    

        

            Home
            About
            Works
            Contact
        
    
    

        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.
    

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代码

    
    
    



    

        #e74c3c
        Get New Color
    

    

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代码

    
    
    



    

        

            
DarkCode
            Sign Up Now
        
    
    

        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.
    

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代码

    
    
    



    

        
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

        

            
            

                DarkCode
                Web Designer
            
        
    

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;
}