用双阴影模拟跳动的按钮

用双阴影可以做出凹凸效果

box-shadow: inset 0.3rem 0.3rem 0.6rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff;
box-shadow: 0.3rem 0.3rem 0.6rem #c8d0e7, -0.2rem -0.2rem 0.5rem #fff;

外加keyframe 可以做出动态效果,需要留意,上面两行不能直接使用,需要用none来做衔接;

box-shadow:none;

思考,可以增加多层动态效果。

.weixin.w-image {
padding: 2rem;
box-shadow: inset 0.3rem 0.3rem 0.6rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff;
}
@keyframes blink {
0% { box-shadow: none; } 
25% { box-shadow: inset 0.3rem 0.3rem 0.6rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff; }
50% { box-shadow: none; } 
75% { box-shadow: 0.5rem 0.5rem 1rem #c8d0e7, -0.3rem -0.3rem 0.6rem #fff; }
100% { box-shadow: none; } 
}
@-webkit-keyframes blink {
0% { box-shadow: none; } 
25% { box-shadow: inset 0.3rem 0.3rem 0.6rem #c8d0e7, inset -0.2rem -0.2rem 0.5rem #fff; }
50% { box-shadow: none; } 
75% { box-shadow: 0.5rem 0.5rem 1rem #c8d0e7, -0.3rem -0.3rem 0.6rem #fff; }
100% { box-shadow: none; } 
}
.weixin.w-image {
-webkit-animation: blink 5.0s linear infinite;
-moz-animation: blink 5.0s linear infinite;
-ms-animation: blink 5.0s linear infinite;
-o-animation: blink 5.0s linear infinite;
animation: blink 5.0s linear infinite;
}

发表评论

您的电子邮箱地址不会被公开。

Fill out this field
Fill out this field
请输入有效的电子邮箱地址。

菜单