您的位置: 首页  >  文章  >  HTML的字体10种酷炫效果

HTML的字体10种酷炫效果

分类: 文章 • 2024-06-19 20:54:40
在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;
	}
	.danceWord-s10 .ele:nth-child(odd){
		-webkit-animation:a1-2 .5s ease-out forwards;
		-ms-animation:a1-2 .5s ease-out forwards;
		-moz-animation:a1-2 .5s ease-out forwards;
		-o-animation:a1-2 .5s ease-out forwards;
		animation:a1-2 .5s ease-out forwards;
	}
	@keyframes a1{
		0%{
			opacity:1;
			transform:translate(0,-20px);
			-webkit-transform:translate(0,-20px);
			-ms-transform:translate(0,-20px);
			-moz-transform:translate(0,-20px);
			-o-transform:translate(0,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-webkit-keyframes a1{
		0%{
			opacity:1;
			-webkit-transform:translate(0,-20px);
			-ms-transform:translate(0,-20px);
			-moz-transform:translate(0,-20px);
			-o-transform:translate(0,-20px);
			transform:translate(0,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-ms-keyframes a1{
		0%{
			opacity:1;
			-webkit-transform:translate(0,-20px);
			-ms-transform:translate(0,-20px);
			-moz-transform:translate(0,-20px);
			-o-transform:translate(0,-20px);
			transform:translate(0,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-moz-keyframes a1{
		0%{
			opacity:1;
			-webkit-transform:translate(0,-20px);
			-ms-transform:translate(0,-20px);
			-moz-transform:translate(0,-20px);
			-o-transform:translate(0,-20px);
			transform:translate(0,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-o-keyframes a1{
		0%{
			opacity:1;
			-webkit-transform:translate(0,-20px);
			-ms-transform:translate(0,-20px);
			-moz-transform:translate(0,-20px);
			-o-transform:translate(0,-20px);
			transform:translate(0,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@keyframes a1-2{
		0%{
			opacity:1;
			-webkit-transform:translate(0,20px);
			-ms-transform:translate(0,20px);
			-moz-transform:translate(0,20px);
			-o-transform:translate(0,20px);
			transform:translate(0,20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-webkit-keyframes a1-2{
		0%{
			opacity:1;
			-webkit-transform:translate(0,20px);
			-ms-transform:translate(0,20px);
			-moz-transform:translate(0,20px);
			-o-transform:translate(0,20px);
			transform:translate(0,20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-ms-keyframes a1-2{
		0%{
			opacity:1;
			-webkit-transform:translate(0,20px);
			-ms-transform:translate(0,20px);
			-moz-transform:translate(0,20px);
			-o-transform:translate(0,20px);
			transform:translate(0,20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-moz-keyframes a1-2{
		0%{
			opacity:1;
			-webkit-transform:translate(0,20px);
			-ms-transform:translate(0,20px);
			-moz-transform:translate(0,20px);
			-o-transform:translate(0,20px);
			transform:translate(0,20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-o-keyframes a1-2{
		0%{
			opacity:1;
			-webkit-transform:translate(0,20px);
			-ms-transform:translate(0,20px);
			-moz-transform:translate(0,20px);
			-o-transform:translate(0,20px);
			transform:translate(0,20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@keyframes a2{
		0%{
			opacity:1;
			-webkit-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
			-moz-transform:translate(-25px,0);
			-o-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-webkit-keyframes a2{
		0%{
			opacity:1;
			-webkit-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
			-moz-transform:translate(-25px,0);
			-o-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-ms-keyframes a2{
		0%{
			opacity:1;
			-webkit-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
			-moz-transform:translate(-25px,0);
			-o-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-moz-keyframes a2{
		0%{
			opacity:1;
			-webkit-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
			-moz-transform:translate(-25px,0);
			-o-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@-o-keyframes a2{
		0%{
			opacity:1;
			-webkit-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
			-moz-transform:translate(-25px,0);
			-o-transform:translate(-25px,0);
			-ms-transform:translate(-25px,0);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0,0);
			-ms-transform:translate(0,0);
			-moz-transform:translate(0,0);
			-o-transform:translate(0,0);
			transform:translate(0,0);
		}
	}
	@keyframes a3{
		0%{
			opacity:1;
			-webkit-transform:rotate(135deg);
			-ms-transform:rotate(135deg);
			-moz-transform:rotate(135deg);
			-o-transform:rotate(135deg);
			transform:rotate(135deg);
		}
		100%{
			opacity:1;
			-webkit-transform:rotate(0deg);
			-ms-transform:rotate(0deg);
			-moz-transform:rotate(0deg);
			-o-transform:rotate(0deg);
			transform:rotate(0deg);
		}
	}
	@-webkit-keyframes a3{
		0%{
			opacity:1;
			-webkit-transform:rotate(135deg);
			-ms-transform:rotate(135deg);
			-moz-transform:rotate(135deg);
			-o-transform:rotate(135deg);
			transform:rotate(135deg);
		}
		100%{
			opacity:1;
			-webkit-transform:rotate(0deg);
			-ms-transform:rotate(0deg);
			-moz-transform:rotate(0deg);
			-o-transform:rotate(0deg);
			transform:rotate(0deg);
		}
	}
	@-ms-keyframes a3{
		0%{
			opacity:1;
			-webkit-transform:rotate(135deg);
			-ms-transform:rotate(135deg);
			-moz-transform:rotate(135deg);
			-o-transform:rotate(135deg);
			transform:rotate(135deg);
		}
		100%{
			opacity:1;
			-webkit-transform:rotate(0deg);
			-ms-transform:rotate(0deg);
			-moz-transform:rotate(0deg);
			-o-transform:rotate(0deg);
			transform:rotate(0deg);
		}
	}
	@-moz-keyframes a3{
		0%{
			opacity:1;
			-webkit-transform:rotate(135deg);
			-ms-transform:rotate(135deg);
			-moz-transform:rotate(135deg);
			-o-transform:rotate(135deg);
			transform:rotate(135deg);
		}
		100%{
			opacity:1;
			-webkit-transform:rotate(0deg);
			-ms-transform:rotate(0deg);
			-moz-transform:rotate(0deg);
			-o-transform:rotate(0deg);
			transform:rotate(0deg);
		}
	}
	@-o-keyframes a3{
		0%{
			opacity:1;
			-webkit-transform:rotate(135deg);
			-ms-transform:rotate(135deg);
			-moz-transform:rotate(135deg);
			-o-transform:rotate(135deg);
			transform:rotate(135deg);
		}
		100%{
			opacity:1;
			-webkit-transform:rotate(0deg);
			-ms-transform:rotate(0deg);
			-moz-transform:rotate(0deg);
			-o-transform:rotate(0deg);
			transform:rotate(0deg);
		}
	}
	@keyframes a4{
		0%{
			opacity:1;
			-webkit-transform:rotateX(-180deg);
			-ms-transform:rotateX(-180deg);
			-moz-transform:rotateX(-180deg);
			-o-transform:rotateX(-180deg);
			transform:rotateX(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-ms-transform:rotateX(0deg);
			-moz-transform:rotateX(0deg);
			-o-transform:rotateX(0deg);
			transform:rotateX(0deg);
		}
	}
	@-webkit-keyframes a4{
		0%{
			opacity:1;
			-webkit-transform:rotateX(-180deg);
			-ms-transform:rotateX(-180deg);
			-moz-transform:rotateX(-180deg);
			-o-transform:rotateX(-180deg);
			transform:rotateX(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-ms-transform:rotateX(0deg);
			-moz-transform:rotateX(0deg);
			-o-transform:rotateX(0deg);
			transform:rotateX(0deg);
		}
	}
	@-ms-keyframes a4{
		0%{
			opacity:1;
			-webkit-transform:rotateX(-180deg);
			-ms-transform:rotateX(-180deg);
			-moz-transform:rotateX(-180deg);
			-o-transform:rotateX(-180deg);
			transform:rotateX(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-ms-transform:rotateX(0deg);
			-moz-transform:rotateX(0deg);
			-o-transform:rotateX(0deg);
			transform:rotateX(0deg);
		}
	}
	@-moz-keyframes a4{
		0%{
			opacity:1;
			-webkit-transform:rotateX(-180deg);
			-ms-transform:rotateX(-180deg);
			-moz-transform:rotateX(-180deg);
			-o-transform:rotateX(-180deg);
			transform:rotateX(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-ms-transform:rotateX(0deg);
			-moz-transform:rotateX(0deg);
			-o-transform:rotateX(0deg);
			transform:rotateX(0deg);
		}
	}
	@-o-keyframes a4{
		0%{
			opacity:1;
			-webkit-transform:rotateX(-180deg);
			-ms-transform:rotateX(-180deg);
			-moz-transform:rotateX(-180deg);
			-o-transform:rotateX(-180deg);
			transform:rotateX(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-ms-transform:rotateX(0deg);
			-moz-transform:rotateX(0deg);
			-o-transform:rotateX(0deg);
			transform:rotateX(0deg);
		}
	}
	@keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
	@-webkit-keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
	@-ms-keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
	@-moz-keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
	@-o-keyframes a5{
		0%{
			opacity:1;
			-webkit-transform:rotateY(-180deg);
			-ms-transform:rotateY(-180deg);
			-moz-transform:rotateY(-180deg);
			-o-transform:rotateY(-180deg);
			transform:rotateY(-180deg);
		}
		
		100%{
			opacity:1;
			-webkit-transform:rotateY(0deg);
			-ms-transform:rotateY(0deg);
			-moz-transform:rotateY(0deg);
			-o-transform:rotateY(0deg);
			transform:rotateY(0deg);
		}
	}
	@keyframes a6{
		0%{
			opacity:1;
			-webkit-transform:scale(1.5,1.5);
			-ms-transform:scale(1.5,1.5);
			-moz-transform:scale(1.5,1.5);
			-o-transform:scale(1.5,1.5);
			transform:scale(1.5,1.5);
		}
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@-webkit-keyframes a6{
		0%{
			opacity:1;
			-webkit-transform:scale(1.5,1.5);
			-ms-transform:scale(1.5,1.5);
			-moz-transform:scale(1.5,1.5);
			-o-transform:scale(1.5,1.5);
			transform:scale(1.5,1.5);
		}
		
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@-ms-keyframes a6{
		0%{
			opacity:1;
			-webkit-transform:scale(1.5,1.5);
			-ms-transform:scale(1.5,1.5);
			-moz-transform:scale(1.5,1.5);
			-o-transform:scale(1.5,1.5);
			transform:scale(1.5,1.5);
		}
		
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@-moz-keyframes a6{
		0%{
			opacity:1;
			-webkit-transform:scale(1.5,1.5);
			-ms-transform:scale(1.5,1.5);
			-moz-transform:scale(1.5,1.5);
			-o-transform:scale(1.5,1.5);
			transform:scale(1.5,1.5);
		}
		
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@-o-keyframes a6{
		0%{
			opacity:1;
			-webkit-transform:scale(1.5,1.5);
			-ms-transform:scale(1.5,1.5);
			-moz-transform:scale(1.5,1.5);
			-o-transform:scale(1.5,1.5);
			transform:scale(1.5,1.5);
		}
		
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@keyframes a7{
		0%{
			opacity:1;
			-webkit-transform:scale(0.3,0.3);
			-ms-transform:scale(0.3,0.3);
			-moz-transform:scale(0.3,0.3);
			-o-transform:scale(0.3,0.3);
			transform:scale(0.3,0.3);
		}
		
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@-webkit-keyframes a7{
		0%{
			opacity:1;
			-webkit-transform:scale(0.3,0.3);
			-ms-transform:scale(0.3,0.3);
			-moz-transform:scale(0.3,0.3);
			-o-transform:scale(0.3,0.3);
			transform:scale(0.3,0.3);
		}
		
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@-ms-keyframes a7{
		0%{
			opacity:1;
			-webkit-transform:scale(0.3,0.3);
			-ms-transform:scale(0.3,0.3);
			-moz-transform:scale(0.3,0.3);
			-o-transform:scale(0.3,0.3);
			transform:scale(0.3,0.3);
		}
		
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@-moz-keyframes a7{
		0%{
			opacity:1;
			-webkit-transform:scale(0.3,0.3);
			-ms-transform:scale(0.3,0.3);
			-moz-transform:scale(0.3,0.3);
			-o-transform:scale(0.3,0.3);
			transform:scale(0.3,0.3);
		}
		
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@-o-keyframes a7{
		0%{
			opacity:1;
			-webkit-transform:scale(0.3,0.3);
			-ms-transform:scale(0.3,0.3);
			-moz-transform:scale(0.3,0.3);
			-o-transform:scale(0.3,0.3);
			transform:scale(0.3,0.3);
		}
		
		100%{
			opacity:1;
			-webkit-transform:scale(1,1);
			-ms-transform:scale(1,1);
			-moz-transform:scale(1,1);
			-o-transform:scale(1,1);
			transform:scale(1,1);
		}
	}
	@keyframes a8{
		0%{
			opacity:1;
			-webkit-transform:translate(-10px,20px);
			-ms-transform:translate(-10px,20px);
			-moz-transform:translate(-10px,20px);
			-o-transform:translate(-10px,20px);
			transform:translate(-10px,20px);
		}
		50%{
			-webkit-transform:translate(-5px,-20px);
			-ms-transform:translate(-5px,-20px);
			-moz-transform:translate(-5px,-20px);
			-o-transform:translate(-5px,-20px);
			transform:translate(-5px,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0px,0px);
			-ms-transform:translate(0px,0px);
			-moz-transform:translate(0px,0px);
			-o-transform:translate(0px,0px);
			transform:translate(0px,0px);
		}
	}
	@-webkit-keyframes a8{
		0%{
			opacity:1;
			-webkit-transform:translate(-10px,20px);
			-ms-transform:translate(-10px,20px);
			-moz-transform:translate(-10px,20px);
			-o-transform:translate(-10px,20px);
			transform:translate(-10px,20px);
		}
		50%{
			-webkit-transform:translate(-5px,-20px);
			-ms-transform:translate(-5px,-20px);
			-moz-transform:translate(-5px,-20px);
			-o-transform:translate(-5px,-20px);
			transform:translate(-5px,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0px,0px);
			-ms-transform:translate(0px,0px);
			-moz-transform:translate(0px,0px);
			-o-transform:translate(0px,0px);
			transform:translate(0px,0px);
		}
	}
	@-ms-keyframes a8{
		0%{
			opacity:1;
			-webkit-transform:translate(-10px,20px);
			-ms-transform:translate(-10px,20px);
			-moz-transform:translate(-10px,20px);
			-o-transform:translate(-10px,20px);
			transform:translate(-10px,20px);
		}
		50%{
			-webkit-transform:translate(-5px,-20px);
			-ms-transform:translate(-5px,-20px);
			-moz-transform:translate(-5px,-20px);
			-o-transform:translate(-5px,-20px);
			transform:translate(-5px,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0px,0px);
			-ms-transform:translate(0px,0px);
			-moz-transform:translate(0px,0px);
			-o-transform:translate(0px,0px);
			transform:translate(0px,0px);
		}
	}
	@-moz-keyframes a8{
		0%{
			opacity:1;
			-webkit-transform:translate(-10px,20px);
			-ms-transform:translate(-10px,20px);
			-moz-transform:translate(-10px,20px);
			-o-transform:translate(-10px,20px);
			transform:translate(-10px,20px);
		}
		50%{
			-webkit-transform:translate(-5px,-20px);
			-ms-transform:translate(-5px,-20px);
			-moz-transform:translate(-5px,-20px);
			-o-transform:translate(-5px,-20px);
			transform:translate(-5px,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0px,0px);
			-ms-transform:translate(0px,0px);
			-moz-transform:translate(0px,0px);
			-o-transform:translate(0px,0px);
			transform:translate(0px,0px);
		}
	}
	@-o-keyframes a8{
		0%{
			opacity:1;
			-webkit-transform:translate(-10px,20px);
			-ms-transform:translate(-10px,20px);
			-moz-transform:translate(-10px,20px);
			-o-transform:translate(-10px,20px);
			transform:translate(-10px,20px);
		}
		50%{
			-webkit-transform:translate(-5px,-20px);
			-ms-transform:translate(-5px,-20px);
			-moz-transform:translate(-5px,-20px);
			-o-transform:translate(-5px,-20px);
			transform:translate(-5px,-20px);
		}
		100%{
			opacity:1;
			-webkit-transform:translate(0px,0px);
			-ms-transform:translate(0px,0px);
			-moz-transform:translate(0px,0px);
			-o-transform:translate(0px,0px);
			transform:translate(0px,0px);
		}
	}
	@keyframes a9{
		from{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(0deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(0deg);
			-moz-transform-origin:0 0;
			transform:rotateX(0deg);
			transform-origin:0 0;
		}
		to{
			opacity:1;
			transform:rotateX(360deg);
			transform-origin:0 0;
			-webkit-transform:rotateX(360deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(360deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(360deg);
			-moz-transform-origin:0 0;
		}
	}
	@-webkit-keyframes a9{
		from{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(0deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(0deg);
			-moz-transform-origin:0 0;
			transform:rotateX(0deg);
			transform-origin:0 0;
		}
		to{
			opacity:1;
			transform:rotateX(360deg);
			transform-origin:0 0;
			-webkit-transform:rotateX(360deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(360deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(360deg);
			-moz-transform-origin:0 0;
		}
	}
	@-ms-keyframes a9{
		from{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(0deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(0deg);
			-moz-transform-origin:0 0;
			transform:rotateX(0deg);
			transform-origin:0 0;
		}
		to{
			opacity:1;
			transform:rotateX(360deg);
			transform-origin:0 0;
			-webkit-transform:rotateX(360deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(360deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(360deg);
			-moz-transform-origin:0 0;
		}
	}
	@-moz-keyframes a9{
		from{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(0deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(0deg);
			-moz-transform-origin:0 0;
			transform:rotateX(0deg);
			transform-origin:0 0;
		}
		to{
			opacity:1;
			transform:rotateX(360deg);
			transform-origin:0 0;
			-webkit-transform:rotateX(360deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(360deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(360deg);
			-moz-transform-origin:0 0;
		}
	}
	@-o-keyframes a9{
		from{
			opacity:1;
			-webkit-transform:rotateX(0deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(0deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(0deg);
			-moz-transform-origin:0 0;
			transform:rotateX(0deg);
			transform-origin:0 0;
		}
		to{
			opacity:1;
			transform:rotateX(360deg);
			transform-origin:0 0;
			-webkit-transform:rotateX(360deg);
			-webkit-transform-origin:0 0;
			-ms-transform:rotateX(360deg);
			-ms-transform-origin:0 0;
			-moz-transform:rotateX(360deg);
			-moz-transform-origin:0 0;
		}
	}

标记文本

删除文本

引用文本

H2O is是液体。

210 运算结果是 1024.

还有最后一个js文件自己去下载一个

                 jquery.min.js

图片:
HTML的字体10种酷炫效果
看就是这三个文件并且这三个文件我都装在lib文件下文件外面是我的主页面

这将产生一个流程图:

链接
CSS
JS
HTML
jquery.min.js

今天的精品就分享给答家了，每天进步一点点》》》》》》》》

相关推荐