的jQuery+CSS3文字动画

2025-11-05 04:42:18

1、新建html文档。

的jQuery+CSS3文字动画

2、书写hmtl代码。

<div class="container">

<div class="row">

<h1 class="long-shadow"><span class="aniamaateTitle1">ANIMA TEXT</span></h1>

<h2>演示DEMO</h2>

<div class="well"><h4 class="demo1 text-danger">ANIMATEXT</h4></div>

<h2>With Animate.css</h2>

<div class="well"><h4 class="demo2 text-danger">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h4></div>

<h2>Word By Word</h2>

<div class="well"><h4 class="demo3 text-danger">ANIMATEXT</h4></div>

<h2>Random</h2>

<div class="well"><h4 class="demo5 text-danger">ANIMATEXT,</h4></div>

<h2>Reverse</h2>

<div class="well"><h4 class="demo4 text-danger">ANIMATEXT。</h4></div>

</div>

</div>

的jQuery+CSS3文字动画

3、书写css代码。

<style type="text/css">

.long-shadow, .medium-shadow {

border: none;

-o-text-overflow: clip;

text-overflow: clip;

}

.long-shadow {

-web  kit-box-sizing: content-box;

-moz-box-sizing: content-box;

box-sizing: content-box;

text-shadow: 3px 3px 0 #4C6A92, 4px 4px 0 #4C6A92, 5px 5px 0 #4C6A92, 6px 6px 0 #4C6A92, 7px 7px 0 #4C6A92, 8px 8px 0 #4C6A92, 9px 9px 0 #4C6A92, 10px 10px 0 #4C6A92, 11px 11px 0 #4C6A92, 12px 12px 0 #4C6A92, 13px 13px 0 #4C6A92, 14px 14px 0 #4C6A92, 15px 15px 0 #4C6A92, 16px 16px 0 #4C6A92, 17px 17px 0 #4C6A92, 18px 18px 0 #4C6A92, 19px 19px 0 #4C6A92, 20px 20px 0 #4C6A92;

}

h1 .animateTitle1 {

font-size: 10vh;

letter-spacing: 2.7vh;

color: #FFF;

padding: 1em 0;

}

h4{ font-size:34px; font-weight:bold;}.text-danger{ color:#000000}

</style>

的jQuery+CSS3文字动画

4、书写并添加js代码。

<script  src="js/jquery.min.js"></script>

<script  src="js/dist/animatext.min.js"></script>

<script >

$('.Title1').animatext({

speed: 300,

effect: 'flipInY',

reverse: false

 });

$(".demo1").animatext();

$(".demo2").animatext({speed: 150,

effect: 'flipInX',

infinite: true

});

$(".demo3").animatext({speed: 150,

mode: "words",

effect: 'swing',

infinite: true

});

$(".demo4").animatext({speed: 150,

effect: 'bounceIn',

reverse: true,

infinite: true

});

$(".demo5").animatext({speed: 150,

effect: 'tada',

random: true,

infinite: true

});

</script>

的jQuery+CSS3文字动画

5、代码整体结构。

的jQuery+CSS3文字动画

6、查看效果。

的jQuery+CSS3文字动画

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢