JavaScript、CSS像素动画特效代码

学JavaScript、CSS像素动画特效代码

按自已的想法加上将图片转换为特定文本，并显示出来

效果

CSS样式

style.css

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body, html {
	overflow: hidden;	 
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #1E88E5;
}

.box {
  position: relative;
  width: 300px;
  height: 300px;
   border-radius:100px;
}

.box span {
  position: absolute;
  width: 10px;
  height: 10px;
  background-image: url(./logo.jpg);
  background-repeat: no-repeat;
  animation:animate 10s linear infinite;
}

@keyframes animate {
   0%, 10% {
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    transform-origin: center;
   }

   20%, 30% {
    scale: 1;
    rotate: 180deg;
    translate: -100px 0;
    transform-origin: center;
    border-radius:2px;
   }

   40% {
    scale: 0.5;
    rotate: 360deg;
    translate: 120px 0;
    transform-origin: 100px;
    border-radius:2px;
   }
   50% {
    scale: 0.5;
    rotate: 360deg;
    translate: 150px 0;
    transform-origin: 100px;
    border-radius:5px;
   }
 60% {
    scale: 0.1;
    rotate: 520deg;
    translate: -150px 0;
    transform-origin: -100px;
    border-radius:10px;
   }
   70% {
    scale: 0.5;
    rotate: 720deg;
    translate: -150px 0;
    transform-origin: -100px;
    border-radius:10px;
   }
   80% {
    scale: 0.8;
    rotate: -360deg;
    translate: 100px 0;
    transform-origin: center;
    border-radius:5px;
   }
   90% {
    scale: 1;
    rotate: 360deg;
    translate: -120px 0;
    transform-origin:center;
    border-radius:2px;
   } 
   
   100% {
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    transform-origin: center;
   }
}

@keyframes animate2 {
   0%, 10% {
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    transform-origin: center;
   }

   20%, 30% {
    scale: 1;
    rotate: 180deg;
    translate: 100px 0;
    transform-origin: center;
    border-radius:2px;	
   }

   40% {
    scale: 0.5;
    rotate: -360deg;
    translate: -120px 0;
    transform-origin: 100px;
    border-radius:2px;
   }
   50% {
    scale: 0.5;
    rotate: 360deg;
    translate: -120px 0;
    transform-origin: 100px;
    border-radius:5px;
   }
    60% {
    scale: 0.1;
    rotate: -520deg;
    translate: 130px 0;
    transform-origin: -100px;
    border-radius:8px;
   }
   70% {
    scale: 0.5;
    rotate: -720deg;
    translate: 150px 0;
    transform-origin: -100px;
    border-radius:8px;
   }

   80% {
    scale: 0.8;
    rotate: 360deg;
    translate: 100px 0;
    transform-origin: center;
    border-radius:5px;
   }
   
   90% {
    scale: 1;
    rotate: -360deg;
    translate: 100px 0;
    transform-origin:center;
    border-radius:2px;
   }
   

   100% {
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    transform-origin: center;
   }

}

/*显示*/
 
 @keyframes animate3 {
   0%, 10% {
    scale: 1;
    rotate: 0deg;
    translate: 0 0;
    transform-origin: center;
   }
 
  20%, 30% { 
    scale: 1;
    rotate: 60deg;
    translate: 0 -100px;
    transform-origin: center;
   }
     50% { 
    scale: 1;
    rotate: 90deg;
    translate: 0 -100px;
    transform-origin: center;
   }
     60% { 
    scale: 1;
    rotate: 0deg;
    translate: 0 -200px;
    transform-origin: center;
   }
   90% {
    scale: 1;
    rotate: 0deg;
    translate: 0 -200px;
    transform-origin: center;
   }
   100% {
    scale: 1;
    rotate: 0deg;
    translate: 0 -50px;
    transform-origin: center;
   }
 }

JS代码

script.js

const w = 60,
      h = 30;
const text ="\
11111111111111111111111111111111111111111111111111111111,\
00000000001111110001111109990011100000000001110099900111,\
09999999091111109990110999999901199999999991109999099011,\
09999999991110099990119999099990199999999991199090999911,\
09991111111199999990100999109999100099990001199991999901,\
09991111111109999990109999119999111199991111099991999901,\
09991099001111099990109999119999111199991111099991999901,\
09999909991111199990109999119999111199991111099991999991,\
09999099990111199990109999119999111199991111099991999991,\
09990109999111199990109999111111111199991111099991999991,\
11111100999111199990109999111111111199991111099991999991,\
11111109999111199990109999111111111199991111099991999991,\
00000109999111199990109999119999111199991111099991999991,\
99990109999111199990109999119999111199991111099991999901,\
09990109999111199990109999119999111199991111099991999901,\
09990109990111199990109999109999111199991111199991999901,\
09999099990111199090119999009990111199991111199990999911,\
10999999991111199990110999099991111199991111109999999011,\
11009999011111199990111000999011111199991111110099090111,\
11111111111111111111111111011111111111111111111110111111";

const chars = text.split(',');
var arr=[];
for (var i=0 ;i<chars.length;i++){
	const chars2 =chars[i].split('');
	arr.push(chars2);
} 

function canvasText() {
	var num=0;	
	for (var i = 0; i < 19; i++) {
    for( var j = 0; j < 102; j++) {	  
	  num++;    
	 if (arr[i][j]){					  
	   
		 if (arr[i][j]=="9" || arr[i][j]=="0"){	 
		   const span = document.createElement('span');	 
		   span.style.animation  = 'animate3 10s linear infinite';
		  
			  const random = Math.random() * 1
			  const randomFiexd = random.toFixed(1)
			  document.getElementById('pixel').appendChild(span)

			  span.style.left = j * 10 + 'px'
			  span.style.top = i * 10 + 'px'
			   
			  span.style.backgroundPositionX = -j*10 + 'px'
			  span.style.backgroundPositionY = -i*10 + 'px, center'
			  span.style.animationDelay = randomFiexd + 's'		  
			
		  }       
	  
      }
	  
    }
  }
}

function pixel() {
	var num=0;	
  for (var i = 0; i < h; i++) {
    for( var j = 0; j < w; j++) { 		  
	  num++;
      const span = document.createElement('span')	  
	  if(num % 2 == 0) {
	    span.style.animation  = 'animate2 10s linear infinite';
	  }else{
		  span.style.animation  = 'animate 10s linear infinite';  	   
	  } 
      const random = Math.random() * 1
      const randomFiexd = random.toFixed(1)
      document.getElementById('pixel').appendChild(span)

      span.style.left = j * 10 + 'px'
      span.style.top = i * 10 + 'px'
       
	  span.style.backgroundPositionX = -j*10 + 'px'
      span.style.backgroundPositionY = -i*10 + 'px, center'
      span.style.animationDelay = randomFiexd + 's'
	  

	  
    }
  }
}
canvasText();
pixel();

HTML网页

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>像素动画Pixel Image Animation</title>
  <link rel="stylesheet" href="./style.css">   
</head>   
<body> 
  <div class="box">
    <div id="pixel"></div>
  </div>
  <script src="./script.js"></script>  
</body>
</html>

资源

这种方式生成dom元素太多了会卡，效率不好。