HTML的字体10种酷炫效果

最新推荐文章于 2024-08-23 14:38:37 发布

代码的鸟巢

最新推荐文章于 2024-08-23 14:38:37 发布

阅读量2.9w

点赞数 10

分类专栏： Web 文章标签： HTML+CSS+JQuery

本文链接：https://blog.csdn.net/qq_38274970/article/details/82838498

版权

在HTML中大家都知道有很多字体效果吧，来我们今天来看这10种字体的效果

HTML+CSS+JQuery

你好！这是我写的第一篇博客，结合了之前所学的知识做了一个好玩又有趣的字体特效

结合所学

我们对HTML+CSS+JQuery进行了一个巩固，使用CSS和JQuery实现了平铺，旋转，浮现，坠落的一种效果，接下来看下步骤：
第一步：我们需要先把主页写好，主页是什么呢?主页就是你的HTML页面，每个p标签都要使用div标签把它装起来
第二步：写好你的CSS样式并把它运用到字体上
第三步：下载一个jquery.min.js文件，并运用到HTML上
第四步：自己把你所学的JQuery特效写一个js文件并且运用到HTML中

HTML代码如下

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<script type="text/javascript" src="lib/jquery.min.js"></script>
		<link type="text/css" rel="stylesheet" href="lib/d.css">
		<script type="text/javascript" src="lib/d.js"></script>
		<style>
			html {
				background: #d9d9d9;
			}
			html, body {
				padding: 0;
				margin: 0;
			}
			small {
				color: green;
			}
			p {
				font-size: 18px;
			}
			.page {
				width: 800px;
				margin: 0 auto;
				background: white;
				padding: 0 15px;
			}
			@media screen and (max-width: 800px) {
				.page {
					width: 100%;
					box-sizing: border-box;
				}
			}
		/*create by luoliang~*/
		</style>
		<script>
			/*$.extend(danceword, {
			 interval : 100,
			 loop : true
			 })*/
		</script>
	</head>
	<body>
		<div class="page">
			<div class="showcase">
				<small>/* add class: danceWord-s1 */</small>
				<h1 class="danceWord-s1">这里提供了10种效果，你喜欢哪一种？</h1>
			</div>
			<div class="showcase">
				<small>/* add class: danceWord-s2 */</small>
				<p class="danceWord-s2">
					我喜欢你是寂静的，仿佛你消失了一样，我喜欢你是寂静的，仿佛你消失了一样，我喜欢你是寂静的，仿佛你消失了一样，
				</p>
			</div>
			<div class="showcase">
				<small>/* add class: danceWord-s3 */</small>
				<p class="danceWord-s3">
					你从远处聆听我，我的声音却无法触及你。你从远处聆听我，我的声音却无法触及你。你从远处聆听我，我的声音却无法触及你。
				</p>
			</div>
			<div class="showcase">
				<small>/* add class: danceWord-s4 */</small>
				<p class="danceWord-s4">
					好像你的双眼已经飞离去，如同一个吻，封缄了你的嘴。好像你的双眼已经飞离去，如同一个吻，封缄了你的嘴。
				</p>
			</div>
			<div class="showcase">
				<small>/* add class: danceWord-s5 */</small>
				<p class="danceWord-s5">
					如同所有的事物充满了我的灵魂，如同所有的事物充满了我的灵魂，如同所有的事物充满了我的灵魂，
				</p>
			</div>
			<div class="showcase">
				<small>/* add class: danceWord-s6 */</small>
				<p class="danceWord-s6">
					你从所有的事物中浮现，充满了我的灵魂。你从所有的事物中浮现，充满了我的灵魂。你从所有的事物中浮现，充满了我的灵魂。
				</p>
			</div>
			<div class="showcase">
				<small>/* add class: danceWord-s7 */</small>
				<p class="danceWord-s7">
					你像我的灵魂，一只梦的蝴蝶。你如同忧郁这个词。你像我的灵魂，一只梦的蝴蝶。你如同忧郁这个词。你像我的灵魂，一只梦的蝴蝶。
				</p>
			</div>
			<div class="showcase">
				<small>/* add class: danceWord-s8 */</small>
				<p class="danceWord-s8">
					我喜欢你是寂静的，好像你已远去。我喜欢你是寂静的，好像你已远去。我喜欢你是寂静的，好像你已远去。
				</p>
			</div>
			<div class="showcase">
				<small>/* add class: danceWord-s9 */</small>
				<p class="danceWord-s9">
					你听起来像在悲叹，一只如鸽悲鸣的蝴蝶。你听起来像在悲叹，一只如鸽悲鸣的蝴蝶。你听起来像在悲叹，一只如鸽悲鸣的蝴蝶。你听起来像在悲叹，一只如鸽悲鸣的蝴蝶。
				</p>
			</div>
			<div class="showcase">
				<small>/* add class: danceWord-s10 */</small>
				<p class="danceWord-s10">
					你从远处听见我，我的声音无法触及你,你从远处听见我，我的声音无法触及你,你从远处听见我，我的声音无法触及你。
				</p>
		</div>
	</body>
</html>

CSS代码如下

	[class^="danceWord"]{
		word-break:break-all;
		white-space:pre-wrap;
	}
	[class^="danceWord"] span{
		display:inline-block;
		opacity:0;
	    white-space:pre-wrap;
	}
	.danceWord-s1 .ele{
		-webkit-animation:a1 .4s ease-out forwards;
		-ms-animation:a1 .4s ease-out forwards;
		-moz-animation:a1 .4s ease-out forwards;
		-o-animation:a1 .4s ease-out forwards;
		animation:a1 .4s ease-out forwards;
	}
	.danceWord-s2 .ele{
		-webkit-animation:a2 .5s ease-out forwards;
		-ms-animation:a2 .5s ease-out forwards;
		-moz-animation:a2 .5s ease-out forwards;
		-o-animation:a2 .5s ease-out forwards;
		animation:a2 .5s ease-out forwards;
	}
	.danceWord-s3 .ele{
		-webkit-animation:a3 .5s ease-out forwards;
		-ms-animation:a3 .5s ease-out forwards;
		-moz-animation:a3 .5s ease-out forwards;
		-o-animation:a3 .5s ease-out forwards;
		animation:a3 .5s ease-out forwards;
	}
	.danceWord-s4 .ele{
		-webkit-animation:a4 .5s ease-out forwards;
		-ms-animation:a4 .5s ease-out forwards;
		-moz-animation:a4 .5s ease-out forwards;
		-o-animation:a4 .5s ease-out forwards;
		animation:a4 .5s ease-out forwards;
	}
	.danceWord-s5 .ele{
		-webkit-animation:a5 .5s ease-out forwards;
		-ms-animation:a5 .5s ease-out forwards;
		-moz-animation:a5 .5s ease-out forwards;
		-o-animation:a5 .5s ease-out forwards;
		-ms-animation:a5 .5s ease-out forwards;
	}
	.danceWord-s6 .ele{
		-webkit-animation: a6 .5s ease-out forwards;
		-ms-animation: a6 .5s ease-out forwards;
		-moz-animation: a6 .5s ease-out forwards;
		-o-animation: a6 .5s ease-out forwards;
		animation: a6 .5s ease-out forwards;
	}
	.danceWord-s7 .ele{
		-webkit-animation:a7 .5s ease-out forwards;
		-ms-animation:a7 .5s ease-out forwards;
		-moz-animation:a7 .5s ease-out forwards;
		-o-animation:a7 .5s ease-out forwards;
		animation:a7 .5s ease-out forwards;
	}
	.danceWord-s8 .ele{
		-webkit-animation:a8 .5s ease-out forwards;
		-ms-animation:a8 .5s ease-out forwards;
		-moz-animation:a8 .5s ease-out forwards;
		-o-animation:a8 .5s ease-out forwards;
		animation:a8 .5s ease-out forwards;
	}
	.danceWord-s9 .ele{
		-webkit-animation:a9 .9s ease-out forwards;
		-ms-animation:a9 .9s ease-out forwards;
		-moz-animation:a9 .9s ease-out forwards;
		-o-animation:a9 .9s ease-out forwards;
		animation:a9 .9s ease-out forwards;
	}
	.danceWord-s10 .ele:nth-child(even){
		-webkit-animation:a1 .5s ease-out forwards;
		-ms-animation:a1 .5s ease-out forwards;
		-moz-animation:a1 .5s ease-out forwards;
		-o-animation:a1 .5s ease-out forwards;
		animation:a1 .5s ease-out forwards;
	}
	.dan