理解 content 与替换元素

1、基于伪元素的图片内容生成技术与内容的替换

下文 html 中的 img 标签中的 data-src 的内容，请自己替换成正确内容。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		img {
			display: inline-block;
			width: 256px; height: 192px;
			/* 隐藏Firefox alt文字 */
			color: transparent;
			position: relative;
			overflow: hidden;
		}
		img:not([src]) {
			/* 隐藏Chrome alt文字以及银色边框 */
			visibility: hidden;
		}
		img::before {
			/* 淡蓝色占位背景 */
			content: "";
			position: absolute; left: 0;
			width: 100%; height: 100%;
			background-color: #f0f3f9;
			visibility: visible;
		}
		img::after {
			/* 黑色alt信息条 */
			content: attr(alt);
			position: absolute;
			left: 0; bottom: 0;
			width: 100%;
			line-height: 30px;
			background-color: rgba(0,0,0,.5);
			color: white;
			font-size: 14px;
			transform: translateY(100%);
			/* 来点过渡动画效果 */
			transition: transform .2s;
			visibility: visible;
		}
		img:hover::after {
			transform: translateY(0);
		}
	</style>
</head>
<body>
	<img alt="美女沉思图" data-src="1.jpg">
	<p>
		<button>设置src属性显示图片</button>
	</p>
</body>
<script>
	var eleButton = document.querySelector('button'),
    	eleImg = document.querySelector('img');

	if (eleButton && eleImg) {
	    var initValueButton = eleButton.innerHTML;
	    // 图片地址
	    var srcImage = eleImg.getAttribute('data-src');
	    // 移除该属性
	    eleImg.removeAttribute('data-src');
	    // 按钮点击事件
	    eleButton.addEventListener('click', function() {
	        if (this.innerHTML == initValueButton) {
	            this.innerHTML = '移除src属性';
	            // 图片显示
	            eleImg.setAttribute('src', srcImage);
	        } else {
	            this.innerHTML = initValueButton;
	            // src属性移除
	            eleImg.removeAttribute('src');
	        }
	    });
	}
</script>
</html>

2、实现 img 标签中图片的替换（也可将非替换标签中文字与图片互相替换）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.emoji:hover {
		    content: url(laugh-tear.png);
		}
        .h1:hover{
            content: url(/images/4/logo.png);
            margin: auto;
            height: 34px;
        }
	</style>
</head>
<body>
	<img class="emoji" src="laugh.png">
    <h1 class="h1">
        css世界
    </h1>
</body>
</html>

3、content 换行符与打点 loading 效果实例（注意下文想要实现动态效果，只能用 before）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		dot {
		    display: inline-block; 
		    height: 1em;
		    line-height: 1;
		    text-align: left;
		    vertical-align: -.25em;
		    overflow: hidden;
		}
		dot::before {
		    display: block;
		    content: '...\A..\A.';
		    white-space: pre-wrap;
		    animation: dot 3s infinite step-start both;
		}
		@keyframes dot {
		    33% { transform: translateY(-2em); }
		    66% { transform: translateY(-1em); }
		}
	</style>
</head>
<body>
	正在加载中<dot>...</dot>
</body>
</html>

理解 content 与替换元素

猜你喜欢