css动画，正反相消

最新推荐文章于 2023-12-26 14:08:56 发布

Always_OL

最新推荐文章于 2023-12-26 14:08:56 发布

阅读量483

点赞数

分类专栏： H5

本文链接：https://blog.csdn.net/nideshijian/article/details/77869525

版权

H5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

原理：原理就是祖先元素逆转，父元素正转，那么里面内容是没有动画的。主要用到rotate，直接css控制旋转就好了，道理很简单（接下来再给他处理下，就好看点了）

html代码：

<div class="reverse_route">
    <div class="rotate">
        <div class="content">正反相消动画</div>
    </div>
</div>

css代码：

<style>
    body,
    html {
        overflow: hidden;
    }
    div{
        transform-style: preserve-3d;
        perspective: 500px;
    }
    .reverse_route{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        animation: reverseRoute 5s linear infinite;
    }
    .rotate{
        width: 200px;
        height: 200px;
        animation: rotate 5s linear infinite;
    }
    .content{
        width: 100%;
        height: 100%;
        color: #fff;
        line-height: 200px;
        text-align: center;
        background-color: rgba(255, 100, 100, .8);
        box-shadow: 0px 0px 8px 2px rgba(100, 100, 100, .6);
    }
</style>

接下来是keframes帧动画了：

《1》content里面的内容是不会动的，仿佛是没有动画效果一样，但其实父级，祖先级都在旋转

@keyframes rotate{
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(360deg);
    }
}
@keyframes reverseRoute{
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(-360deg);
    }
}

《2》在内层旋转元素上加一个rotateX，content元素就已经在摇摆了，而且因为正反旋转已经被抵消掉了，所以就只剩下rotateX的旋转了

@keyframes rotate{
    0%{
        transform: rotateX(0deg) rotateZ(0deg);
    }
    50%{
        transform: rotateX(40deg) rotateZ(180deg);
    }
    100%{
        transform: rotateX(0deg) rotateZ(360deg);
    }
}
@keyframes reverseRoute{
    0%{
        transform: rotateZ(0deg);
    }
    100%{
        transform: rotateZ(-360deg);
    }
}

看起来效果还不错，可以作为一个小动画运用到项目中