纯CSS绘图

下载代码

html

css

分享到微信朋友圈

html

css

html,
body {
  width: 100%;
  height: 100%;
  background: #060606;
  overflow: hidden;
}
html *,
body * {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  box-sizing: border-box;
}
html *:before, html *:after,
body *:before,
body *:after {
  content: "";
  position: absolute;
}

.face-1 {
  width: 7vmin;
  height: 49vmin;
  background: #2d2572;
  top: -47.8vmin;
  left: -14vmin;
  transform: rotate(44deg);
  border-radius: 100%;
}
.face-1::before {
  width: 10vmin;
  height: 10vmin;
  background: #2d2572;
  top: 37vmin;
  left: 3vmin;
}
.face-1::after {
  width: 18vmin;
  height: 56vmin;
  background: #ffffff;
  top: 0.5vmin;
  left: 2vmin;
  transform: rotate(1deg);
  border-radius: 10% 0 0 100%;
}
.face-2 {
  width: 33vmin;
  height: 70vmin;
  background: #ffffff;
  top: -2vmin;
  left: 12.5vmin;
  transform: rotate(44deg);
}
.face-2::before {
  width: 18vmin;
  height: 22vmin;
  background: #060606;
  top: 51vmin;
  left: 1.9vmin;
  transform: skewX(21deg) rotate(12deg);
  border-radius: 0 100% 0 0;
}
.face-2::after {
  width: 18vmin;
  height: 10.5vmin;
  background: #060606;
  top: 47.5vmin;
  left: -9vmin;
  transform: rotate(-22deg) skewY(12deg);
  border-radius: 0 100% 0 0;
}
.face-3 {
  width: 12vmin;
  height: 18vmin;
  background: #060606;
  top: 14vmin;
  left: -31vmin;
  transform: rotate(15deg);
  border-radius: 0 100% 0 0;
}
.face-3::before {
  width: 2vmin;
  height: 6vmin;
  background: #060606;
  top: 14.5vmin;
  left: 10.1vmin;
  transform: rotate(-5deg);
  border-radius: 1vmin;
}
.face-3::after {
  width: 15vmin;
  height: 12vmin;
  background: #060606;
  top: 26.3vmin;
  left: 10vmin;
  transform: rotate(-12deg);
}
.face-4 {
  width: 21vmin;
  height: 21.5vmin;
  background: #2d2572;
  top: 21.3vmin;
  left: -46.2vmin;
  transform: rotate(26deg) skewX(-15deg) skewY(-3deg);
  border-radius: 0 100% 0 0;
}
.face-4::before {
  width: 8.5vmin;
  height: 25.5vmin;
  background: #2d2572;
  top: 8.5vmin;
  left: 15vmin;
  transform: skewX(3deg);
  border-radius: 0 100% 0 100%;
}
.face-4::after {
  width: 35vmin;
  height: 5vmin;
  background: #2d2572;
  top: 25.1vmin;
  left: -1.2vmin;
  transform: rotate(36deg) skewX(50deg);
}
.face-5 {
  width: 10vmin;
  height: 10vmin;
  background: #2d2572;
  top: 42vmin;
  left: -52vmin;
}
.face-5::before {
  width: 5vmin;
  height: 12vmin;
  background: #2d2572;
  top: 5vmin;
  left: 5.2vmin;
  transform: rotate(23deg);
}
.face-5::after {
  width: 6.5vmin;
  height: 10vmin;
  background: #060606;
  top: 10.7vmin;
  left: 7.2vmin;
  transform: rotate(33.5deg) skewX(-8deg) skewY(-3deg);
  border-radius: 0 0 0 100%;
}
.face-6 {
  width: 2vmin;
  height: 5vmin;
  background: #060606;
  top: 54vmin;
  left: -39.4vmin;
  transform: rotate(28deg);
}
.face-6::before {
  width: 8vmin;
  height: 11vmin;
  background: #060606;
  top: -20.5vmin;
  left: -25.65vmin;
  transform: rotate(-1deg);
}
.face-6::after {
  width: 6vmin;
  height: 13vmin;
  background: #060606;
  top: -10.2vmin;
  left: -24.5vmin;
  transform: rotate(9deg);
}
.face-7 {
  width: 1vmin;
  height: 5vmin;
  background: #060606;
  top: 34.2vmin;
  left: -74vmin;
  transform: rotate(-25deg);
}
.face-7::before {
  width: 7vmin;
  height: 3vmin;
  background: #060606;
  top: -9.3vmin;
  left: 17.9vmin;
  transform: rotate(50deg);
}
.face-7::after {
  width: 7vmin;
  height: 25vmin;
  background: #060606;
  top: 12.3vmin;
  left: 31.2vmin;
  transform: rotate(64deg);
}
.face-8 {
  z-index: 4;
  width: 3vmin;
  height: 10vmin;
  background: #060606;
  top: -25vmin;
  left: 83.1vmin;
  transform: rotate(60deg);
}
.face-8::before {
  width: 15vmin;
  height: 40vmin;
  background: #060606;
  top: 7.2vmin;
  left: 4.9vmin;
  transform: rotate(-15deg);
  border-radius: 0.2vmin 0 0 0;
}
.face-8::after {
  width: 3vmin;
  height: 8vmin;
  background: #060606;
  top: 24vmin;
  left: 3.5vmin;
  transform: rotate(24deg);
  border-radius: 100%;
}
.face-9 {
  z-index: 4;
  width: 9.5vmin;
  height: 4vmin;
  background: #060606;
  top: 21.8vmin;
  left: 21.7vmin;
  transform: rotate(-38.5deg);
  border-radius: 100%;
}
.face-9::before {
  width: 5vmin;
  height: 2vmin;
  background: #060606;
  top: 1vmin;
  left: -2.1vmin;
  transform: rotate(-17deg);
}
.face-9::after {
  width: 17vmin;
  height: 5vmin;
  background: #060606;
  top: 0.6vmin;
  left: 3vmin;
  transform: rotate(-5deg);
  border-radius: 50% 50% 0 0;
}
.face-10 {
  z-index: 4;
  width: 2.5vmin;
  height: 9.5vmin;
  background: #ffffff;
  top: 9vmin;
  left: 32vmin;
  transform: rotate(51deg);
  border-radius: 100%;
}

.hair-1 {
  width: 50vmin;
  height: 10vmin;
  background: #060606;
  top: -62vmin;
  left: 52vmin;
  transform: rotate(33deg);
  border-radius: 100%;
}
.hair-1::before {
  width: 22vmin;
  height: 3.8vmin;
  background: #ffffff;
  top: 4.4vmin;
  left: 7vmin;
  transform: rotate(15deg) skewX(40deg);
  border-radius: 0 0 100% 100%;
}
.hair-1::after {
  width: 4vmin;
  height: 6vmin;
  background: #060606;
  top: -1.5vmin;
  left: 4.5vmin;
  transform: rotate(55deg);
}
.hair-2 {
  width: 25vmin;
  height: 10vmin;
  background: #ffffff;
  top: -45vmin;
  left: 75vmin;
  transform: rotate(20deg);
}
.hair-2::before {
  width: 60vmin;
  height: 14vmin;
  background: #060606;
  top: -8.8vmin;
  left: -25vmin;
  transform: rotate(24deg);
  border-radius: 100%;
}
.hair-2::after {
  width: 27.5vmin;
  height: 4vmin;
  background: #060606;
  top: 3.3vmin;
  left: -5.6vmin;
  transform: rotate(22deg);
  border-radius: 100%;
  box-shadow: 2vmin -9vmin 0 1.5vmin #060606;
}
.hair-3 {
  width: 26.3vmin;
  height: 1.8vmin;
  background: #ffffff;
  top: -56.5vmin;
  left: 63vmin;
  transform: rotate(38.5deg) skewX(60deg);
  border-radius: 0 0 0 100%;
}
.hair-3::before {
  width: 26.3vmin;
  height: 1.3vmin;
  background: #060606;
  top: -0.65vmin;
  left: 0.4vmin;
  transform: rotate(0.5deg);
  border-radius: 100%;
}
.hair-4 {
  width: 19vmin;
  height: 2vmin;
  background: #ffffff;
  top: -61.7vmin;
  left: 67.2vmin;
  transform: rotate(35deg) skewX(35deg);
  border-radius: 0 0 0 100%;
}
.hair-4::before {
  width: 19.5vmin;
  height: 1.4vmin;
  background: #060606;
  top: -0.65vmin;
  left: -0.2vmin;
  transform: rotate(0.5deg);
  border-radius: 100%;
}

.eye-left-1 {
  z-index: 2;
  width: 0;
  height: 0;
  border-top: 1vmin solid transparent;
  border-bottom: 1.4vmin solid transparent;
  border-left: 6.6vmin solid #feb415;
  top: 1.1vmin;
  left: -46vmin;
  transform: rotate(24deg);
}
.eye-left-1::before {
  width: 0;
  height: 0;
  border-top: 0.25vmin solid transparent;
  border-bottom: 0.25vmin solid transparent;
  border-left: 1.6vmin solid #060606;
  top: 5.5vmin;
  left: -7.1vmin;
  transform: rotate(-15deg);
}
.eye-left-2 {
  z-index: 1;
  width: 4vmin;
  height: 1.5vmin;
  background: #ffffff;
  top: 4.3vmin;
  left: -41.1vmin;
  transform: rotate(20deg);
  border-radius: 0 100% 0 0;
}
.eye-left-3 {
  z-index: 2;
  width: 8.5vmin;
  height: 1.7vmin;
  background: #060606;
  top: 3vmin;
  left: -45.5vmin;
  transform: rotate(24deg);
  border-radius: 100%;
}
.eye-left-3::before {
  width: 3vmin;
  height: 3.1vmin;
  background: #ffffff;
  top: 1.1vmin;
  left: 0.1vmin;
  transform: skewY(-15deg) skewX(-2deg);
}
.eye-left-3::after {
  width: 2vmin;
  height: 0.8vmin;
  background: #060606;
  top: 0.6vmin;
  left: 0.1vmin;
  transform: rotate(-5deg);
}
.eye-left-4 {
  z-index: 2;
  width: 0;
  height: 0;
  border-top: 0.6vmin solid transparent;
  border-bottom: 0.8vmin solid transparent;
  border-left: 2.2vmin solid #ffffff;
  top: 6.4vmin;
  left: -41.7vmin;
  transform: rotate(7deg);
}
.eye-left-4::before {
  width: 5.5vmin;
  height: 0.5vmin;
  background: #060606;
  top: 0.5vmin;
  left: -4vmin;
  transform: rotate(-20deg);
  border-radius: 0 0 0 1vmin;
}
.eye-left-4::after {
  width: 4.6vmin;
  height: 4.3vmin;
  background: #060606;
  top: -2.6vmin;
  left: -6.4vmin;
  border-radius: 50%;
}

.eye-right-1 {
  z-index: 3;
  width: 41vmin;
  height: 8.9vmin;
  background: #060606;
  top: -20.5vmin;
  left: 34vmin;
  transform: rotate(-14deg) skewX(15deg);
  border-radius: 70% 30% 100% 0%/70% 90% 10% 30%;
}
.eye-right-1::before {
  width: 35vmin;
  height: 8.5vmin;
  background: #2d2572;
  top: 2.4vmin;
  left: 0.7vmin;
  transform: rotate(-5deg) skewX(15deg);
  border-radius: 70% 30% 100% 0%/70% 90% 10% 30%;
}
.eye-right-1::after {
  width: 10vmin;
  height: 10vmin;
  background: #ffffff;
  top: 3vmin;
  left: -2vmin;
  transform: rotate(-40deg);
  border-radius: 0 0 50% 0;
}
.eye-right-2 {
  z-index: 3;
  width: 2vmin;
  height: 10.4vmin;
  background: #2d2572;
  top: -5.9vmin;
  left: 5.9vmin;
  transform: rotate(-19.5deg);
  border-radius: 100%;
}
.eye-right-2::before {
  width: 0.9vmin;
  height: 5vmin;
  background: #2d2572;
  top: -0.6vmin;
  left: 2.1vmin;
  transform: rotate(-42deg);
  border-radius: 100% 0 0 100%;
}
.eye-right-2::after {
  width: 4vmin;
  height: 9vmin;
  background: #2d2572;
  top: 1vmin;
  left: 1vmin;
  border-radius: 0 100% 0 0;
  box-shadow: 2.5vmin 2vmin 0 0.1vmin #2d2572;
}
.eye-right-3 {
  z-index: 2;
  width: 6vmin;
  height: 9vmin;
  background: #2d2572;
  top: -20.5vmin;
  left: 63vmin;
  transform: rotate(45deg);
}
.eye-right-4 {
  z-index: 3;
  width: 35vmin;
  height: 11.6vmin;
  background: #feb415;
  top: 0.3vmin;
  left: 28.2vmin;
  transform: rotate(-28deg) skewX(4deg);
  border-radius: 70% 30% 100% 0%/70% 90% 10% 30%;
}
.eye-right-4::before {
  z-index: 3;
  width: 35vmin;
  height: 11.6vmin;
  background: #060606;
  top: 2vmin;
  left: -0.5vmin;
  transform: rotate(12deg);
  border-radius: 70% 30% 100% 0%/70% 90% 10% 30%;
}
.eye-right-4::after {
  z-index: 3;
  width: 35vmin;
  height: 11.6vmin;
  background: #ffffff;
  top: 3.9vmin;
  left: -0.5vmin;
  transform: rotate(18deg);
  border-radius: 70% 30% 100% 0%/70% 90% 10% 30%;
}
.eye-right-5 {
  z-index: 3;
  width: 9vmin;
  height: 5vmin;
  background: #060606;
  top: 8.1vmin;
  left: 17.3vmin;
  transform: rotate(7deg);
  border-radius: 1vmin 0 0 0;
}
.eye-right-5::before {
  width: 17vmin;
  height: 12vmin;
  background: #ffffff;
  top: 1vmin;
  left: -7vmin;
  transform: rotate(-7deg);
  border-radius: 0 0 10vmin 0;
}
.eye-right-6 {
  z-index: 4;
  width: 3.7vmin;
  height: 2.3vmin;
  background: #feb415;
  top: -9.5vmin;
  left: 60vmin;
  transform: rotate(14deg);
  border-radius: 50%;
}
.eye-right-6::before {
  width: 2vmin;
  height: 3vmin;
  background: #060606;
  top: -0.8vmin;
  left: 3.2vmin;
  transform: rotate(-35deg);
}
.eye-right-6::after {
  width: 0;
  height: 0;
  border-top: 1vmin solid transparent;
  border-bottom: 2.2vmin solid transparent;
  border-left: 3.4vmin solid #ffffff;
  top: 4.55vmin;
  left: -1.4vmin;
  transform: rotate(10deg);
}
.eye-right-7 {
  z-index: 5;
  width: 7.5vmin;
  height: 4.9vmin;
  background: #060606;
  top: -3.8vmin;
  left: 48.3vmin;
  transform: rotate(2deg);
  border-radius: 50%;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg