CSS世界 效果收藏

1.正在加载中...  动态效果

	dot{
		display: inline-block;
		height: 1em;
		line-height: 1em;
		overflow: hidden;
		vertical-align: -.25em;
	}
	dot:before{
		content: '...\A..\A.';
		display: block;
		white-space: pre-wrap;
		animation: mydot 3s infinite step-start;
	}
	@keyframes mydot{
		33%{transform: translateY(-2em);}
		66%{transform: translateY(-1em);}
	}
			
	
正在加载中...
		

2. 用css实现横着的 '三道杠' 和 竖着的 '三道杠'，还有双层圆点

	.icon-menu-vertical{
		display: inline-block;
		width: 1px;
		height: 20px;
		padding: 0px 8px;
		border-left: 1px solid;
		border-right: 1px solid;
		background-color: currentcolor;
		background-clip: content-box;
	}
	.icon-menu-horizontal{
		display: inline-block;
		width: 20px;
		height: 1px;
		padding: 8px 0px;
		border-top: 1px solid;
		border-bottom: 1px solid;
		background-color: currentcolor;
		background-clip: content-box;
	}
	.icon-dot{
                display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: currentcolor;
		padding: 3px;
		border: 1px solid;
		background-clip: content-box;
	}
	.icon-dot-2{
                display: inline-block;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: currentcolor;
		box-shadow: 0 0 0 1px currentcolor;
		border: 3px solid #fff;
	}
	
    

    

    

    
	

截图效果：