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>

原文地址：https://blog.csdn.net/weixin_38787928/article/details/140669052

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！