有关css的小效果

1.动态边框

<div class="dynamic-border content">动态边框</div>

//css
.dynamic-border {
	    width: 200px;
	    height: 80px;
	    background: linear-gradient(0, #f66 2px, #f66 2px) no-repeat left top/0 2px,
		    linear-gradient(-90deg, #f66 2px, #f66 2px) no-repeat right top/2px 0,
		    linear-gradient(-180deg, #f66 2px, #f66 2px) no-repeat right bottom/0 2px,
		    linear-gradient(-270deg, #f66 2px, #f66 2px) no-repeat left bottom/2px 0;
	    cursor: pointer;
	    line-height: 80px;
	    text-align: center;
	    font-weight: bold;
	    font-size: 50px;
	    color: #f66;
	    transition: all 300ms;	
    }
    .dynamic-border:hover {
	    background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
    }

效果如下：

2.三维立方体

<div class="td-cube content">
        <ul>
            <li class="front">1</li>
            <li class="back">2</li>
            <li class="top">3</li>
            <li class="bottom">4</li>
            <li class="left">5</li>
            <li class="right">6</li>
        </ul>
	</div>
//css
.td-cube {
	    width: 150px;
	    height: 150px;
        perspective: 1000px;
    }
	.td-cube ul {
		position: relative;
		width: 100%;
		height: 100%;
		transform: rotateX(-15deg) rotateY(15deg);
		transform-style: preserve-3d;
		animation: rotate 5s infinite linear;
	}
	.td-cube li {
		display: flex;
		position: absolute;
		justify-content: center;
		align-items: center;
		width: 150px;
		height: 150px;
		opacity: .8;
		font-size: 50px;
        color: #fff;
        padding: 0;
        margin: 0;
	}
    .front {
	    background-color: #f66;
	    transform: translateZ(75px);
    }
    .back {
	    background-color: #66f;
	    transform: rotateY(180deg) translateZ(75px);
    }
    .top {
	    background-color: #f90;
	    transform: rotateX(90deg) translateZ(75px);
    }
    .bottom {
	    background-color: #09f;
	    transform: rotateX(-90deg) translateZ(75px);
    }
    .left {
	    background-color: #9c3;
	    transform: rotateY(-90deg) translateZ(75px);
    }
    .right {
	    background-color: #3c9;
	    transform: rotateY(90deg) translateZ(75px);
    }
    @keyframes rotate {
	    from {
		    transform: rotateY(0) rotateX(0);
	    }
	    to {
		    transform: rotateY(-1turn) rotateX(-1turn);
	    }
    }

效果如下：

3.故障文本

<div class="bruce flex-ct-x content">
		<div class="fault-text" data-text="ERROR">ERROR</div>		
</div>
//css
.bruce {
  		background-color: #000;
	}

	.fault-text {
  		position: relative;
  		font-weight: bold;
  		font-size: 100px;
		  color: #fff;
		  text-align: left;
	}
	.fault-text::before, .fault-text::after {
  		overflow: hidden;
  		position: absolute;
  		top: 0;
  		background-color: #000;
  		clip: rect(0, 900px, 0, 0);
  		color: #fff;
  		content: attr(data-text);
  		animation: shake 3s linear infinite alternate-reverse;
	}
	.fault-text::before {
  		left: -2px;
  		text-shadow: 1px 0 #09f;
	}
	.fault-text::after {
  		left: 2px;
  		text-shadow: -1px 0 #f66;
  		animation-duration: 2s;
	}

	@keyframes shake {
  		0% {
    		clip: rect(58px, 9999px, 75px, 0);
  		}
  		5% {
    		clip: rect(84px, 9999px, 95px, 0);
  		}
  		10% {
    		clip: rect(66px, 9999px, 64px, 0);
  		}
 		15% {
    		clip: rect(53px, 9999px, 69px, 0);
  		}
  		20% {
    		clip: rect(17px, 9999px, 53px, 0);
  		}
  		25% {
    		clip: rect(18px, 9999px, 16px, 0);
  		}
  		30% {
    		clip: rect(42px, 9999px, 73px, 0);
  		}
  		35% {
    		clip: rect(83px, 9999px, 90px, 0);
  		}
  		40% {
    		clip: rect(47px, 9999px, 3px, 0);
  		}
  		45% {
    		clip: rect(75px, 9999px, 18px, 0);
  		}
  		50% {
    		clip: rect(31px, 9999px, 72px, 0);
  		}
  		55% {
    		clip: rect(82px, 9999px, 73px, 0);
  		}
  		60% {
    		clip: rect(44px, 9999px, 96px, 0);
  		}
  		65% {
    		clip: rect(95px, 9999px, 29px, 0);
  		}
  		70% {
    		clip: rect(9px, 9999px, 50px, 0);
  		}
  		75% {
    		clip: rect(98px, 9999px, 83px, 0);
  		}
  		80% {
    		clip: rect(65px, 9999px, 71px, 0);
  		}
  		85% {
    		clip: rect(52px, 9999px, 80px, 0);
  		}
  		90% {
    		clip: rect(11px, 9999px, 19px, 0);
  		}
  		95% {
   			clip: rect(36px, 9999px, 73px, 0);
  		}
  		100% {
    		clip: rect(3px, 9999px, 11px, 0);
  		}
	}	

效果如下：