液体三角形

下载代码

html

css

分享到微信朋友圈

html

<div id="curtains">
  <div class="curtain left-curtain"></div>
  <div class="curtain right-curtain"></div>
</div>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 308.95 358.87">
  <defs>
    <linearGradient id="orange" x1="76.7" y1="190.44" x2="279.75" y2="-12.62" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#ff8902"/>
      <stop offset="1" stop-color="#ff024b"/>
    </linearGradient>
    <linearGradient id="purple" x1="170.48" y1="309.24" x2="365.21" y2="114.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#7c00f2"/>
      <stop offset="1" stop-color="#f8006e"/>
    </linearGradient>
    <linearGradient id="pink" x1="170.48" y1="309.24" x2="365.21" y2="114.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#7c00f2"/>
      <stop offset="1" stop-color="#FA02D2"/>
    </linearGradient>
    <linearGradient id="bajablast" x1="170.48" y1="309.24" x2="365.21" y2="114.5" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#01FF8D"/>
      <stop offset="1" stop-color="#00FFFB"/>
    </linearGradient>
  </defs>
  <path class="top right" d="M352.49,115L202.91,375.19a3.35,3.35,0,0,1-5.82,0L146.5,287.25s-4.25-7.58-4.25-21c0-11.25,13.33-22.24,25.42-35.92,10.21-11.55,16.56-22.35,22.21-21.94a3.29,3.29,0,0,1,3.07,3.28c-0.18,7.1-16.58,16.13-21.45,21.57-4.65,5.2-15.11,14.88-12,20.17a3.18,3.18,0,0,0,3.15,1.48c8.48-1.1,10.3-10.74,14.52-8.9,6.8,3-8.43,11.82-9.43,24.6a3.37,3.37,0,0,0,.1,1.14c1.78,6.68,21.69,41.05,29.28,54a3.35,3.35,0,0,0,5.8,0L310,139.77a3.35,3.35,0,0,0-2.93-5c-7.32.07-19-.65-20.73-5.81-0.94-2.75-.19-5,1.69-9.37,2.33-5.43-5.06-7.62-3.75-14.81,0.87-4.77,9.58-14.88,10.85-16.33a3.13,3.13,0,0,0,.28-0.36c1-1.56,8-12.15,12.63-13.65a3.13,3.13,0,0,1,2,.09c7.55,2.81-9.87,10.63-12.19,17.21a3.35,3.35,0,0,0,4.66,4C328,83.67,331.76,55.34,340.83,61.5c10.5,6.33-35.33,31.83-29.33,41.17,4.51,7,27.07,7.49,38,7.29A3.35,3.35,0,0,1,352.49,115ZM184.37,232.59c-1.49,1.9-1.49,4.38,0,5.54s3.89,0.56,5.38-1.34,1.49-4.38,0-5.54S185.86,230.69,184.37,232.59Z" transform="translate(-44 -18.01)"/>
  <path class="top left" d="M44,110H196a64.86,64.86,0,0,0,26-5c16.5-6.87,19-11.36,23.63-13.75,4.38-2.25,9.13,2.81,5.24,5.53-7.62,5.34-2.4,7.07-2.35,7.1a0.31,0.31,0,0,0,.15-0.05c5.15,3.62,28.73-19.79,49.58-44.08,13.82-16.1,31.42-43.75,37.88-41.62,12.58,4.14-16.37,30-31,43.5-5.07,4.68-21.69,23.07-31.87,34.13C270.57,98.66,260.13,110,251,118.33s-10.67,9.17-14.62,8.92-2.74-3-8.71-3.58c-4.67-.46-9.79,9-27.67,10.33H87s26.9,49,39.63,68.63c5.5,8.5,9.05,7.8,9.38,7.88,7.43,1.78,14.42-8.35,18.19-11.56a3,3,0,0,1,3.38-.38c2.22,1.23.09,3.23,3.44,3.44,8.17,0.5,17-9.86,20.33-14.33,5-6.68,11-23.44,19.38-17.94,5.16,3.4-10.48,18.28-26.47,34.65-15.32,15.68-28.14,35-42.58,34-15.42-1.08-20.67-12.48-25.79-21.46C85.25,180.75,44,110,44,110Zm180.1,34.4c-1.53-1.69-4.9-1.14-7.54,1.24s-3.54,5.68-2,7.37,4.9,1.14,7.54-1.24S225.62,146.09,224.1,144.4ZM273,67.48c-1.47-1.3-4.12-.7-5.92,1.33s-2.06,4.74-.59,6,4.12,0.7,5.92-1.33S274.47,68.78,273,67.48Z" transform="translate(-44 -18.01)"/>
  <path class="bottom right" d="M352.49,115L202.91,375.19a3.35,3.35,0,0,1-5.82,0L146.5,287.25s-4.25-7.58-4.25-21c0-11.25,13.33-22.24,25.42-35.92,10.21-11.55,16.56-22.35,22.21-21.94a3.29,3.29,0,0,1,3.07,3.28c-0.18,7.1-16.58,16.13-21.45,21.57-4.65,5.2-15.11,14.88-12,20.17a3.18,3.18,0,0,0,3.15,1.48c8.48-1.1,10.3-10.74,14.52-8.9,6.8,3-8.43,11.82-9.43,24.6a3.37,3.37,0,0,0,.1,1.14c1.78,6.68,21.69,41.05,29.28,54a3.35,3.35,0,0,0,5.8,0L310,139.77a3.35,3.35,0,0,0-2.93-5c-7.32.07-19-.65-20.73-5.81-0.94-2.75-.19-5,1.69-9.37,2.33-5.43-5.06-7.62-3.75-14.81,0.87-4.77,9.58-14.88,10.85-16.33a3.13,3.13,0,0,0,.28-0.36c1-1.56,8-12.15,12.63-13.65a3.13,3.13,0,0,1,2,.09c7.55,2.81-9.87,10.63-12.19,17.21a3.35,3.35,0,0,0,4.66,4C328,83.67,331.76,55.34,340.83,61.5c10.5,6.33-35.33,31.83-29.33,41.17,4.51,7,27.07,7.49,38,7.29A3.35,3.35,0,0,1,352.49,115ZM184.37,232.59c-1.49,1.9-1.49,4.38,0,5.54s3.89,0.56,5.38-1.34,1.49-4.38,0-5.54S185.86,230.69,184.37,232.59Z" transform="translate(-44 -18.01)"/>
  <path class="bottom left" d="M44,110H196a64.86,64.86,0,0,0,26-5c16.5-6.87,19-11.36,23.63-13.75,4.38-2.25,9.13,2.81,5.24,5.53-7.62,5.34-2.4,7.07-2.35,7.1a0.31,0.31,0,0,0,.15-0.05c5.15,3.62,28.73-19.79,49.58-44.08,13.82-16.1,31.42-43.75,37.88-41.62,12.58,4.14-16.37,30-31,43.5-5.07,4.68-21.69,23.07-31.87,34.13C270.57,98.66,260.13,110,251,118.33s-10.67,9.17-14.62,8.92-2.74-3-8.71-3.58c-4.67-.46-9.79,9-27.67,10.33H87s26.9,49,39.63,68.63c5.5,8.5,9.05,7.8,9.38,7.88,7.43,1.78,14.42-8.35,18.19-11.56a3,3,0,0,1,3.38-.38c2.22,1.23.09,3.23,3.44,3.44,8.17,0.5,17-9.86,20.33-14.33,5-6.68,11-23.44,19.38-17.94,5.16,3.4-10.48,18.28-26.47,34.65-15.32,15.68-28.14,35-42.58,34-15.42-1.08-20.67-12.48-25.79-21.46C85.25,180.75,44,110,44,110Zm180.1,34.4c-1.53-1.69-4.9-1.14-7.54,1.24s-3.54,5.68-2,7.37,4.9,1.14,7.54-1.24S225.62,146.09,224.1,144.4ZM273,67.48c-1.47-1.3-4.12-.7-5.92,1.33s-2.06,4.74-.59,6,4.12,0.7,5.92-1.33S274.47,68.78,273,67.48Z" transform="translate(-44 -18.01)"/>
</svg>

css

@import url("https://fonts.googleapis.com/css?family=Montserrat:700");
html,
body {
  height: 100%;
}

body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: #f6f6f6;
}
body #curtains {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 4;
  overflow: hidden;
}
body .curtain {
  position: absolute;
  height: 100%;
  width: 200%;
  background: #1d1d1d;
  transition: left 500ms ease, right 500ms ease;
}
body .curtain.left-curtain {
  transform: skew(-43deg);
  left: -300%;
}
body .curtain.right-curtain {
  transform: skew(-43deg);
  right: -300%;
}
body svg {
  position: relative;
  z-index: 5;
  width: 350px;
  height: 350px;
}
body svg path {
  transition: opacity 650ms ease;
  transition-delay: 100ms;
}
body .top {
  opacity: 1;
  z-index: 2;
}
body .top.left {
  fill: url(#orange);
}
body .top.right {
  fill: url(#purple);
}
body .bottom {
  opacity: 0;
  z-index: 1;
}
body .bottom.left {
  fill: url(#pink);
}
body .bottom.right {
  fill: url(#bajablast);
}
body::after {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  padding: 8px 12px;
  background: rgba(29, 29, 29, 0.75);
  border-radius: 30px;
  content: "Go to Dark Theme";
  font-size: 13px;
  font-family: "Montserrat", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  transition: color 650ms ease, background 650ms ease;
  transition-delay: 100ms;
  color: #f6f6f6;
  opacity: 0.75;
}
body.dark .curtain.left-curtain {
  left: -150%;
}
body.dark .curtain.right-curtain {
  right: calc(-150% + 1px);
}
body.dark .top {
  opacity: 0;
}
body.dark .bottom {
  opacity: 1;
}
body.dark::after {
  content: "Go to Light Theme";
  color: #1d1d1d;
  background: rgba(246, 246, 246, 0.7);
}

JavaScript

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