圆点滚动会出现图片html,CSS3 悬停时出现的圆点动效背景图

CSS

语言：

CSSSCSS

确定

html {

background-color: #2c3330;

background-image: -webkit-radial-gradient(#363f3c 7px, rgba(0, 0, 0, 0) 8px), -webkit-radial-gradient(#363f3c 7px, rgba(0, 0, 0, 0) 8px), -webkit-radial-gradient(#363f3c 7px, rgba(0, 0, 0, 0) 8px), -webkit-radial-gradient(#363f3c 7px, rgba(0, 0, 0, 0) 8px);

background-image: radial-gradient(#363f3c 7px, rgba(0, 0, 0, 0) 8px), radial-gradient(#363f3c 7px, rgba(0, 0, 0, 0) 8px), radial-gradient(#363f3c 7px, rgba(0, 0, 0, 0) 8px), radial-gradient(#363f3c 7px, rgba(0, 0, 0, 0) 8px);

background-size: 100px 100px;

background-position: 0 0, 50px 0, 25px 50px, 75px 50px;

}

html:hover {

background-image: -webkit-radial-gradient(#85c79f 7px, rgba(0, 0, 0, 0) 8px), -webkit-radial-gradient(#fc536c 7px, rgba(0, 0, 0, 0) 8px), -webkit-radial-gradient(#e99377 7px, rgba(0, 0, 0, 0) 8px), -webkit-radial-gradient(#ebe49a 7px, rgba(0, 0, 0, 0) 8px);

background-image: radial-gradient(#85c79f 7px, rgba(0, 0, 0, 0) 8px), radial-gradient(#fc536c 7px, rgba(0, 0, 0, 0) 8px), radial-gradient(#e99377 7px, rgba(0, 0, 0, 0) 8px), radial-gradient(#ebe49a 7px, rgba(0, 0, 0, 0) 8px);

}

html:hover {

-webkit-animation: dot-scramble 1s infinite linear;

animation: dot-scramble 1s infinite linear;

}

@-webkit-keyframes dot-scramble {

from {

background-position: 0 0, 50px 0, 25px 50px, 75px 50px;

}

to {

background-position: -100px -100px, -50px -100px, -75px -50px, -25px -50px;

}

}

@keyframes dot-scramble {

from {

background-position: 0 0, 50px 0, 25px 50px, 75px 50px;

}

to {

background-position: -100px -100px, -50px -100px, -75px -50px, -25px -50px;

}

}