不同的icon图标合成一个人脸轮廓效果代码-html代码-BFW代码库

不同的icon图标合成一个人脸轮廓效果代码

代码语言：html

代码描述：不同的icon图标合成一个人脸轮廓效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
html, body, main { 
  height: 100%; 
  margin: 0; 
}

main { 
  display: flex; 
  align-items: center; 
  justify-content: center;  
  background: linear-gradient(135deg, purple, red);
  filter: saturate(200%) sepia(50%) hue-rotate(-26deg);
}

container {
  width: 900px; height: 600px;
  overflow: hidden;
  transform: scale(.8);
}

p {
  margin: 0;
  word-break: break-all;
  text-align: right;
  line-height: 1.1;
  font-size: 10px;
  color: #F0FFF3;
  --offset: 50;
  -webkit-mask: linear-gradient(to left, #fff, transparent calc(var(--offset) * 1%));
          mask: linear-gradient(to left, #fff, transparent calc(var(--offset) * 1%));
}

span {
  text-shadow:
    10px 0 10px currentColor,
    -10px 0 10px currentColor;
}

.shape {
  width: 400px; height: 600px;
  float: right;
  shape-outside: polygon(
    0.25% 2px, 99.94% 0.27%, 99.75% 100%, 19.87% 100.03%, 0 100%, 30.61% 100.07%, 
    37.38% 99.82%, 44.21% 99.38%, 50.92% 99.34%, 71.39% 98.43%, 76.61% 98.79%, 
    82.65% 97.6%, 85.9% 95.73%, 90.12% 93.85%, 88.45% 89.91%, 87.41% 87.1%, 
    85.48% 85.09%, 84.96% 82.33%, 88.66% 81.41%, 90.55% 79.29%, 91.75% 77.23%, 
    91.23% 75.11%, 88.48% 73.75%, 90.93% 72.26%, 92.34% 70.16%, 91.59% 67.66%, 
    89.87% 64.91%, 87.01% 63.42%, 89.87% 62.01%, 93.04% 60.71%, 96.53% 58.57%, 
    97.8% 55.26%, 95.........完整代码请登录后点击上方下载按钮下载查看