代码如下
<!DOCTYPE html> <!-- saved from url=(0055)http://jadyoap.bj.bcebos.com/ife%2FcssCatAnimation.html --> <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>黄金梅丽号</title> <style type="text/css"> body { background-color: #74b7e4; } /* face */ .face { position: absolute; left: 50%; margin-left: -175px; top:20%; width: 350px; height: 350px; border-radius: 50%; border: 2px solid #3f200b; z-index: 10; background: #fbf8f1; overflow: hidden; } /*eye*/ .eye-out{ position: relative; margin-top: 25%; } .eye{ border: 1px solid #000; width: 80px; height: 80px; border-radius: 50%; display:flex; justify-content:center; align-items:center; } .left{ position: absolute; left:60px; } .eye-in{ display: inline-block; width: 60px; height: 60px; border-radius: 50%; background-color: black; } .right{ position: absolute; right:60px; } /*nose*/ .nose-out{ position: relative; margin-top: 60%; display: flex; justify-content: center; align-items: center; } .nose-down{ margin-top: -14%; } .nose-left{ height: 30px; border-left: 2px solid black; transform: rotate(-40deg); position: relative; left:-6.5px; } .nose-right{ height: 30px; border-left: 2px solid black; transform: rotate(40deg); position: relative; left:10.5px; } .nose-bottom{ position: relative; top:25px; left: -1px; height: 30px; border-left: 2px solid black; } .nose-bottom-left{ position: relative; top:55px; left:0.5px; width: 100px; height: 30px; border-left: 2px solid black; border-bottom: 2px solid black; border-radius: 80% 80% 80% 70%; } .nose-bottom-right{ position: relative; top:55px; left:2.5px; width: 100px; height: 30px; border-right: 2px solid black; border-bottom: 2px solid black; border-radius: 80% 80% 80% 80%; } /*horn*/ .horn{ width: 100px; height: 100px; border: 1px solid black; border-radius: 100% 100% 100% 100%; border-bottom: none; position: relative; left: 35px; top: 3px; background-color: #9c857F; } .horn-big{ transform:rotate(-30deg); position: relative; left: -10px; top:40px; width: 150px; height: 150px; border: 1px solid black; border-radius: 100% 100% 100% 100%; border-top: none; background-color: #A08D86; } .horn-left{ position: relative; top: 90px; left: 32.5%; } .horn-right{ position: absolute; top: 90px; right: 32.5%; } .horn-link{ position: relative; left: -50px; top:-190px; height: 215px; width: 300px; border-top: 1px solid black; border-left: 1px solid black; border-radius: 100% 100% 0 100%; background-color: #B7A99C; z-index: -5; } .hornbig-right{ transform:rotate(30deg); position: relative; left: 150px; } .horn2{ width: 100px; height: 100px; border: 1px solid black; border-radius: 100% 100% 100% 100%; border-bottom: none; position: absolute; right: 35px; top: 3px; background-color: #9c857F; } .horn-link2{ position: relative; left: 50px; top:-190px; height: 215px; width: 300px; border-top: 1px solid black; border-right: 1px solid black; border-radius: 100% 100% 100% 0%; background-color: #B7A99C; z-index: -5; } </style> </head> <body> <div class="container"> <!-- 脸 --> <div class="face"> <div class="eye-out"> <div class="eye left"> <div class="eye-in"></div> </div> <div class="eye right"> <div class="eye-in"></div> </div> </div> <div class="nose-out"> <div class="nose-left"></div> <div class="nose-right"></div> <div class="nose-bottom"></div> </div> <div class="nose-out nose-down"> <div class="nose-bottom-left"></div> <div class="nose-bottom-right"></div> </div> </div> <div class="horn-left"> <div class="horn-big"> <div class="horn"></div> </div> <div class="horn-link"></div> </div> <div class="horn-right"> <div class="horn-big hornbig-right"> <div class="horn2"></div> </div> <div class="horn-link2"></div> </div> </div> </body> </html>
鬼畜梅利号用纯css完成，主要有以下几个点：
一.布局
①position:relative/absolute;
②display:flex;
③overflow: hidden;
二.特殊形状
①border-radius
学到一个如何画
半圆边框
再结合一下transform等效果！
难度是真的不大，主要是练练手熟悉一下CSS属性！
哈哈哈哈，越看越觉得搞笑
