找回密码
当前位置：前端开发者 > CSS > 正文

前端开发CSS3开关动画

2019-01-16 分类：CSS 阅读(1276) 评论(0)
web前端开发教程网盘下载
android与web前端开发视频教程
web前端开发教程 腾讯
<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″ />
        <meta http-equiv=”X-UA-Compatible” content=”ie=edge” />
        <title>Document</title>
    </head>
    <style>
        :root {
            –height: 90px;
            –width: 195px;
            –animateTime: 0.7s;
            –speed: ease-out;
        }
        .switch {
            height: var(–height);
            width: var(–width);
            border-radius: var(–height);
            background: #d7d7d7;
            position: relative;
            overflow: hidden;
        }
        input[name=’switch’] {
            display: none;
        }
        input[name=’switch’] + .switch::after {
            opacity: 0;
            position: absolute;
            content: ”;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            border-radius: var(–height);
            background: linear-gradient(to right, #f39af3, #f39ab6);
            -webkit-transition: all var(–animateTime) var(–speed);
            transition: all var(–animateTime) var(–speed);
        }
        input[name=’switch’]:checked + .switch::after {
            opacity: 1;
            background: linear-gradient(to right, #f39af3, #f39ab6);
            -webkit-transition: all var(–animateTime) var(–speed);
            transition: all var(–animateTime) var(–speed);
        }
        input[name=’switch’] + .switch .switch-button {
            display: block;
            position: absolute;
            height: calc(var(–height) – 14px);
            width: calc(var(–height) – 14px);
            top: 50%;
            left: 7px;
            margin-top: calc((var(–height) – 14px) / -2);
            border-radius: 50%;
            background: linear-gradient(205deg, #fff 35%, #e7e7e7 70%, #dedede);
            box-shadow: -1px 5px 10px -3px rgba(0, 0, 0, 0.5);
            z-index: 999;
            -webkit-transition: all var(–animateTime) var(–speed);
            transition: all var(–animateTime) var(–speed);
            overflow: hidden;
        }
        input[name=’switch’]:checked + .switch .switch-button {
            left: calc(var(–width) – (var(–height) – 14px) – 7px);
            /* transform: rotateY(375deg); */
            -webkit-transition: all var(–animateTime) var(–speed);
            transition: all var(–animateTime) var(–speed);
        }
        .eyes {
            position: absolute;
            top: 46%;
            left: 13px;
            width: 10px;
            height: 5px;
            background: #8e8e8e;
            border-radius: 1px 1px 7px 7px;
            box-shadow: 22px 0px 0px 0px #8e8e8e;
        }
        .mouth {
            position: absolute;
            top: 15px;
            left: 11px;
            width: 8px;
            height: 4px;
            background: #8e8e8e;
            border-radius: 2px 2px 8px 8px;
            -webkit-transition: all var(–animateTime) var(–speed);
            transition: all var(–animateTime) var(–speed);
        }
        input[name=’switch’] + .switch .switch-button [class^=’eyes’] {
            position: absolute;
            top: 46%;
            left: 13px;
            width: 10px;
            height: 5px;
            background: #8e8e8e;
            border-radius: 1px 1px 7px 7px;
            box-shadow: 22px 0px 0px 0px #8e8e8e;
            transform-origin: 27px 27px calc(var(–width) / 2);
            /* transform: rotateY(0deg); */
            -webkit-transition: all var(–animateTime) var(–speed);
            transition: all var(–animateTime) var(–speed);
        }
        input[name=’switch’]:checked + .switch .switch-button [class^=’eyes’] {
            width: 8px;
            height: 8px;
            top: 40%;
            border-radius: 50%;
            left: calc((var(–width)));
            -webkit-transition: all var(–animateTime) var(–speed);
            transition: all var(–animateTime) var(–speed);
        }
        input[name=’switch’]:checked + .switch .switch-button .mouth {
            width: 26px;
            height: 10px;
            top: 16px;
            left: 2px;
            border-radius: 0px 0px 9px 9px;
            -webkit-transition: all var(–animateTime) var(–speed);
            transition: all var(–animateTime) var(–speed);
        }
        input[name=’switch’]
            + .switch
            .switch-button
            .eyes-copy[class^=’eyes’] {
            left: calc((var(–width)) * -1);
        }
        input[name=’switch’]:checked
            + .switch
            .switch-button
            .eyes-copy[class^=’eyes’] {
            left: 35px;
        }
    </style>
    <body>
        <label>
            <input type=”checkbox” name=”switch” id=”” />
            <div class=”switch”>
                <span class=”switch-button”>
                    <div class=”eyes”><div class=”mouth”></div></div>
                    <div class=”eyes-copy”><div class=”mouth”></div></div>
                </span>
            </div>
        </label>
    </body>
</html>
棋牌游戏开发前端教程
vs2015前端开发教程
公众号前端页面开发教程
赞(0)
前端开发者 » 前端开发CSS3开关动画
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论