做一个@font-face添加自己想要的字体样式，且用@keyframes做移动、旋转、阴影动画效果

最新推荐文章于 2023-05-16 09:41:15 发布

Libby_lv

最新推荐文章于 2023-05-16 09:41:15 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/Ludmila/article/details/72773842

版权

<!-- 这篇文章应该掌握的几个知识点：

      1、用CSS中的@font-face方法引入自己想要使用的文字软件

      2、用做@keyframes 自动动画效果

	   
@keyframes    名（自己定义） {


		0%{}
		20%{}


	}


	 transform:rotate(72deg) scale(0.5);	 rotate(72deg)旋转72度，规模缩小到0.5倍


	 animation-delay: 1s;  /* 动画延时 */
	 animation-iteration-count:5; /* 动画效果执行5次 */







-->


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		@font-face {
			font-family: "xingkai"; /*给你引入的字体定义一个名字*/


src:url("xingkai/STXINGKA.TTF");/*把字体引入*/}* { marign:0; padding:0; border:none; }body { font-family: xingkai; font-size: 14px;}#div { width:200px; height:200px; background:#000; color:#fff; text-align:center; line-height:200px; margin:0 auto;font-size: 3em;position:
 relative; /* 相对定位，为了给后面的top,和 left */animation-name:color;animation-duration: 3s;animation-delay: 1s; /* 动画延时 */animation-iteration-count:5; /* 动画效果执行5次 */}@keyframes color {0%{ background:#000; color:#f00; top:0; left:0;}20%{ background:#333; color:#f50000;
 text-shadow: 5px 5px pink; 

				transform:rotate(72deg) scale(0.5); top:0; left:100px;}
				40%{ background:#aaa; color:#FB4C4C; 
					text-shadow: 5px 5px pink; /*前面两个值分别是水平的距离和垂直的距离的阴影*/
					transform:rotate(144deg) scale(0.5);
					top:100; left:150px;}
				50%{ background:#636362; color:#FD9494; text-shadow: 5px 5px pink; transform:rotate(180deg) scale(0.5);top:200px; left:0;}
				60%{ background:#636362; color:#FD9494; text-shadow: 5px 5px pink; transform:rotate(216deg) scale(0.5);top:100px; left:-150px;}
				80%{ background:#9ea0a2; color:#FEB9B9; text-shadow: 5px 5px pink; transform:rotate(288deg) scale(0.5);top:0px; left:-100px;}
				100%{ background:#fff; color:#000; text-shadow: 5px 5px pink; transform:rotate(360deg) scale(0.5);
					top:0; left:0;}
			}
	</style>
</head>
<body>
	<div id="div"> 
		<p>HTML5</p>
	</div>
</body>
</html>