css实现常见页面效果

DY561
172 阅读1分钟

实现Switch效果

<!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>Switch Button</title>
</head>
<body>
    <div>
        <h2>swtich btn</h2>
        <input class="switch-box" type="checkbox" />
    </div>
</body>
<style>
.switch-box {
    width: 100px;
    height: 60px;
    background-color: rgb(230, 230, 230);
    position: relative;
    cursor: pointer;
    appearance: none;
    border-radius: 30px;
    transition: all 500ms;
}
.switch-box::before {
    width: 100px;
    height: 60px;
    background-color: rgb(230, 230, 230);
    position: absolute;
    cursor: pointer;
    border-radius: 30px;
    transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
    content: "";
}
.switch-box::after {
    position: absolute;
    left: 4px;
    top: 4px;
    background-color: #fff;
    width: 52px;
    height: 52px;
    content: "";
    border-radius: 26px;
    box-shadow: 1px 1px 5px rgba(#000, .3);
    transition: all 300ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.switch-box:checked {
    background-color:darkcyan;
}
.switch-box:checked::after {
    transform: translateX(40px);
}
.switch-box:checked::before {
    transform: scale(0);
}
</style>
</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>
</head>
<body>
    <h2>手风琴</h2>
    <div class="accordion">
        <div data-color="red"></div>
        <div data-color="orange"></div>
        <div data-color="yellow"></div>
        <div data-color="green"></div>
        <div data-color="cyan"></div>
        <div data-color="blue"></div>
        <div data-color="indigo"></div>
    </div>
</body>
<style>
.accordion {
    display: flex;
    width: 600px;
    height: 200px;
}
.accordion > div {
    flex: 1;
    cursor: pointer;
    transition: all 300ms;
}
.accordion > div:hover {
    flex: 10;
    cursor: pointer;
}
.accordion > div[data-color="red"] {
    background-color: red;
}
.accordion > div[data-color="orange"] {
    background-color: orange;
}
.accordion > div[data-color="yellow"] {
    background-color: yellow;
}
.accordion > div[data-color="green"] {
    background-color: green;
}
.accordion > div[data-color="cyan"] {
    background-color: cyan;
}
.accordion > div[data-color="blue"] {
    background-color: blue;
}
.accordion > div[data-color="indigo"] {
    background-color: indigo;
}
</style>
</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>Document</title>
</head>
<body>
    <h2>折叠面板</h2>
    <div class="collapse">
    <input id="panel1" type="checkbox" hidden />
    <input id="panel2" type="checkbox" hidden />
    <input id="panel3" type="checkbox" hidden />
    <article>
        <label for="panel1" >卡片1-Element</label>
        <p>
            您正在浏览基于 Vue 2.x 的 Element UI 文档;<br />
            点击这里查看 Vue 3.x 的升级版本 Element,<br />
            一套为开发者、设计师和产品经理准备的基于<br />
            Vue 2.0 的桌面端组件库 指南 了解设计指
        </p>
    </article>
    <article>
    <label for="panel2" >卡片2-Vue</label>
        <p>
            VUE 是 iOS 和 Android 平台上的一款 <br />
            Vlog 社区与编辑工具，<br />
            允许用户通过简单的操作实现 Vlog <br />
            的拍摄、剪辑、细调、和发布
        </p>
    </article>
    <article>
        <label for="panel3" >卡片3-react</label>
        <p>
            耐克(Nike)官网<br />
            ,选购最新发售的 Nike Epic React Flyknit 跑步鞋,<br />
            集柔软、回弹、轻质、耐久四大性能于一身<br />
            ,选购男款与女款
        </p>
    </article>
    </div>
</body>
<style>
.collapse {
    width: 300px;
}
.collapse article {
    cursor: pointer;
}
.collapse article + article {
    margin-top: 5px;
}
#panel1:checked ~ article:nth-of-type(1) p,
#panel2:checked ~ article:nth-of-type(2) p,
#panel3:checked ~ article:nth-of-type(3) p {
    border-bottom-width: 1px;
    max-height: 600px;
}
label {
    display: block;
    padding: 0px 20px;
    height: 40px;
    background-color: brown;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    line-height: 40px;
}
p {
    margin: 0px;
    overflow: hidden;
    padding: 0px 20px;
    border: 1px solid brown;
    border-top: none;
    border-bottom-width: 0;
    max-height: 0;
    line-height: 30px;
    transition: all 500ms;
}
</style>
</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>Document</title>
</head>
<body>
    <h2>折叠面板</h2>
    <div class="collapse">
    <input id="panel1" name="test" type="radio" hidden />
    <input id="panel2" name="test" type="radio" hidden />
    <input id="panel3" name="test" type="radio" hidden />
    <article>
        <label for="panel1" >卡片1-Element</label>
        <p>
            您正在浏览基于 Vue 2.x 的 Element UI 文档;<br />
            点击这里查看 Vue 3.x 的升级版本 Element,<br />
            一套为开发者、设计师和产品经理准备的基于<br />
            Vue 2.0 的桌面端组件库 指南 了解设计指
        </p>
    </article>
    <article>
        <label for="panel2" >卡片2-Vue</label>
        <p>
            VUE 是 iOS 和 Android 平台上的一款 <br />
            Vlog 社区与编辑工具，<br />
            允许用户通过简单的操作实现 Vlog <br />
            的拍摄、剪辑、细调、和发布
        </p>
    </article>
    <article>
        <label for="panel3" >卡片3-react</label>
        <p>
            耐克(Nike)官网<br />
            ,选购最新发售的 Nike Epic React Flyknit 跑步鞋,<br />
            集柔软、回弹、轻质、耐久四大性能于一身<br />
            ,选购男款与女款
        </p>
    </article>
    </div>
</body>
<style>
.collapse {
    width: 300px;
}
.collapse article {
    cursor: pointer;
}
.collapse article + article {
    margin-top: 5px;
}
#panel1:checked ~ article:nth-of-type(1) p,
#panel2:checked ~ article:nth-of-type(2) p,
#panel3:checked ~ article:nth-of-type(3) p {
border-bottom-width: 1px;
    max-height: 600px;
}
label {
    display: block;
    padding: 0px 20px;
    height: 40px;
    background-color: brown;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    line-height: 40px;
}
p {
    margin: 0px;
    overflow: hidden;
    padding: 0px 20px;
    border: 1px solid brown;
    border-top: none;
    border-bottom-width: 0;
    max-height: 0;
    line-height: 30px;
    transition: all 500ms;
}
</style>
</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>Form 表单</title>
</head>
<body>
    <h2>Form 表单</h2>
    <div class="auth">
    <input id="login-radio" type="radio" name="test" checked hidden />
    <input id="register-radio" type="radio" name="test" hidden />
    <div class="auth-title">
        <label for="login-radio">Login</label>
        <label for="register-radio">Register</label>
        <em></em>
    </div>
    <div class="auth-form">
        <form>
            <div>
                <input type="text" placeholder="Pls input Ur PhoneNumber" pattern="^1[3456789]\d{9}$" required />
                <label>Phone</label>
            </div>
            <div>
                <input type="password" placeholder="Pls input Ur Pwd" pattern="^[\dA-Za-z_]{6,20}$" required />
                <label>Password</label>
            </div>
            <button>Login</button>
        </form>
        <form>Register</form>
    </div>
</div>
</body>
<style>
.auth {
    overflow: hidden;
    border-radius: 2px;
    width: 320px;
    background-color: #f0f0f0;
}
.auth .auth-title {
    display: flex;
    position: relative;
    border-bottom: 1px solid #eee;
    height: 40px;
}
.auth .auth-title label {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 100%;
    cursor: pointer;
    transition: all 300ms;
}
.auth .auth-title label:hover {
    color: #f66;
}
.auth .auth-title em {
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 1px;
    width: 50%;
    height: 2px;
    background-color: #f66;
    transition: all 300ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.auth .auth-form {
    display: flex;
    width: 200%;
    height: 250px;
    transition: all 300ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.auth .auth-form form {
    flex: 1;
    padding: 20px;
}

/* Login form */
.auth .auth-form form div {
    display: flex;
    flex-direction: column-reverse;
}
.auth .auth-form form div+div {
    margin-top: 10px;
}
.auth .auth-form form div input {
    padding: 10px;
    border: 1px solid #e9e9e9;
    border-radius: 2px;
    width: 260px;
    height: 20px;
    outline: none;
    transition: all 300ms;
}
.auth .auth-form form div input:focus:valid {
    border-color: #09f;
}
.auth .auth-form form div input:focus:invalid {
    border-color: #f66;
}
.auth .auth-form form div input:not(:placeholder-shown)+label {
    height: 30px;
    opacity: 1;
    font-size: 14px;
}
.auth .auth-form form div label {
    overflow: hidden;
    padding: 0 10px;
    height: 0;
    opacity: 0;
    line-height: 30px;
    font-weight: bold;
    font-size: 0;
    transition: all 300ms;
}
.auth .auth-form form button {
    margin-top: 10px;
    border: none;
    border-radius: 2px;
    width: 100%;
    height: 40px;
    outline: none;
    background-color: #f66;
    cursor: pointer;
    color: #fff;
    transition: all 300ms;
}


/* checked 负责开始切换样式 */
#login-radio:checked~.auth-title label:nth-child(1) {
    font-weight: bold;
    color: #f66;
}
#login-radio:checked~.auth-title em {
    transform: translateX(0);
}
#login-radio:checked~.auth-form {
    transform: translateX(0);
}
#register-radio:checked~.auth-title label:nth-child(2) {
    font-weight: bold;
    color: #f66;
}
#register-radio:checked~.auth-title em {
    transform: translateX(160px);
}
#register-radio:checked~.auth-form {
    transform: translateX(-50%);
}
</style>
</html>
avatar
文章
阅读
粉丝