css特效


该页面的样式限定必须与.tx一起使用才有效.防止污染.

该页面的css并没有内置到qpf-ui中.如需手动复制并添加到页面中.


双色文字

效果:

double color text
html css 原理
<span class="tx double-color-text" data-content="双">双</span>
<span class="tx double-color-text" data-content="色">色</span>
<span class="tx double-color-text" data-content="文">文</span>
<span class="tx double-color-text" data-content="字">字</span>
<span class="tx double-color-text" data-content="double">double</span>
<span class="tx double-color-text" data-content="color">color</span>
<span class="tx double-color-text" data-content="text">text</span>
	                	
/* 双色文字 */
					
.tx.double-color-text {
	position: relative;
	display: inline-block;
	font-size: 80px;/*  任何宽度都可以 */
	color: black;/* 任何颜色,或透明 */
	overflow: hidden;
	white-space: pre;/* 处理空格 */
}

.tx.double-color-text:before {
	display: block;
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	content: attr(data-content);/* 伪元素的动态获取内容 */
	overflow: hidden;
	color: #f00;
}
	                	
- 文字自身是一种颜色.
- 通过伪元素:before在文本的上面创建相同文字不同颜色, 宽度50%超出隐藏. 就成了半边文字.
- attr(data-content); 来让伪元素知道显示什么文字.
	                	

加载失败的图片

无效果:

title

效果:

图片E 图片E

有边框限制

图片E
图片E

css html
.tx.img img {
	font-family: 'Helvetica';
	font-weight: 300;
	line-height: 2;
	text-align: center;
	width: 100%;
	height: auto;
	display: block;
	position: relative;
	min-height: 50px;
}


.tx.img img:after {
	content: "\f127" " Broken Image of " attr(alt);
	display: block;
	font-size: 16px;
	font-style: normal;
	font-family: FontAwesome;
	color: rgb(100, 100, 100);
	position: absolute;
	top: 0px;
	left: 0;
	width: 100%;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background-color: rgb(230, 230, 230);
	border: 1px dotted rgb(200, 200, 200);
	border-radius: 5px;
}
						
<div class="tx img" style="width: 400px;">
	<img src="./static/img/e_img.png" alt="图片E" />
	<img src="./static/img/e_img.png1" alt="图片E" />
</div>
<h3>有边框限制</h3>
<div class="tx img" style="width: 100px;height: 100px;border: #001135 solid 1px;">
	<img src="./static/img/e_img.png" alt="图片E" />
</div>
<div class="tx img" style="width: 100px;height: 100px;border: #001135 solid 1px;">
	<img src="./static/img/e_img.png1" alt="图片E" />
</div>
<br />
						
# 原理
- 在元素的内部结尾:after创建提示信息, 通过绝对定位到top.
- 当图片正确加载会覆盖, :after的内容.
- 当图片失败会有提示, :after的内容需要背景来遮盖.

# 注意
- 该方法需要在特定的常见进行定制.
- 比如是否有图片包裹元素. 背景颜色.