前端小案例(一）

目录

输入框

旋转木马

下拉列表

---

学习内容：前端小案例学习记录。 

• 结构

• 输入框

• 效果

•  HTML

    
    
    
    
    



    

        

            
            

            您的姓名
        
    

• CSS

* {
    margin: 0;
    padding: 0;
    outline: none;
    box-sizing: border-box;
}

body {
    display: flex;
    /* ctr + enter 快速跳到下一行 */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* 渐变 */
    background: linear-gradient(200deg,#CC95C0, #DBD4B4, #C06C84);
    /* background-image: radial-gradient(circle, #56e2e7, #2dcae4, #18b1dd, #2c97d0, #457cbd,
            #4e77ba, #5772b7, #606cb3, #627cc5, #628bd8, #619cea, #5facfb); */

}

.wrapperdiv {
    width: 450px;

    background-color: #fff;
    /* 内边距 */
    padding: 40px;
    /* 盒子阴影 */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    /* 圆角 */
    border-radius: 8px;
}

.wrapperdiv .input-datadiv {
    width: 100%;
    height: 40px;
    position: relative;
}

.wrapperdiv .input-datadiv input {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 19px;
    border-bottom: 2px solid #c0c0c0;
}

/* 输入框获得焦点时 */
.wrapperdiv .input-datadiv input:focus~label,
/* 输入框的值合法时 */
.wrapperdiv .input-datadiv input:valid~label {
    transform: translateY(-25px);
    font-size: 15px;
    color: #2c6fdb;
}

.wrapperdiv .input-datadiv label {
    position: absolute;
    bottom: 10px;
    left: 0px;
    color: #808080;
    /* 这个属性可以使点击label穿透到输入框 */
    pointer-events: none;
    /* 给动画一个过渡 */
    transition: all 0.3s ease;

}

.wrapperdiv .input-datadiv .underlinediv {
    position: absolute;
    bottom: 0px;
    height: 2px;
    width: 100%;
    background-color: #2c6fdb;
    transform: scaleX(0);
    transition: all 0.3s ease;

}

.wrapperdiv .input-datadiv input :focus~.underlinediv,
.wrapperdiv .input-datadiv .input :focus~.underlinediv {
    transform: scaleX(1);

}

• 旋转木马

• 效果

• HTML

• CSS

body {
    perspective: 1000px;

}

#box {
    position: relative;
    width: 100px;
    height: 100px;
    margin: 100px auto;
    transform-style: preserve-3d;
    animation: my 10s linear infinite;

}

@keyframes my {
    from {
        transform: rotateY(0deg);

    }

    to {
        transform: rotateY(360deg);
    }
}

.item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;

}

.item img {
    width: 100px;
    height: 200px;

}

.item01 {
    transform: translateZ(300px);
}

.item02 {
    transform: rotateY(36deg) translateZ(300px);
}

.item03 {
    transform: rotateY(72deg) translateZ(300px);
}

.item04 {
    transform: rotateY(108deg) translateZ(300px);
}

.item05 {
    transform: rotateY(144deg) translateZ(300px);
}

.item06 {
    transform: rotateY(180deg) translateZ(300px);
}

.item07 {
    transform: rotateY(216deg) translateZ(300px);
}

.item08 {
    transform: rotateY(252deg) translateZ(300px);
}

.item09 {
    transform: rotateY(288deg) translateZ(300px);
}

.item010 {
    transform: rotateY(324deg) translateZ(300px);
}

• 下拉列表

• 效果

• HTML

    
    
    
    
    



    

        

            消息
            

                
回复我的
                
收到的赞
                
我的消息
            
        
        

            动态
        
        

            

                
华仔在学习
                
小小牛马
                
大大志向
                
冲冲冲呀
            

        
        

            收藏
            

                
默认收藏夹
                
前端收藏夹
                
妹子收藏夹
            
        

        

            投稿
            

                
专栏投稿
                
音频投稿
                
贴纸投稿
                
视频投稿
                
投稿管理
            

        


    

• CSS

* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 20px;
    color: #f4f1de;

}

body {
    /* margin: 40px; */
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #dd3e54, #6be585);
}

.shell {
    display: flex;
    justify-content: center;

}

.buttom,
.portrait {
    background-color: #50536e;
    width: 170px;
    height: 65px;
    text-align: center;
    line-height: 65px;
    transition: 0.3s;
    cursor: pointer;

}



.portrait::before {
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    transform: translate(30px, -30px);
    background-image: url(../html/imgs2/src=http___c-ssl.duitang.com_uploads_blog_202106_23_20210623200647_crngz.thumb.1000_0.jpg&refer=http___c-ssl.duitang.webp);
    background-size: cover;
    border: 10px solid #fff;
}

.information {
    width: 220px;
    background-color: #348e7f;
    border-radius: 50px;
    transform: translate(-20px, -200px);
    padding: 20px 0;
    line-height: 0;
    height: 0;
    transition: 0.3s;
    opacity: 0;



}

.buttom:hover {
    background-color: #348e7f;
}

.buttom li:hover {
    background-color: #fbc2ed;
}

.buttom ul li {
    height: 0;
    transition: 0.2s;
    opacity: 0;
    transform: translateY(-65px);
    background-color: #348e7f;
}

.buttom:hover li {
    height: 65px;
    opacity: 1;
    transform: translateY(0);

}

.portrait:hover .information {
    opacity: 1;
    line-height: 65px;
    transform: translate(-20px, -10px);
    height: auto;
}

 拜~~~~

---