Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
SCROLL DOWN
css
body { text-align: center; font-family: 'Dimbo'; background: #000; } .wrapper { overflow: hidden; } .scrollDown { font-size: 60px; min-height: 100vh; -webkit-animation: colorCycle 7s infinite ease-in-out; animation: colorCycle 7s infinite ease-in-out; } .scrollDown:before, .scrollDown:after { content: "\2193 \2193"; -webkit-animation: flash 1.5s 6; animation: flash 1.5s 6; } .word { min-height: 80vh; } .word .letter { display: inline-block; margin: 0 0.2vw; font-size: 8vw; } .word .letter.color0 { color: #F94816; text-shadow: 0.2vw 0.2vw 0 #731c03; } .word .letter.color1 { color: #E9D443; text-shadow: 0.2vw 0.2vw 0 #84750f; } .word .letter.color2 { color: #FD91F7; text-shadow: 0.2vw 0.2vw 0 #f104e3; } .word .letter.color3 { color: #28963F; text-shadow: 0.2vw 0.2vw 0 #081d0c; } .word .letter.color4 { color: #E43485; text-shadow: 0.2vw 0.2vw 0 #700f3c; } .word .letter.color5 { color: #A2E4F2; text-shadow: 0.2vw 0.2vw 0 #1fbbdc; } .word .letter.color6 { color: #FA476E; text-shadow: 0.2vw 0.2vw 0 #a40427; } .wow { visibility: hidden; min-height: 10vh; display: block; margin: 0 auto; } @-webkit-keyframes colorCycle { 0% { color: #F94816; } 14.286% { color: #E9D443; } 28.572% { color: #FD91F7; } 42.858% { color: #28963F; } 57.144% { color: #E43485; } 71.43% { color: #A2E4F2; } 85.716% { color: #FA476E; } 100% { color: #F94816; } } @keyframes colorCycle { 0% { color: #F94816; } 14.286% { color: #E9D443; } 28.572% { color: #FD91F7; } 42.858% { color: #28963F; } 57.144% { color: #E43485; } 71.43% { color: #A2E4F2; } 85.716% { color: #FA476E; } 100% { color: #F94816; } }
JavaScript
new WOW({ offset: 200 }).init(); var animateCss = [ "bounce", "flash", "pulse", "rubberBand", "shake", "swing", "tada", "wobble", "jello", "bounceIn", "bounceInDown", "bounceInLeft", "bounceInRight", "bounceInUp", "fadeIn", "fadeInDown", "fadeInDownBig", "fadeInLeft", "fadeInLeftBig", "fadeInRight", "fadeInRightBig", "fadeInUp", "fadeInUpBig", "flip", "flipInX", "flipInY", "lightSpeedIn", "rotateIn", "rotateInDownLeft", "rotateInDownRight", "rotateInUpLeft", "rotateInUpRight", "slideInUp", "slideInDown", "slideInLeft", "slideInRight", "zoomIn", "zoomInDown", "zoomInLeft", "zoomInRight", "zoomInUp", "rollIn" ]; var placeholder = $(".placeholder"); var colorCounter = 0; for (i = 0; i < animateCss.length; i++) { var word = "
"; $(word).appendTo(placeholder); for (j = 0; j < animateCss[i].length; j++) { var letterDiv = "
" + animateCss[i][j] + "
"; $(letterDiv).appendTo($(".word").last()); colorCounter++; } }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Wow.js Animate.css文本动画-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号