为一个字符添加一半的样式

如下图所示，为字符添加一半的样式

来，咱直接贴代码，然后复制下面的代码就可以看到如上图所示的效果了，纯css制作，很简单吧

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>halfstyle测试</title>
	<style type="text/css">
		.halfStyle{
			position: relative;
			display: inline-block;
			font-size: 80px;
			color: transparent;
			overflow: hidden;
			white-space: pre;
		}
		.halfStyle:before{
			display: block;
			z-index: 1;
			position: absolute;
			top: 0;
			width: 50%;
			content:attr(data-content);
			overflow: hidden;
			pointer-events:none;
			color: #fa0;
			text-shadow:2px -2px 0px #af0;
		}
		.halfStyle:after{
			display: block;
			direction: rtl;   /*把文本设置为从右向左*/
			z-index: 2;
			position: absolute;
			top: 0;
			left: 50%;
			width: 50%;
			content:attr(data-content);
			overflow: hidden;
			pointer-events:none;  /* 禁用鼠标事件*/
			color: #f00;
			text-shadow:2px -2px 0px #af0;
		}


	</style>
</head>
<body>
	<div>
		<!-- 这里的data是自定义属性，配合before，after使用content的attr调用 -->
		<span class="halfStyle" data-content="jing">jing</span>
		<span class="halfStyle" data-content="jing">jing</span>
	</div>
</body>
</html>

　　

posted @ 2017-02-14 14:10  Graceing  阅读(198)  评论(0)    收藏  举报