css布局实现蝙蝠侠卡通图像代码-html代码-BFW代码库

css布局实现蝙蝠侠卡通图像代码

代码语言：html

代码描述：css布局实现蝙蝠侠卡通图像代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
  <meta charset="UTF-8">

  
  
  
<style>
body {
  min-height: 100vh;
  margin: 0;
  display: grid;
  place-content: center;
  grid-template-columns: 1fr auto 1fr;
  justify-items: center;
}

:root {
  --mask-clr: #043458;
  --skin-clr: #ffe681;
}

.head {
  width: 20vmin;
  height: 30vmin;
  border: 1px solid;
  border-top-left-radius: 15vmin 18vmin;
  border-top-right-radius: 15vmin 18vmin;
  border-bottom-left-radius: 10vmin 10vmin;
  border-bottom-right-radius: 10vmin 10vmin;
  position: relative;
  background-image: conic-gradient(#0000 0 85deg, #000 0 90deg, #0000 0), conic-gradient(#0000 0 270deg, color-mix(in lab, var(--mask-clr) 90%, #0000) 0 275deg, #0000 0 290deg, color-mix(in lab, var(--mask-clr) 90%, #0000) 0), conic-gradient(color-mix(in lab, var(--mask-clr) 90%, #0000) 0 75deg, #0000 0 85deg, color-mix(in lab, var(--mask-clr) 90%, #0000) 0 90deg, #0000 0), radial-gradient(15% 5%, #ebebe3 50%, #0000 0), radial-gradient(15% 5%, #ebebe3 50%, #0000 0), conic-gradient(#0000 0 160deg, color-mix(in lab, var(--mask-clr), #000) 0deg 200deg, #0000 0deg), linear-gradient(var(--mask-clr) 70%, var(--skin-clr) 0);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% .........完整代码请登录后点击上方下载按钮下载查看