菇凉、竹子和CSS三维动画

位置: 首页 > 代码集锦[ 发布时间: 2025.7.9 作者: 马黑阅读: 174 ]

代码演示外层容器设置背景的情况下通过中间层实现preserved-3d下3d物体的遮挡关系：小球可以围绕竹子做弧线运动，但永远从菇凉的前方通过——因为菇凉属于背景图片的内容，小球、竹子则是3d元素：

<style>
    .papa {
        margin: 20px auto;
        width: 1200px;
        height: 700px;
        border: 1px solid olive;
        background: url('https://638183.freep.cn/638183/t24/5/cshow.jpg') no-repeat center/cover;
        perspective: 800px;
        position: relative;
    }
    .lzwrap {
        position: absolute;
        width: 100%;
        height: 100%;
        background: none ;
        transform-style: preserve-3d;
        display: grid;
        place-items: center;
    }
    .lzwrap::before {
        position:absolute;
        content: '点击小球开始动画';
        left: 20px;
        bottom: 20px;
    }
    .lzwrap::after {
        position: absolute;
        content: url('https://638183.freep.cn/638183/small/vuzi.png');
        left: 20%;
        bottom: 0;
        background: url('https://638183.freep.cn/638183/small/vuzi.png') no-repeat center/cover;
        transform: rotateY(15deg);
    }
    li-zi {
        --size: 50px;
        position: absolute;
        width: var(--size);
        height: var(--size);
        border-radius: 50%;
        background: linear-gradient(35deg, lightgreen, skyblue);
        transform: rotateY(0) translate3d(0, 100px, 400px);
        cursor: pointer;
    }
    .ani {
        animation: rot 16s ease-in-out;
    }
    @keyframes rot {
        to {
            transform: rotateY(720deg) translate3d(0, 100px, 400px) rotateY(-720deg);
        }
    }
</style>

<div class="papa">
    <div class="lzwrap">
        <li-zi title="点击运行"></li-zi>
    </div>
</div>

<script>
    var lz = document.querySelector('li-zi');
    var isRunnig = false;

    lz.onclick = () => {
        if (isRunnig) return;
        lz.classList.add('ani');
    }

    lz.onanimationstart = () => isRunnig = true;

    lz.onanimationend = () => {
        if (!isRunnig) return;
        lz.classList.remove('ani');
        isRunnig = false;
    };
</script>

前一篇: 漂亮的HTML立方体
下一篇: CSS+HTML ：金球藏娇

发表评论:

评论列表 [1条]

#1 | 飞飞于 2025-7-9 21:37 发布: 可惜手机看不到效果～先点赞