We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
之前见到波浪的效果觉得非常酷,但是一直没能详细理解其原理,今天google尝试后,记录下其原理(惊叹前辈们的想象力)。 其实波浪就是一个带radius的方块rotate的仿真效果,多层波浪就是使用不同的radius比例及透明度来制造层次感。
<div class="circle"> <div class="wave"></div> </div>
body{ margin: 0; padding: 0; } .circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150px; height: 150px; background: #4973ff; border: 5px solid #fff; box-shadow: 0 0 0 5px #4973ff; border-radius: 50%; overflow: hidden; } .wave { position: relative; width: 100%; height: 100%; background: #4973ff; border-radius: 50%; box-shadow: inset 0 0 50px rgba(0,0,0,.5); } .wave:before, .wave:after { content: ''; position: absolute; width: 200%; height: 200%; top: 0; left: 50%; transform: translate(-50%, -75%); } .wave:before { border-radius: 45%; background: rgba(255,255,255,1); animation: animate 5s linear infinite; } .wave:after { border-radius: 40%; background: rgba(255,255,255,.5); animation: animate 10s linear infinite; } @keyframes animate { 0% { transform: translate(-50%, -75%) rotate(0deg); } 100% { transform: translate(-50%, -75%) rotate(360deg); } }
代码运行见: https://codepen.io/jkhhuse/pen/vraNqe
The text was updated successfully, but these errors were encountered:
No branches or pull requests
题记
之前见到波浪的效果觉得非常酷,但是一直没能详细理解其原理,今天google尝试后,记录下其原理(惊叹前辈们的想象力)。
其实波浪就是一个带radius的方块rotate的仿真效果,多层波浪就是使用不同的radius比例及透明度来制造层次感。
HTML
CSS
The text was updated successfully, but these errors were encountered: