前端小案例(一）

最新推荐文章于 2024-07-23 17:35:03 发布

抄代码抄错的小牛马

最新推荐文章于 2024-07-23 17:35:03 发布

阅读量939

点赞数 3

本文链接：https://blog.csdn.net/qq_61122628/article/details/124156176

版权

前端小案例学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

输入框

旋转木马

下拉列表

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

结构

输入框
效果

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框</title>
    <link rel="stylesheet" href="../css/2.css">
</head>

<body>
    <div class="wrapperdiv">
        <div class="input-datadiv">
            <input type="text" required>
            <div class="underlinediv"></div>
            <label>您的姓名</label>
        </div>
    </div>
</body>
</html>

* {
    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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转木马</title>
    <link rel="stylesheet" type="text/css" href="../css/3.css">
</head>

<body>
    <div id="box">
        <div class="item item01">
            <img src="./imgs2/004859-1644857339de97.jpg" alt="">
        </div>
        <div class="item item02">
            <img src="./imgs2/002931-1638289771e806.jpg" alt="">
        </div>
        <div class="item item03">
            <img src="./imgs2/003106-1642782666f5a4.jpg" alt="">
        </div>
        <div class="item item04">
            <img src="./imgs2/003728-163829024819d7.jpg" alt="">
        </div>
        <div class="item item05">
            <img src="./imgs2/104701-1535251621265b.jpg" alt="">
        </div>
        <div class="item item06">
            <img src="./imgs2/112708-14917084280707.jpg" alt="">
        </div>
        <div class="item item07">
            <img src="./imgs2/154844-1611906524851a.jpg" alt="">
        </div>
        <div class="item item08">
            <img src="./imgs2/004859-1644857339de97.jpg" alt="">
        </div>
        <div class="item item09">
            <img src="./imgs2/202516-149027191623c1.jpg" alt="">
        </div>
        <div class="item item010">
            <img src="./imgs2/742f0eeed9ec4c3242ca24dec894db2f.jpg" alt="">
        </div>

    </div>
</body>

</html>

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉列表练习</title>
    <link rel="stylesheet" type="text/css" href="../css/4.css">
</head>

<body>
    <ul class="shell">
        <li class="buttom">
            <span>消息</span>
            <ul>
                <li>回复我的</li>
                <li>收到的赞</li>
                <li>我的消息</li>
            </ul>
        </li>
        <li class="buttom">
            <span>动态</span>
        </li>
        <li class="portrait">
            <ul class="information">
                <li>华仔在学习</li>
                <li>小小牛马</li>
                <li>大大志向</li>
                <li>冲冲冲呀</li>
            </ul>

        </li>
        <li class="buttom">
            <span>收藏</span>
            <ul>
                <li>默认收藏夹</li>
                <li>前端收藏夹</li>
                <li>妹子收藏夹</li>
            </ul>
        </li>

        <li class="buttom">
            <span>投稿</span>
            <ul>
                <li>专栏投稿</li>
                <li>音频投稿</li>
                <li>贴纸投稿</li>
                <li>视频投稿</li>
                <li>投稿管理</li>
            </ul>

        </li>


    </ul>

</body>

</html>

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

拜~~~~