<head> <meta charset="UTF-8"> <title>Document</title> </head> <style type="text/c..."/>

css文字两边撑开效果

74次阅读
没有评论

Document

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style type="text/css">
	

body{
background-color: #000;	
}
  .containet{
  	margin-top:50px;
     text-align: center;
  	background-color: #000;
  	filter:containet(30);

  }

	.text{
		font-size: 100px;
		color: #fff;
       animation:showup 3s forwards;

	}


	@keyframes showup{
		from{
            letter-spacing: -50px;
            filter:blur(10px);
		}
		to
		{
             
           letter-spacing: 10px;
           filter:blur(1px);
		}

	}
</style>
<body>
	
	<div class="containet">
		
		<div class="text">Web Developer</div>
	</div>
</body>
</html>
正文完
 
评论(没有评论)