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
  '00000000000000000000000000000000000100000000100000111000000111000011110000111100001111100111110000110111111011000011001111001100001100011000110000110000000011000011000000001100001100000000110000110000000011000001000000001000000000000.........完整代码请登录后点击上方下载按钮下载查看