HTML的字体10种酷炫效果

最新推荐文章于 2024-07-12 22:36:11 发布

代码的鸟巢

最新推荐文章于 2024-07-12 22:36:11 发布

阅读量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

最低0.47元/天解锁文章

代码的鸟巢

关注

10
点赞
踩
30

收藏

觉得还不错? 一键收藏
5
评论
HTML的字体10种酷炫效果

在HTML中大家都知道有很多字体效果吧，来我们今天来看这10种字体的效果HTML+CSS+JQuery你好！这是我写的第一篇博客，结合了之前所学的知识做了一个好玩又有趣的字体特效结合所学我们对HTML+CSS+JQuery进行了一个巩固，使用CSS和JQuery实现了平铺，旋转，浮现，坠落的一种效果，接下来看下步骤：第一步：我们需要先把主页写好，主页是什么呢?主页就是你的HTML页面，每...
复制链接

扫一扫

专栏目录