当前位置:首页 » 《资源分享》 » 正文

HTML+CSS+JS实现 ❤️卡通足球人物梅西ui特效❤️_java李阳勇的博客

11 人参与  2021年10月11日 08:23  分类 : 《资源分享》  评论

点击全文阅读


🍅 作者主页:Java李杨勇 

🍅 简介:Java领域优质创作者🏆、【java李杨勇】公号作者✌  简历模板、学习资料、面试题库、技术互助【关注我,都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝   

效果演示: 文末获取源码

主要代码实现:

CSS样式:

html,
body {
    background: #fabf54;
}

.cartoon {
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 90vmin;
    height: 90vmin;
}

.cartoon div {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

HTML代码 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CodePen - CSS Messi</title>
    <meta name="monetization" content="$ilp.uphold.com/WUdKN2pAgLAG" />
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="css/style.css">

</head>

<body>

    <div class="cartoon">
        <div class="head">
            <div class="front-light"></div>
            <div class="back-light"></div>
            <div class="ear"></div>
            <div class="cheek"></div>
            <div class="nose"></div>
            <div class="bear-shadow"></div>
        </div>
        <div class="beard">
            <div class="bear-shadow"></div>
        </div>
        <div class="hair">
            <div class="hair-dark"></div>
        </div>
        <div class="body">
            <div class="body-light"></div>
            <div class="body-dark"></div>
            <div class="shorts">
                <div class="shorts-lines"></div>
                <div class="shorts-lines-dark"></div>
                <div class="shorts-red"></div>
            </div>
            <div class="body-line body-line-1"></div>
            <div class="body-line body-line-2"></div>
            <div class="body-line body-line-3"></div>
            <div class="body-line body-line-4"></div>
            <div class="body-line body-line-5"></div>
            <div class="body-dark-line body-dark-line-1"></div>
            <div class="body-dark-line body-dark-line-2"></div>
        </div>
        <div class="jersey">
            <div class="red red-1"></div>
            <div class="red red-2"></div>
            <div class="red red-3"></div>
            <div class="dark-blue"></div>
            <div class="bright-red"></div>
            <div class="yellow yellow-1"></div>
            <div class="yellow yellow-2"></div>
            <div class="yellow yellow-3"></div>
            <div class="zero"></div>
            <div class="light-top"></div>
            <div class="jersey-shadow"></div>
        </div>
        <div class="hand-1">
            <div class="hand-1-shadow"></div>
        </div>
        <div class="body-top">
            <div class="body">
                <div class="body-light"></div>
                <div class="body-dark"></div>
            </div>
        </div>
        <div class="hand-2">
            <div class="hand-2-shadow"></div>
        </div>
    </div>

</body>

</html>

源码获取

大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方


点击全文阅读


本文链接:http://m.zhangshiyu.com/post/29807.html

获取  实战  源码  
<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • [全民县令:我有亿张增幅卡]反转剧情碎片化试读_[李越]小说精彩章节免费试读
  • 此去经年人未还速览(沈青禾霍沉洲),此去经年人未还速览
  • [情待成追忆]节选名场面直通车‌_「清玄喻橙喻橙樱」小说精彩章节试读
  • 京城玫瑰被天价拍卖后,狗男人悔疯了好文分享列表_京城玫瑰被天价拍卖后,狗男人悔疯了好文分享(怀礼)
  • 爱到岔路口完结爽文(谢泽昭温韵)_爱到岔路口完结爽文谢泽昭温韵
  • 爱到岔路口(谢泽昭温韵)全书浏览_爱到岔路口全书浏览
  • (番外)+(全书)霍沉洲沈青禾(霍沉洲沈青禾+结局+番外)_(霍沉洲沈青禾)列表_笔趣阁(霍沉洲沈青禾+结局+番外)
  • 此去经年人未还+全书+番外(沈青禾霍沉洲)列表_此去经年人未还+全书+番外(沈青禾霍沉洲)结局篇+番外在线
  • 风起时爱已荒芜(顾长歌宋锦),风起时爱已荒芜
  • 白丁儿罗佑霖(石女退婚十八次后,彩礼涨到了百万白丁儿罗佑霖结局+番外)结局_(白丁儿罗佑霖石女退婚十八次后,彩礼涨到了百万白丁儿罗佑霖结局+番外全书结局)结局列表_笔趣阁(白丁儿罗佑霖)
  • 此去经年人未还沈青禾结局+番外全书+后续+结局(沈青禾霍沉洲)列表_此去经年人未还沈青禾结局+番外(沈青禾霍沉洲)此去经年人未还沈青禾结局+番外全书+后续+结局在线
  • 都市第一军神萧岩林可儿完本_完本都市第一军神萧岩林可儿

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1