html+css 动态效果

猿学

于 2024-07-24 17:38:20 发布

阅读量266

点赞数 2

文章标签： css 前端

资料多来源于网络，如有侵权，请联系本人予以删除

本文链接：https://blog.csdn.net/weixin_38787928/article/details/140669052

版权

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>