用双阴影可以做出凹凸效果
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;
思考,可以增加多层动态效果。
用双阴影可以做出凹凸效果
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; }