waves 波纹

发布：2020/11/26 9:04:23作者：管理员来源：本站浏览次数：1144

</div>

html,
body {
width: 100%;
height: 100%;
}

body {
background: #0A212E;
margin: 0px;
overflow: hidden;
}

.waves {
position: relative;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin-left: -25px;
margin-top: -25px;
border-radius: 50%;
-webkit-backface-visibility: hidden;
}

.wave, .waves:before, .waves:after {
position: absolute;
background: white;
margin-left: -12px;
margin-top: -12px;
width: 50px;
height: 50px;
content: "";
display: block;
border-radius: 50%;
-webkit-backface-visibility: hidden;
}

.waves:before {
animation: wave-animate 3s infinite ease-out;
}

.waves:after {
opacity: 0;
animation: wave-animate 3s 1.5s infinite ease-out;
}

@keyframes wave-animate {
0% {
    transform: scale(0);
    opacity: 1;
    transform-origin: center;
}
100% {
    transform: scale(3);
    opacity: 0;
    transform-origin: center;
}
}

　点击按钮时，按钮背景显示波纹效果

按钮动画 - 波纹效果　

css3按钮波纹效果按钮动画 - 波纹效果 waves 波纹点击按钮时，按钮背景显示波纹效果

柏港建站平台

柏港 CSS

柏港为您推荐了一些相关资讯