jquery打字动画效果.zip资源-CSDN文库

共6个文件

js：3个

jpg：1个

html：1个

版权申诉

javascript

jQuery

htm5

39 浏览量 2022-11-20 22:07:40 上传评论收藏 87KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jquery打字动画效果.zip （6个子文件）

jquery打字动画效果

jiaoben711

css

animate.css 60KB

index.html 2KB

jquery.textillate.js 6KB

jquery-1.9.1.min.js 90KB

jquery.lettering.js 2KB

jquery打字动画效果.jpg 48KB

<!DOCTYPE HTML> <html> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jquery打字动画效果 - 网页模板</title> <link href="css/animate.css" rel="stylesheet"> <script src="js/jquery-1.9.1.min.js"></script> <script src="js/jquery.lettering.js"></script> <script src="js/jquery.textillate.js"></script> <script> $(function () { $('.text1').textillate({ in: { effect: 'rollIn' } }); $('.text2').textillate({ initialDelay: 1000, //设置动画开始时间 in: { effect: 'flipInX' //设置动画名称 } }); $('.text3').textillate({ initialDelay: 9000, in: { effect: 'bounceInDown' } }); }) </script> <style type="text/css"> body {background:#242424;} div {width:500px;margin:0 auto;} .text1,.text2,.text3 {visibility:hidden;} .text1,.text2 {color:#fff;color:#fff;} .text1 {margin:50px;text-align:center;font-size:150px;text-shadow:0.025em 0.025em 0.025em rgba(0, 0, 0, 0.8);} .text2 {font-family:microsoft yahei;font-size:14px;line-height:24px;text-shadow:0.1em 0.1em 0.1em rgba(0, 0, 0, 0.8)} .text3 {font-family:microsoft yahei;text-align:center;font-size:36px;color:#900} center {position:fixed;bottom:30px;text-align:center;width:100%;} center a {margin:20px; color:#666;text-decoration:none;} center a:hover {margin:20px; color:#666;text-decoration:underline;} </style> <body> <div> <p class="text1">网页模板</p> <p class="text2">我热爱设计，虽然没有达到狂热的程度，但注定我已经离不开设计，它就像有生命似的，改变了我、我的生活，而我也坚信，设计能改变人们、人们的生活以及全世界。所以我高傲的称自己为设计达人，而你就是下一个！</p> <p class="text3">WELCOME</p> </div> <div style="text-align:center;clear:both"> <p>适用浏览器：FireFox、Chrome、Opera、傲游、搜狗. 不支持IE8、360、Safari、世界之窗。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉