CSS3.0实现一个有趣特效

越陌度阡
发布于 2022-03-09 11:42:02
1660
发布于 2022-03-09 11:42:02
给大家分享一个用CSS3.0实现一个有趣特效，以下是代码实现。
<!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>

    <style>
        #box {
            position: relative;
            width: 400px;
            height: 400px;
        }
        
        #box .body {
            position: absolute;
            top: 76px;
            left: 93px;
            width: 211px;
            height: 237px;
            border-radius: 91px 105px 74px 84px/128px 119px 129px 114px;
            background-color: #fff;
            border: 5px solid #393939;
            box-sizing: border-box;
            z-index: 1;
        }
        
        #box .ear-left {
            position: absolute;
            top: 77px;
            left: 113px;
            width: 43px;
            height: 66px;
            transform: rotate(343deg);
            background-color: #393939;
            border-radius: 91px 52px 74px 84px/128px 68px 129px 114px;
        }
        
        #box .ear-right {
            position: absolute;
            top: 76px;
            left: 243px;
            width: 39px;
            height: 50px;
            transform: rotate(190deg);
            background-color: #393939;
            border-radius: 7px 52px 74px 84px/33px 68px 129px 114px;
        }
        
        #box .face {
            position: absolute;
            top: 108px;
            left: 117px;
            width: 164px;
            height: 131px;
            border-radius: 98px 124px 82px 84px/104px 93px 66px 70px;
            background-color: #fff;
            box-shadow: rgb(102, 201, 253) 0 0 0 3px, rgb(173, 35, 96) 0 0 0 5px, rgb(81, 122, 183) 0 0 0 7px, rgb(250, 198, 70) 0 0 0 9px, rgb(128, 201, 111) 0 0 0 12px;
            z-index: 2;
        }
        
        #box .eye-left {
            position: absolute;
            top: 132px;
            left: 133px;
            width: 47px;
            height: 65px;
            transform: rotate(45deg);
            background-color: rgb(57, 56, 63);
            border-radius: 69px 62px 69px 69px/97px 93px 97px 97px;
            z-index: 4;
        }
        
        #box .eye-left::before {
            content: "";
            position: absolute;
            top: 13px;
            left: 15px;
            width: 23px;
            height: 23px;
            border-radius: 50%;
            border: 3px solid #fff;
            background-color: rgb(60, 60, 57);
            z-index: 5;
            box-sizing: border-box;
        }
        
        #box .eye-left::after {
            content: "";
            position: absolute;
            top: 18px;
            left: 25px;
            width: 6px;
            height: 6px;
            z-index: 6;
            border-radius: 50%;
            background-color: #fff;
            z-index: 6;
        }
        
        #box .eye-right {
            left: 218px;
            transform: rotate(-45deg);
        }
        
        #box .eye-right::before {
            top: 10px;
            left: 9px;
        }
        
        #box .eye-right::after {
            top: 15px;
            left: 16px;
        }
        
        #box .nose {
            position: absolute;
            top: 175px;
            left: 188px;
            width: 26px;
            height: 14px;
            transform: rotate(180deg);
            z-index: 6;
            overflow: hidden;
        }
        
        #box .nose::after {
            width: 20px;
            height: 20px;
            background-color: #393939;
            border-radius: 6px 9px 9px 16px / 6px 8px 6px 6px;
            content: "";
            position: absolute;
            top: -1px;
            left: 0;
            transform-origin: top left;
            transform: rotate(45deg) translate3d(50%, -50%, 0);
            box-sizing: border-box;
        }
        
        #box .mouth {
            position: absolute;
            top: 192px;
            left: 176px;
            width: 50px;
            height: 35px;
            background-color: #393939;
            border-radius: 50% 48% 60% / 48% 45%;
            transform: rotate(1deg);
            z-index: 5;
        }
        
        #box .mouth::before {
            content: "";
            position: absolute;
            top: -12px;
            left: 4px;
            width: 35px;
            height: 20px;
            border-radius: 50%;
            background-color: #fff;
            z-index: 1;
        }
        
        #box .mouth::after {
            content: "";
            position: absolute;
            bottom: 3px;
            left: 7px;
            width: 36px;
            height: 13px;
            background-color: rgb(163, 51, 51);
            border-radius: 50% 48% 80% 80% / 68% 45% 80% 60%;
        }
        
        #box .hand-left {
            position: absolute;
            top: 203px;
            left: 83px;
            width: 40px;
            height: 70px;
            background-color: #393939;
            transform: rotate(30deg);
        }
        
        #box .hand-left::after {
            content: "";
            position: absolute;
            bottom: -22px;
            left: 0;
            width: 41px;
            height: 40px;
            background-color: #393939;
            border-radius: 50%;
        }
        
        #box .hand-right {
            position: absolute;
            top: 160px;
            left: 270px;
            width: 40px;
            height: 70px;
            background-color: #393939;
            border-radius: 44px 0 80px / 100px 30px 100px;
            transform: rotate(40deg);
            transform-origin: bottom center;
        }
        
        #box .hand-right::after {
            content: "❤";
            position: absolute;
            top: -14px;
            left: 5px;
            width: 35px;
            height: 35px;
            font-size: 20px;
            text-align: center;
            letter-spacing: -2px;
            color: rgb(163, 51, 51);
            background-color: #393939;
            border-radius: 40px 40px 55px / 100px 40px 100px 0;
            transform: rotate(-55deg);
            transform-origin: center;
        }
        
        #box .footer-left {
            position: absolute;
            top: 300px;
            left: 142px;
            width: 40px;
            height: 40px;
            background-color: #393939;
            border-radius: 0 50px / 0 18px 0 0;
            z-index: 7;
        }
        
        #box .footer-left::before {
            content: "";
            position: absolute;
            bottom: -14px;
            left: 0;
            width: 42px;
            height: 20px;
            background-color: #393939;
            border-radius: 0 14px 4px;
        }
        #box .footer-right {
            left: 220px;
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div id="box">
        <div class="body"></div>
        <div class="ear-left"></div>
        <div class="ear-right"></div>
        <div class="face"></div>
        <div class="eye-left"></div>
        <div class="eye-left eye-right"></div>
        <div class="nose"></div>
        <div class="mouth"></div>
        <div class="hand-left"></div>
        <div class="hand-right"></div>
        <div class="footer-left"></div>
        <div class="footer-left footer-right"></div>
    </div>

</body>

</html>
本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
特效
本文分享自作者个人站点/博客前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！
特效
登录后参与评论
0 条评论
热度
CSS3.0实现一个有趣特效

CSS3.0实现一个有趣特效

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐
