CSS 画冰墩墩~

前端瓶子君

共 740字,需浏览 2分钟

 ·

2022-02-20 03:07

前端瓶子君,关注公众号

回复算法,加入前端编程面试算法每日一题群



抢不上冰墩墩就自己画一个!
在线预览
代码:




    
    
    
    
    冰墩墩


    
        
        
        
        
        
            
                
                
            
        
        
        
        
            
            
            
            
            
                
                    
                        
                    
                
            
            
                
                    
                        
                    
                
            

            
                
            
            
            
        
    
    
        const wWidth = window.innerWidth;
        if (wWidth < 666) {
            const bdd = document.getElementById('bingdd');
            bdd.style.zoom = \`${wWidth / 666}\`;
        }
    



\* {
    box-sizing: border-box;
    margin: 0;
}
body {
    padding-top: 100px;
    overflow: hidden;
}
.wrapper {
    width477px;
    height: 555px;
    margin: 0 auto;
    position: relative;
}
.body {
    width100%;
    height: 100%;
    border: 3px solid #333333;
    border-radius: 46464949%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 1;
    background-color: #fff;
}
.ear {
    width73px;
    height: 73px;
    background-color: #0F0F10;
    border-radius: 50px;
    position: absolute;
}
.ear\_l {
    left66px;
    top: 11px;
}
.ear\_r {
    right66px;
    top: 11px;
}
.arm {
    width172px;
    height: 88px;
    background-color: #0F0F10;
    border-radius: 50px;
    position: absolute;
}
.arm\_l {
    left-143px;
    top: 225px;
    transform-origin: 172px 39px;
    transform: rotate(-55deg);
    border-radius: 503050px 50px;
    animation: 2s ease-in-out 1.1s infinite lRotate;
}
@keyframes lRotate {
    0% { 
        transform: rotate(-55deg);
    }
    10% { 
        transform: rotate(-60deg);
        box-shadow: 0 10px 10px rgba(15,15,16.3);
    }
    20% { 
        transform: rotate(-50deg);
    }
    30% { 
        transform: rotate(-58deg);
    }
    40%,50%,60%,70%,80%,90%,100% { 
        transform: rotate(-55deg);
    }
}
.arm\_r {
    right-140px;
    top: 202px;
    transform: rotate(-58deg);
    border-radius: 8050px 80px 80%;
    transform-origin: 0 39px;
    animation: 2s ease-in-out 1s infinite rRotate;
}
@keyframes rRotate {
    0% { 
        transform: rotate(-58deg);
    }
    10% { 
        transform: rotate(-72deg);
        box-shadow: 0px -10px 10px rgba(15,15,16.3);
    }
    20% { 
        transform: rotate(-45deg);
        box-shadow: 0 10px 10px rgba(15,15,16.3);
    }
    30% { 
        transform: rotate(-70deg);
        box-shadow: 0px -10px 10px rgba(15,15,16.3);
    }
    40%,50%,60%,70%,80%,90%,100% { 
        transform: rotate(-58deg);
    }
}
.heart {
    position: absolute;
    right: 54px;
    top: 25px;
    transform: rotate(30deg);
}
.heart\_l {
    width45px;
    height: 30px;
    background-color: #ad2025;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 50500;
}
.heart\_r {
    width45px;
    height: 30px;
    background-color: #ad2025;
    position: absolute;
    top: -8px;
    left: -8px;
    border-radius: 0 50500;
    transform: rotate(-90deg);
}
.leg {
    width100px;
    height: 145px;
    background-color: #0F0F10;
    position: absolute;
    bottom: -60px;
}
.leg\_l {
    left96px;
    border-radius: 16703050px;
    transform: rotate(-3deg);
}
.leg\_r {
    left269px;
    bottom: -63px;
    border-radius: 701650px 30%;
    transform: rotate(4deg);
}
.face {
    width400px;
    height: 352px;
    position: absolute;
    left: 44px;
    top: 34px;
    border: 3px solid #66E085;
    border-radius: 93907574%;
    z-index: 5;
}
.line {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 93907574%;
}
.line1 {
    width394px;
    height: 346px;
    border: 2px solid #F921E7;
}
.line2 {
    width390px;
    height: 342px;
    border: 3px solid #EDEC59;
    left: 2px;
    top: 2px;
}
.line3 {
    width378px;
    height: 330px;
    left: 8px;
    top: 8px;
    background-color: #fff;
}
.line3::after {
    position: absolute;
    content: '';
    top: -3px; 
    bottom: -3px;
    left: -3px; 
    right: -3px;
    background: linear-gradient(217deg, rgba(1,129,200.3), rgba(255,0,0,070.71%),
                linear-gradient(127deg, rgba(1,129,2001), rgba(0,255,0,070.71%),
                linear-gradient(60deg, rgba(1,129,200.1), rgba(0,0,255,070.71%),
                linear-gradient(336deg, rgba(33,41,2381), rgba(0,0,255,070.71%);
    border-radius: 30px;
    z-index: -1;
    border-radius: 93907574%;
}
.line4 {
    width378px;
    height: 330px;
    left: 8px;
    top: 8px;
    border: 3px solid #A3F1FE;
}
.eye {
    width172px;
    height: 110px;
    background-color: #0F0F10;
    border-radius: 60%;
    position: absolute;
}
.eye\_l {
    left24px;
    top: 80px;
    transform: rotate(-45deg);
}
.eye\_r {
    right8px;
    top: 80px;
    transform: rotate(-135deg) scaleY(-1);
}
.eye .eye-c1 {
    width70px;
    height: 70px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    right: 33px;
    top: 26px;
}
.eye .eye-c2 {
    width60px;
    height: 60px;
    background-color: #423e37;
    border-radius: 50%;
    position: absolute;
    right: 4px;
    top: 5px;
}
.eye .eye-c3 {
    width20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    right: 7px;
    top: 11px;
}
.eye\_r .eye-c3 {
    right11px;
    top: 6px;
}
.nose {
    width43px;
    height: 34px;
    border-radius: 100%;
    background-color: #0F0F10;
    position: absolute;
    top: 140px;
    left: 189px;
    z-index: 8;
}
.nose-c {
    width26px;
    height: 15px;
    border-radius: 100%;
    background: linear-gradient(to bottom, rgba(255255255.5), rgba(2552552550));
    margin: 0 auto;
    margin-top: 4px;
}
.mouth {
    width110px;
    height: 40px;
    position: absolute;
    top: 160px;
    left: 151px;
    z-index: 3;
    /\* 设置border-bottom在ios手机上边也会有一点点边框颜色 \*/
    /\* border-bottom: 3px solid #0F0F10; \*/
    box-shadow: 0 2px #0F0F10;
    border-radius: 100%;
    background-color: #fff;
}
.mouth-c {
    width88px;
    height: 36px;
    position: absolute;
    top: 172px;
    left: 162px;
    border-bottom: 2px solid #0F0F10;
    border-radius: 100%;
    margin: 0 auto;
    z-index: 1;
    background-color: #A51320;
}

来自: 望记

https://segmentfault.com/a/1190000041385432


最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿
回复「算法」,加入前端编程源码算法群,每日一道面试题(工作日),第二天瓶子君都会很认真的解答哟!
回复「交流」,吹吹水、聊聊技术、吐吐槽!
回复「阅读」,每日刷刷高质量好文!
如果这篇文章对你有帮助,在看」是最大的支持
 》》面试官也在看的算法资料《《
“在看和转发”就是最大的支持
浏览 77
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报