纯css制作虾

来源：互联网发布：备案域名转让编辑：程序博客网时间：2024/06/10 05:39

厉害了
效果
这里写图片描述

代码如下

<!DOCTYPE html><html lang="zh"><head>  <meta charset="UTF-8">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <meta http-equiv="X-UA-Compatible" content="ie=edge">  <title>虾��</title>  <link rel="stylesheet" href="styles/main.css"></head><body>  <main>    <h1>��</h1>    <div class="stage">      <div class="shrimp">        <div class="section section-head">          <div class="part1"></div>          <div class="part2"></div>        </div>        <div class="section section-1">          <div class="part2"></div>        </div>        <div class="section section-2">          <div class="part2"></div>        </div>        <div class="section section-3">          <div class="part2"></div>        </div>        <div class="section section-4">          <div class="part2"></div>        </div>        <div class="section section-5">          <div class="part2"></div>        </div>        <div class="section section-6">          <div class="part2"></div>        </div>        <div class="eye"></div>        <div class="beard beard1">          <div class="end"></div>        </div>        <div class="beard beard2">          <div class="end"></div>        </div>        <div class="leg leg1">          <div class="sect sect1"></div>          <div class="sect sect2"></div>          <div class="sect3"></div>        </div>        <div class="leg leg2">          <div class="sect sect1"></div>          <div class="sect sect2"></div>          <div class="sect3"></div>        </div>        <div class="leg leg3">          <div class="sect sect1"></div>          <div class="sect sect2"></div>          <div class="sect3"></div>        </div>        <div class="tails">          <div class="t t1"></div>          <div class="t t2"></div>          <div class="t t3"></div>        </div>      </div>      <p>A <strong>Shrimp </strong>, code with CSS only, by <a href="https://github.com/songlairui/Combo-the-road/tree/master/23_css-img">Songlairui</p </a></div>  </main>  <script src="scripts/index.js"></script></body></html>

* {  box-sizing: border-box;}html,body,h1,h3,h5,h6,ul,ol,li {  padding: 0;  margin: 0}html,body {  flex: 1;  min-height: 100%;}html,body {  display: flex;  flex-flow: column}html {  background: linear-gradient(#f1f2f4, silver)}main {  flex: 1;  min-width: 100%;  display: flex;  flex-flow: column;  justify-content: center;  align-items: center;}.section {  width: 100px;  height: 64px;  position: relative;}.section>.part1 {  bottom: 0;  left: 0;  background: #F26D64;  width: 150px;  height: 25px;  border-radius: 60% 10% 50% 60% / 90% 90% 100% 100%;  overflow: hidden;  position: absolute;  transform: translate(9px, -6px) rotate(-11deg) skewX(-30deg);  transform-origin: bottom left;}.section>.part2 {  top: 0;  left: 0;  background: #F26D64;  width: 100px;  height: 54px;  border-radius: 52% 50% 54% 58% / 54% 50% 51% 56%;  overflow: hidden;  position: absolute;  transform: rotate(10deg) skewX(-20deg);  transform-origin: bottom left;}.section>.part2::after {  position: absolute;  content: '';  background: #F26D64;  width: 200%;  height: 1000%;  top: -0%;  left: -0%;  border-radius: 50%/50%;  box-shadow: inset -14px -294px 0px #DE393C;  transform: skewX(20deg) translate(-11px, -215px) rotate(45deg)}.section-head .part1 {  transform: translate(9px, -6px) rotate(-11deg) skewX(-70deg);}.section-head .part2 {  border-radius: 150% 10% 70% 90% / 90% 80% 80% 90%;  transform: rotate(10deg) skewX(-60deg);  /*overflow: visible;*/}.section-head .part2::after {  width: 120%;  height: 120%;  top: -10%;  left: -10%;  border-radius: 52% 10% 54% 58% / 54% 50% 51% 56%;  box-shadow: inset -17px -14px 0px #DE393C;  transform: none;}.shrimp {  position: relative;  min-width: 400px;  min-height: 400px;  transform: translate(100px, 100px)}.shrimp>* {  position: absolute;  top: 0px;  left: 0px;  /*transform-origin: 100px 200px;*/  z-index: 109;}.shrimp>.section-head {  transform: scale(1.1) translate(100px, 0px)}.shrimp>.section:nth-child(2) {  transform: translate(70px, 20px) scale(.9) rotate(-10deg);  z-index: 99;}.shrimp>.section:nth-child(3) {  transform: translate(20px, 40px) scale(.9) rotate(-20deg);  z-index: 89;}.shrimp>.section:nth-child(4) {  transform: translate(-20px, 70px) scale(.8) rotate(-50deg);  z-index: 79;}.shrimp>.section:nth-child(5) {  transform: translate(-40px, 110px) scale(.8) rotate(-70deg);  z-index: 69;}.shrimp>.section:nth-child(6) {  transform: translate(-50px, 160px) scale(.7) rotate(-90deg);  z-index: 59;}.shrimp>.section:nth-child(7) {  transform: translate(-40px, 200px) scale(.6) rotate(-105deg);  z-index: 49;}/* 眼睛 */.shrimp .eye {  transform: translate(180px, 5px);  width: 40px;  height: 40px;  padding: 10px;  display: flex;  justify-content: center;  align-items: center;  border-radius: 50%;  /*position: relative;*/  background: white;  /*border: thin solid black;*/  z-index: 199;}.shrimp .eye::before {  content: " ";  display: flex;  flex: 1;  min-height: 100%;  background: black;  border-radius: 50%;}/* 胡须 */.beard {  position: absolute;  top: 0;  left: 0;  width: 50px;  height: 200px;  z-index: 189;}.beard1 {  transform: translate(55px, -120px) rotate(-90deg);}.beard2 {  transform: translate(20px, -51px) rotate(-59deg) scale(1, .8);}.beard>div {  position: absolute;  top: 0;  left: 0;}.beard.beard1 .end {  border-radius: 100% 0% 0% 00%;  width: 30px;  height: 100px;  background: transparent;  border-top: 1px solid #DE393C;  border-left: 6px solid #DE393C;}.beard.beard1 .end::before {  content: "";  display: block;  position: absolute;  border-radius: 0% 100% 0% 00%;  width: 50px;  height: 50px;  background: transparent;  border-top: 7px solid #DE393C;  border-right: 20px solid #DE393C;  transform: translate(-52px, 133px) rotate(80deg) skewX(50deg)}.beard.beard2 .end {  border-radius: 00% 100% 0% 00%;  width: 30px;  height: 100px;  background: transparent;  border-top: 1px solid #DE393C;  border-right: 7px solid #DE393C;}.beard.beard2 .end::before {  content: "";  display: block;  position: absolute;  border-radius: 100% 0% 0% 00%;  width: 50px;  height: 50px;  background: transparent;  border-top: 8px solid #DE393C;  border-left: 20px solid #DE393C;  transform: translate(11px, 120px) rotate(-85deg) skewX(-50deg)}/* 腿 */.leg {  position: absolute;}.leg.leg1 {  transform: translate(100px, 100px) rotate(-81deg)}.leg.leg2 {  transform: translate(65px, 115px) rotate(-71deg)}.leg.leg3 {  transform: translate(40px, 130px) rotate(-61deg)}.leg .sect {  border: none;  background: transparent;  border-left: 10px solid #DE393C;  border-radius: 100% 0 0 0;  width: 30px;  height: 40px;  position: absolute;}.leg .sect::before {  content: "";  display: block;  position: absolute;  border-radius: 100% 00% 00% 100%/ 100% 00% 0% 30%;  width: 10px;  height: 30px;  top: 0px;  left: 0px;  background: #DE393C;  transform: translate(-10px, 9px) rotate(-36deg) skewX(-50deg);  clip-path: circle(15px at 0px 30px)}.leg .sect::after {  content: "";  display: block;  position: absolute;  border-radius: 00% 100% 100% 00%/ 00% 100% 30% 0%;  width: 10px;  height: 30px;  top: 0px;  left: 0px;  background: #DE393C;  transform: translate(-8px, 14px) rotate(44deg) skewX(40deg);  clip-path: circle(15px at 0px 30px)}.leg .sect2 {  transform: translate(-18px, 31px) rotate(52deg) scale(-0.9, .8);}.leg .sect3 {  position: absolute;  top: 0px;  left: 0px;  width: 15px;  height: 20px;  background: transparent;  border-left: 9px solid #DE393C;  border-radius: 0% 0% 0% 100%;  transform: translate(-24px, 68px) rotate(48deg) scale(.7, 1);}.tails {  position: absolute;  top: 0;  left: 0;  transform: translate(25px, 270px) rotate(-105deg);  z-index: 9;}.tails>.t {  position: absolute;  top: 0;  left: 0;  width: 30px;  height: 30px;  background: #F26D64;  border-radius: 100% 0;  overflow: hidden;  transform-origin: 120% -20%;}.tails>.t1 {  transform: rotate(15deg) skew(-5deg, -5deg);}.tails>.t2 {  transform: rotate(40deg) skew(0deg, 0deg) scale(1.2);}.tails>.t3 {  transform: rotate(75deg) skew(5deg, 5deg) scale(1.1);}.tails>.t::before {  content: '';  position: absolute;  top: 0;  left: 0;  width: 200%;  height: 200%;  background: transparent;  box-shadow: inset 25px -25px 0 #DE393C;  border-radius: 100% 0;  transform: translate(-19px, -11px) skew(-25deg, -25deg)}

阅读全文

0 0

纯css制作 虾

纯css制作虾