canvas实现文字漏斗动画效果代码-html代码-BFW代码库

canvas实现文字漏斗动画效果代码

代码语言：html

所属分类：动画

代码描述：canvas实现文字漏斗动画效果代码

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

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

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

  
  
  
<style>
*,
::before,
::after {
  box-sizing: border-box;
  user-select: none;
}

body {
  padding: 0;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #140b2e;
}

.outer-wrapper {
  position: absolute;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  image-rendering: pixelated;
}

.wrapper {
  position: absolute;
  border: solid #a4865b;
  border-width: 2px 0;
  width: 300px;
  height: 440px;
}

.wrapper::before,
.wrapper::after {
  position: absolute;
  content: '';
  left: 0px;
  width: 300px;
  height: 48px;
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAAAYCAYAAAAYuwRKAAAAAXNSR0IArs4c6QAAAURJREFUaEPtmVEOgjAMQOWcehIP4En0nJoRZuYyTKEtacnzh2R0o7y+zG1Ml8Hv+bi+R+20QWBE4HZ/TX37T0MVahQIUgisERh58xWr3EQo5NEQaB2axUIqDU76tgSqS4iFF6YEvmIxW5lyZbDlH3BCLFywJlCcQixrqow3r9lVYh0x2x3xjGwuHMFE8wy1WHVHWa7WRxWcqf3X3YuPxbgmYtXXt0jIU9Rss5I034jcTcXqBdsyi7WfkKxnPmmBssftYbinj4STi1j9YZkkEWSSUJLHSL/1enF3F0uOgsgzEUCsM1Uz0Lsg1lIMzda6r6flWIFc2ZQKYjW4tLsrbf9NlQsejFiDAvUL37UFrjQuuAMu6SGWAOvaDstrRyVIKXwIYoUvUc4EEStn3cJnjVjhS5QzQcTKWbfwWSNW+BLlTLCI9QHE9wP0warayAAAAABJRU5ErkJggg==);
}

.wrapper::before {
  top: -48px;
}

.wrapper::after {
  bottom: -48px;
  transform: scale(1, -1);
}

.wrapper svg {
  position: absolute;
}

.sand {
  position: absolute;
  width: 40px;
  height: 40px;
  font-size: 12px;
  background-size: cover;
}

.d-none {
  display: none;
}

.fade-out {
  animation: fade-out forwards 1s;
}

@keyframes fade-out {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}

.fade-in {
  animation: fade-in forwards 1s;
}

@keyframes fade-in {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

.glass {
  position: absolute;
  width: 150px;
  height: 220px;
  background-size: cover;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAABuCAYAAABvL+5vAAAAAXNSR0IArs4c6QAAAgpJREFUeF7t3WtOwzAQReFmnbASFsBKYJ2gFiX0ocY5qR2P7cMfhHQp0qc7UzdtxPT1+fbz/vE9nfxKCkxiJY2WgFjbrU5iiQUEQNRmiQUEQNRmiQUEQNRmiQUEQNRmiQUEQNRmiQUEQNRmiQUEQPRy0c9rWtvExNrmdEmJJRYQAFGbJRYQAFGbJRYQAFGbJRYQANHlbXtP8Wk1sdJGS0IssYAAiNossYAAiNossY.........完整代码请登录后点击上方下载按钮下载查看