js+svg实现星星字母变形动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：粒子

代码描述：js+svg实现星星字母变形动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
* {
  box-sizing: border-box;
}


body {
  padding: 0;
  margin: 0;
  font-family: serif;
  background-color: #010044;
}

.outer_wrapper{
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.wrapper {
  width: 100%;
  height: 100%;
}

.flex_box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.sign {
  position: absolute;
  color: white;
  bottom: 10px;
  right: 10px;
  font-size: 10px;
}

a {
  color: white;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.grid {
  height: 240px;
  width: 240px;
  display: flex;
  flex-wrap: wrap;
}

.cell {
  height: calc(100% / 16);
  width: calc(100% / 16);
  font-size: 10px;
}


.star {
  position: absolute;
  transition: 1s;
  overflow: hidden;
  opacity: 0.3;
  height: 15px;
  width: 15px;
  border-radius: 50%;
}

.star svg {
  height: 100%;
  width: auto;
}

.star_inner {
  height: 15px;
}

.instruction {
  position: absolute;
  top: 30px;
  color: rgb(255, 255, 255);
  font-style: italic;
  text-align: center;
  transition: 1s;
  width: 300px;
  opacity: 0;
}

.input_wrapper {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

input, button {
  border-width: 0;
  border-radius: 50px;
  padding: 10px 16px;
  margin: 5px;
}

button {
  color: white;
  background-color: steelblue;
  transition: 0.3s;
}

button:hover {
  color: steelblue;
  background-color: white;
}
</style>




</head>

<body>

  
  <div class="outer_wrapper">
    <div class="wrapper flex_box">
      <div class="grid">
      </div>
    </div>
  </div>

  <div class="outer_wrapper flex_box">
    <div class="instruction">
      Type any alphabet on your keyboard, or enter something below and press button...
    </div>
    <div class="input_wrapper">
     
      <input placeholder= "Enter something here..." type="text">
      <button>animate</button>
    </div>
  </div>



  
      <script >
function init() {

  const letters = [
  //a
  '0000000000000000000000000000000000000001100000000000001111000000000001100110000000000110011000000000110000110000000011000011000000011111111110000001111111111000001100000000110000110000000011000110000000000110011000000000011000000000000000000000000000000000',
  //b
  '0000000000000000000000000000000000011111110000000011111111110000001100000011000000110000000110000011000000011000001111111111000000111111111110000011000000001100001100000000110000110000000111000011111111111000000111111111000000000000000000000000000000000000',
  //c
  '0000000000000000000000000000000000000011111000000000111111111000000111000001110000011000000011000011000000000000001100000000000000110000000000000011000000000000000110000000110000011100000111000000111111111000000000111110000000000000000000000000000000000000',
  //d
  '0000000000000000000000000000000000011111110000000011111111110000001100000011000000110000000110000011000000001100001100000000110000110000000011000011000000001100001100000001110000110000001110000011111111110000000111111100000000000000000000000000000000000000',
  //e
  '0000000000000000000000000000000000111111111100000011111111111000001100000000000000110000000000000011000000000000001111111111000000111111111100000011000000000000001100000000000000110000000000000011111111111000000111111111000000000000000000000000000000000000',
  //f
  '0000000000000000000000000000000000111111111110000011111111111000001100000000000000110000000000000011000000000000001111111111000000111111111100000011000000000000001100000000000000110000000000000011000000000000000100000000000000000000000000000000000000000000',
  //g
  '0000000000000000000000000000000000000011111000000000111111111000000111000001110000011000000000000011000000000000001100000000000000110000001111100011000000111110000110000000110000011100000111000000111111111000000000111110000000000000000000000000000000000000',
  //h
  '0000000000000000000000000000000000010000000011000011000000001100001100000000110000110000000011000011000000001100001111111111110000111111111111000011000000001100001100000000110000110000000011000011000000001100000100000000100000000000000000000000000000000000',
  //i
  '0000000000000000000000000000000000000111111000000000011111100000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001100000000000011111100000000001111100000000000000000000000000000000000000',
  //j
  '0000000000000000000000000000000000000011111110000000011111111100000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001100000000011000110000000000100011000000000001111100000000000011000000000000000000000000000000000000000',
  //k
  '0000000000000000000000000000000000110000000110000011000000111000001100000111000000110000111000000011000111000000001101111000000000111111000000000011101110000000001100011110000000110000011100000011000000111000001100000001100000000000000000000000000000000000',
  //l
  '0000000000000000000000000000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001111111111000000111111111100000000000000000000000000000000000',
  //m
  '0000000000000000000000000000000000010000000010000011100000011100001111000011110000111110011111000011011111101100001100111100110000110001100011000011000000001100001100000000110000110000000011000011000000001100000100000000100000000000000000000000000000000000',
  //n
  '0000000000000000000000000000000000010000000011000011100000001100001111000000110000111110000011000011011100001100001100111000110000110001110011000011000011101100001100000111110000110000001111000011000000011100000100000000110000000000000000000000000000000000',
  //o
  '0000000000000000000000000000000000000011110000000000111111100000000111000011100000011000000110000011000000001100001100000000110000110000000011000011000000001100000110000001100000011100001100000000111111100000000000111100000000000000000000000000000000000000',
  //p
  '0000000000000000000000000000000000111111111000000011111111110000001100000011100000110000000110000011000000011000001100000011100000111111111100000011111111100000001100000000000000110000000000000011000000000000001100000000000000000000000000000000000000000000',
  //q
  '0000000000000000000000000000000000000011110000000000111111110000000011000011000000011000000110000011000000001100001100000000110000110000110011000011000011101100000110000111100000011100001110000000111111111100000000111100110000000000000000000000000000000000',
  //r
  '0000000000000000000000000000000000011111111000000011111111110000001100000011000000110000000110000011000000111000001111111111000000111111111000000011011100000000001100111000000000110001111000000011000001111000000100000011000000000000000000000000000000000000',
  //s
  '0000000000000000000000000000000000001111111000000001111111110000001110000011100000110000000110000011100000000000000111111100000000000111111100000000000001111000001100000001100000111000001110000001111111110000000011111110000000000000000000000000000000000000',
  //t
  '0000000000000000000000000000000000001111111100000001111111111000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000001100000000000000110000000000000011000000000000000000000000000000000000000',
  //u
  '0000000000000000000000000000000000010000000010000011000000001100001100000000110000110000000011000011000000001100001100000000110000110000000011000011000000001100001100000000110000011000000110000000111111110000000001111110000000000000000000000000000000000000',
  //v
  '0000000000000000000000000000000000000000000000000011000000001100001100000000110000011000000110000001100000011000000011000011000000001100001100000000011001100000000001100110000000000011110000000000000110000000000000011000000000000000000000000000000000000000',
  //w
  '0000000000000000000000000000000000100000000001000110000000000110011000000000011001100000000001100110000110000110011000011000011001100011110001100110011111100110001101100110110000111110011111000001110000111000000010000001000000000000000000000000000000000000',
  //x
  '00000000000000000000000000000000000100000000100000111000000111000001110000111000000011100111000000000111111000000000001111000000000000111100000000000111111000.........完整代码请登录后点击上方下载按钮下载查看