<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<style>
.land {
width: 100px;
height: 100px;
display: inline-block;
position: relative;
background-color: yellow;
}
.land:active::after {
content: " ";
/*background-color:rgba(31,255,48,0.5);*/
position: absolute;
/*left:-20px;*/
/*top:-20px;*/
/*right:-20px;*/
/*bottom:-20px;*/
/*z-index: -1;*/
/*transition:background-color 1s;*/
animation: hh 0.2s;
}
@keyframes hh {
0% {
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background-color:rgba(31,255,48,0);
}
50% {
left: -20px;
top: -20px;
right: -20px;
bottom: -20px;
z-index: -1;
background-color:rgba(31,255,48,0.2);
}
100% {
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: -1;
background-color:rgba(31,255,48,0);
}
}
</style>
</head>
<body>
<div class="land">dianji</div>
</body>
</html>
antd 实现源码
antd button 阴影效果源码
版权声明：本文为Meditate_MasterYi原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。