css3对决特效 |css3多选框全选

1. 线条类特效

.line {
position: relative;
height: 2px;
background-color: #333;
width: 100%;
 }
.line:after {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
height: 2px;
width: 0;
background-color: #fff;
transition: width 1s ease;
}
.line:nth-child(even):after {
background-color: #333;
}
.line:hover:after {
width: 100%;
}

2. 霓虹灯特效

.neon {
font-size: 3rem;
color: #fff;
text-shadow: 0 0 10px #fff;
animation: flicker 2s infinite alternate;
 }
@keyframes flicker {
from {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de;
}
to {
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de, 0 0 100px #ff00de;
}
 }

3. 飞行导弹特效

.missile {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 10px;
background-color: #fff;
border-radius: 5px;
animation: missileFly 2s ease-in-out infinite alternate;
 }
@keyframes missileFly {
from {
transform: translateX(-50%) translateY(-50%) rotate(0deg);
}
to {
transform: translateX(-50%) translateY(-50%) rotate(360deg);
}
 }

这些CSS3对决特效可以帮助你的网站页面更加生动、有趣。使用这些特效不仅能够吸引用户的注意力，增强用户体验，也能展现你的设计能力。但是，特效并不是万能的，过多过杂的特效可能会让用户感到迷失和头晕，因此应根据实际需要慎重选择和运用。