html鼠标经过发亮,CSS3鼠标移入时闪闪发光的效果。

Document

*{

margin: 0;

padding: 0;

list-style: none;

}

.box{

margin: 100px;

}

li{

position: relative;

float: left;

width: 50px;

height: 50px;

margin-right: 100px;

}

span{

width: 100px;

height: 100px;

margin: 12px;

display: block;

border-radius: 50%;

background: -webkit-linear-gradient(red, blue);

transition:1s all ease;

}

li:hover span{

transform:rotateZ(360deg);

}

@keyframes warn {

0% {

transform: scale(1);

opacity: 0.8;

}

20% {

transform: scale(1);

opacity: 0.6;

}

40% {

transform: scale(1.2);

opacity: 0.4;

}

60% {

transform: scale(1.4);

opacity: 0.2;

}

80% {

transform: scale(1.6);

opacity: 0.1;

}

100% {

transform: scale(1.8);

opacity: 0.0;

}

}

a:before{

border: 12px solid #A8E957;

content:'';

position: absolute;

width: 100px;

height: 100px;

border-radius: 62px;

opacity: 0;

}

li:hover a:before{animation: warn 1s ease-out infinite;}