div+css实现数字文字立体视觉跟随鼠标交互动画效果代码-html代码-BFW代码库

div+css实现数字文字立体视觉跟随鼠标交互动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现数字文字立体视觉跟随鼠标交互动画效果代码动画效果代码

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

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

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

  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

:root {
	--shadow: #894ff1;
	--bounce: linear(0 0%, 0 2.27%, 0.02 4.53%, 0.04 6.8%, 0.06 9.07%, 0.1 11.33%, 0.14 13.6%, 0.25 18.15%, 0.39 22.7%, 0.56 27.25%, 0.77 31.8%, 1 36.35%, 0.89 40.9%, 0.85 43.18%, 0.81 45.45%, 0.79 47.72%, 0.77 50%, 0.75 52.27%, 0.75 54.55%, 0.75 56.82%, 0.77 59.1%, 0.79 61.38%, 0.81 63.65%, 0.85 65.93%, 0.89 68.2%, 1 72.7%, 0.97 74.98%, 0.95 77.25%, 0.94 79.53%, 0.94 81.8%, 0.94 84.08%, 0.95 86.35%, 0.97 88.63%, 1 90.9%, 0.99 93.18%, 0.98 95.45%, 0.99 97.73%, 1 100%);
}

*, *:before, *:after {
	box-sizing: border-box;
	transform-style: preserve-3d;
}

body {
	margin: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: radial-gradient(circle at 50% 0%, #212121 5vmax, #000);
	font-family: 'Black Ops One', sans-serif;
}

.container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
	animation: color-hue 20s linear 0s infinite;
	justify-content: center;
	align-items: center;
}

@keyframes color-hue {
	0% { filter: hue-rotate(0deg); }	
	100% { filter: hue-rotate(-360deg); }	
}

@keyframes grow-txt {
	0% { letter-spacing: -8.5vmin; }
	100% { letter-spacing: 0.75vmin; }
}

.thanks, .followers {
	font-size: 13vmin;
	text-align: center;
	color: #ac84f7;
	height: 20vmin;
	text-transform: uppercase;	
	letter-spacing: -8.5vmin;
	animation: grow-txt 3s var(--bounce).........完整代码请登录后点击上方下载按钮下载查看