代码如下
<!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属性！
哈哈哈哈，越看越觉得搞笑
【原创】纯CSS画黄金梅丽号！
原文地址：https://www.cnblogs.com/cndotabestdota/p/9107080.html