前端

CSS3之笑脸

自从学会CSS3点击动画后,,,总想着写几个,今天给大家分享以下CSS笑脸和哭脸的转化,代码如下:

<!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>
    body {
        background: rgba(173, 216, 230, 0.812);
    }

    input {
        display: none;
    }

    .main {
        width: 300px;
        text-align: center;
    }

    .main .face {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: yellow;
        margin: 0 auto;
    }

    .main .face .eye {
        border-radius: 50%;
        transition: all .4s;
    }

    .main .face .left {
        width: 25px;
        height: 25px;
        border-top: 2px black solid;
        position: absolute;
        top: 30px;
        left: 17px;
    }

    .main .face .right {
        width: 25px;
        height: 25px;
        border-top: 2px black solid;
        position: absolute;
        top: 30px;
        left: 57px;
    }


    .main .face .mouth {
        width: 25px;
        height: 25px;
        border-bottom: 2px black solid;
        border-radius: 50%;
        position: absolute;
        top: 55px;
        left: 37px;
        transition: all .4s;
    }

    .main .face .red {
        width: 0px;
        height: 0px;
        border-radius: 50px;
        box-shadow: 1px 1px 15px 8px rgb(236, 79, 105);
        transition: all .4s;
        opacity: 0;
    }

    .main .face .red_left {
        position: absolute;
        top: 55px;
        left: 29px;
    }

    .main .face .red_right {
        position: absolute;
        top: 55px;
        left: 67px;
    }

    .main .btn {
        width: 70px;
        height: 30px;
        line-height: 30px;
        display: inline-block;
        border: none;
        border-radius: 5px;
        margin-top: 20px;
    }


    .main .laugh .btn {
        background: #1E9FFF;
    }

    .main .cry .btn {
        background: #FF5722;
    }

    .main .shy .btn {
        background: pink;
    }

    #cry:checked~.face .eye {
        transform: rotateX(180deg);
    }

    #cry:checked~.face .left {
        position: absolute;
        top: 20px;
        left: 17px;
    }

    #cry:checked~.face .right {
        position: absolute;
        top: 20px;
        left: 57px;
    }

    #cry:checked~.face .mouth {
        transform: rotateX(180deg);
        position: absolute;
        top: 75px;
        left: 37px;
    }

    #shy:checked~.face .eye {
        transform: rotateX(180deg);
    }

    #shy:checked~.face .left {
        position: absolute;
        top: 20px;
        left: 17px;
    }

    #shy:checked~.face .right {
        position: absolute;
        top: 20px;
        left: 57px;
    }

    #shy:checked~.face .red {
        opacity: .8;
    }

</style>

<body>
    <div class="main">
        <input name="sex" type="radio" id="laugh" checked="checked" />
        <input name="sex" type="radio" id="cry" />
        <input name="sex" type="radio" id="shy" />
        <div class="face">
            <div class="eye left"></div>
            <div class="eye right"></div>
            <div class="mouth"></div>
            <div class="red red_left"></div>
            <div class="red red_right"></div>
        </div>
        <label for="laugh">
            <div class="laugh">
                <div class="btn">开心</div>
            </div>
        </label>
        <label for="cry">
            <div class="cry">
                <div class="btn">难过</div>
            </div>
        </label>
        <!-- <label for="shy">
            <div class="shy">
                <div class="btn">害羞</div>
            </div>
        </label> -->
    </div>
</body>
<script src="./jquery-3.4.1.js"></script>
<script>
    $(function () {
        //初始化
        auto();
        //当浏览器被重置大小时执行
        window.onresize = function () {
            auto();
        };
        //获取浏览器高度,使元素水平/垂直居中与浏览器
        function auto() {
            var winW = $(window).width();
            var winH = $(window).height();
            $(".main").css({
                position: "absolute",
                left: (winW - $(".main").outerWidth()) / 2,
                top: (winH - $(".main").outerHeight()) / 2
            });
        }
    })
</script>

</html>

附件:笑脸哭脸.rar

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

微信扫一扫,向我赞赏

支付宝扫一扫,向我赞赏

回复

This is just a placeholder img.