效果图:
代码:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><title></title><style type="text/css">.card{z-index: 1;width: 250px;height: 250px;background-color: aliceblue;position: relative;overflow: hidden;}.bg{z-index: 3;width: 240px;height: 240px;background-color: yellow;position: absolute;left: 5px;top: 5px;}.blob2{z-index: 2;width: 250px;height: 250px;position: absolute;left: -50%;top: -50%; border-radius: 50%;background-color: red;transform-origin: right bottom;animation: scanning 5s linear infinite;}.blob{z-index: 2;width: 250px;height: 250px;position: absolute;left: 50%;top: 50%;border-radius: 50%;background-color: red;transform-origin: left top;animation: scanning 5s linear infinite;}@keyframes scanning{to{transform: rotate(360deg);}}</style></head><bodystyle="background-color: black;"><div class="card"><div class="bg"></div><div class="blob"></div><div class="blob2"></div></div></body>
</html>