html+css 动态效果
1.波浪效果
<div class="sitesingle"></div>
<style>.sitesingle{display:flex;justify-content:space-between;align-items:stretch;overflow:hidden;position:relative;height: 400px;}@keyframes bgRotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@-webkit-keyframes switchColor{0%{background-position:0}50%{background-position:50%}to{background-position:100%}}@keyframes switchColor{0%{background-position:0}50%{background-position:50%}to{background-position:100%}}.sitesingle::before,.sitesingle::after{content: '';animation: bgRotate 30s linear infinite;position: absolute;left: 50%;top: 280px;width: 198vw;height: 211vw;margin-left: -153vh;transform-origin: 50% 49%;opacity: .05;border-radius: 43%;z-index: 0;animation-duration: 30s;background-color: #08f;}.sitesingle::after {border-radius: 45%;opacity:0.1;}
</style>