css文本效果

时间：6年前阅读：4753

凸版印刷效果

　　这种效果尤其适用于中等亮度背景配上深色文字的场景；但它也可用于深色底、浅色字的场景，只要文字不是黑色并且背景不是纯黑或纯白就行

浅色背景深色文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	#dd{
		width: 300px;
		height: 30px;
 background:hsl(210,13%,60%);
  color:hsl(210,13%,30%);
  text-shadow:0 .03em .03em hsla(0,0%,100%,.8);
	} 
</style>
	</head>
	<body>
<div id="dd">
	期权记的css效果例子01
</div>
	</body>
</html>

深色背景浅色文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	#dd{
		width: 300px;
		height: 30px;
  background:hsl(210,13%,40%);
  color:hsl(210,13%,75%);
  text-shadow:0 -1px 1px black;
	} 
</style>
	</head>
	<body>
<div id="dd">
	期权记的css效果例子01
</div>
	</body>
</html>

空心字效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	#dd{
		width: 300px;
		height: 30px;
  color:white;
  text-shadow:1px 1px black,-1px -1px black,1px -1px black,-1px 1px black;
	} 
</style>
	</head>
	<body>
<div id="dd">
	期权记的css效果例子01
</div>
	</body>
</html>

发光效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
	#dd{
		width: 300px;
		height: 30px;
 background:#203;
  color:#ffc;
  text-shadow:0 0 .1em,0 0 .3em;
	} 
</style>
	</head>
	<body>
<div id="dd">
	期权记的css效果例子01
</div>
	</body>
</html>

模糊效果

举例：鼠标移入后，文字由模糊变清晰

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
div{
  width:200px;
  background:#203;
  color:transparent;
  text-shadow:0 0 .1em white,0 0 .3em white;
  transition:.5s;
}
div:hover{
  color:white;
}  
</style>
	</head>
	<body>
<div id="dd">
	css效果例子06
</div>
	</body>
</html>

凸起效果

　　文字凸起(伪3D)效果的主要思路就是使用一长串累加的投影，不设模糊并以1px的跨度逐渐错开，使颜色逐渐变暗，然后在底部加一层强烈模糊的暗投影，从而模拟完整的立体效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
div{
  width:200px;
  height: 30px;
  background:#58a;
  color:white;
  text-shadow:0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),0 5px 10px black;
}
div:hover{
  color:white;
}  
</style>
	</head>
	<body>
<div id="dd">
	css效果例子06
</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
div{
  width:200px;
  height: 30px;
  background:#58a;
  color:white;
  text-shadow:0 1px hsl(0,0%,85%),0 2px hsl(0,0%,80%),0 3px hsl(0,0%,75%),0 4px hsl(0,0%,70%),0 5px hsl(0,0%,65%),0 5px 10px black;
}
div:hover{
  color:white;
}  
</style>
	</head>
	<body>
<div id="dd">
	css文本效果例子07
</div>
	</body>
</html>

闪烁效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
@keyframes blink-smooth{50%{color:transparent;}}		
#dd{
  animation:.5s blink-smooth infinite alternate linear;
}
</style>
	</head>
	<body>
<div id="dd">
	css文本效果例子08
</div>
	</body>
</html>

这个文本效果是动态的，懒得做图片了，具体效果点（运行代码）来看

打字效果

　　有些时候，希望一段文本中的字符逐个显现，模拟出一种打字的效果。这个效果在技术类网站中尤为流行，用等宽字体可以营造出一种终端命令行的感觉

　　核心思路就是让容器的宽度成为动画的主体把所有文本包裹在这个容器中，然后让它的宽度从0开始以步进动画的方式、一个字一个字地扩张到它应有的宽度

　　这个方法是局限的，它并不适用于多行文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
@keyframes typing{0%{width:0;}}
@keyframes caret{50%{border-color:transparent;}}	
#dd{
  width:9em;
  animation:typing 4s steps(9) infinite ,caret .5s steps(1) infinite;
  white-space: nowrap;
  overflow: hidden;
  border-right:1px solid;
}
</style>
	</head>
	<body>
<div id="dd">
	文本效果例子09
</div>
	</body>
</html>

这个打字文本效果是也动态的，具体效果点（运行代码）来看

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css文本效果

网友评论