原生js实现文字散列飞入动画效果代码
代码语言:html
所属分类:动画
代码描述:原生js实现文字散列飞入动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fredoka+One'> <style> html, body { background-color: #efefef; width: 100%; height: 100%; padding: 0; margin: 0; } #text { font-family: "Fredoka One", sans-serif; font-size: 6em; line-height: 1em; text-align: center; position: relative; top: 50%; transform: translateY(-50%); } #text:hover { cursor: default; } #text .wrapper { display: inline-block; top: -900px; position: relative; height: 150px; /* default */ width: 90px; /* default */ transition: ease 0.3s all; } #text .wrapper span { position: absolute; top: 0; right: 0; transition: ease 0.3s all; } #text .wrapper span.letter-2 { color: rgba(0, 0, 255, 0.5); } #text .wrapper span.letter-1 { color: rgba(255, 0, 0, 0.5); z-index: 1; } #text .wrapper span.letter-1:hover { top: -3px; right: -3px; } #text .wrapper span.letter-1:hover ~ .letter-2 { top: 3px; right: 3px; } #text .wrapper span.space { padding: 0; min-width: 30px; display: inline-block; } </style> </head> <body> <div id="text"> </div> <script > // type anything here const text = 'hover me'; // this function turns a string into an array const createLetterArray = (string) => { return string.split(''); } // this function creates letter layers wrapped in span tags const createLetterLayers = (array) => { return array.map((letter) => { let layer = '.........完整代码请登录后点击上方下载按钮下载查看
网友评论0