CSS
Result
Run
License
body { height: 100vh; background: repeating-linear-gradient(to right, rgba(255, 255, 0, 0), rgba(255, 255, 0, 1) 40px), repeating-linear-gradient(to bottom, rgba(0, 255, 255, 0), rgba(0, 255, 255, 1) 40px), url("http://resrc.devdic.com/img/bysize/below_200/01.png") no-repeat left top/contain; background-position: 0px 0px, 0px 0px, 0px 0px; animation: bgani 5s alternate infinite; } body::after { content: ""; display: block; width: 40%; height: 40%; position: relative; top: 50%; transform: translateY(-50%) rotate(0deg); margin: auto; border-radius: 50%; background: repeating-linear-gradient(to right, rgba(255, 255, 0, 0), rgba(255, 255, 0, 1) 40px), repeating-linear-gradient(to bottom, rgba(0, 255, 255, 0), rgba(0, 255, 255, 1) 40px); animation: bg2ani 5s alternate infinite; } @keyframes bgani { to { background-position: 100px 0px, 0px 100vh, 100% 0px; } } @keyframes bg2ani { to { transform: translateY(-50%) rotate(360deg); } }
Console
expand_less
License
License
by DevDic
Close