js+css实现彩色抖动文字动画效果代码
代码语言:html
所属分类:动画
代码描述:js+css实现彩色抖动文字动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { margin: 12vh; text-align: center; font-size: calc(8vw + 8vh); background: #314d79; color: #fff; font-family: sans-serif; letter-spacing: -.3vw; overflow: hidden; font-family: "Lacquer", system-ui; } .rugrats { margin: 0 auto; text-align: center; } .rugrats span { display:inline-block; transition: color linear 0.5s forwards; -webkit-text-stroke-width: .32vw; -webkit-text-stroke-color: black; text-shadow: .4vw .5vw #000; } .rugrats span { text-transform:capitalize; text-transform:lowercase; /* animation:caseChange 5s ease infinite forwards; } @keyframes caseChange{ from{ text-transform:uppercase; } to{ text-transform:lowercase; } } */ } </style> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lacquer&display=swap" rel="stylesheet"> </head> <body translate="no"> <div class="rugrats">Toadly</div> <div class="rugrats">Animated</div> <div class="rugrats">Text</div> <script > var divs = document.querySelectorAll(".rugrats"); divs.forEach(function (div) { var text = div.textContent; div.innerHTML = ""; for (var i = 0; i < text.length; i++) { var span = document.........完整代码请登录后点击上方下载按钮下载查看
网友评论0