练手切水果

最新推荐文章于 2024-04-15 02:24:27 发布

ggyyjavascript

最新推荐文章于 2024-04-15 02:24:27 发布

阅读量424

点赞数

分类专栏： js css 文章标签： javascript 切水果 css切水果切水果小游戏 js小游戏

本文链接：https://blog.youkuaiyun.com/guoshujie1/article/details/124041537

版权

js 同时被 2 个专栏收录

28 篇文章

订阅专栏

css

9 篇文章

订阅专栏

在这里插入图片描述

<div class="apple egg">
        <div class="small_apple  small_egg1"></div>
        <div class="small_apple  small_egg1 small_apple2"></div>
        <div class="small_apple  small_egg1 small_apple3"></div>
    </div>
    <div class="apple egg2">
        <div class="small_apple small_egg2"></div>
        <div class="small_apple small_egg2 small_apple2"></div>
        <div class="small_apple small_egg2 small_apple3"></div>
    </div>
    <script>
        let appleDOM = document.querySelectorAll('.apple')
        appleDOM.forEach(L=>{
            let smallAppleDOM = L.querySelectorAll('.small_apple')
            L.onmouseover = function () {
                L.classList.add('appleTwo')
                smallAppleDOM.forEach((M,i)=>{
                    M.style.display = 'inline-block'
                    if (i==1) {
                        M.classList.add('small_apple2')
                    } else if (i==2) {
                        M.classList.add('small_apple3')
                    }
                })
            }
        })
        for (let i = 0; i < appleDOM.length; i++) {
            appleDOM[i].addEventListener("animationiteration", function(){
                appleDOM[i].classList.remove('appleTwo')
                let smallAppleDOM = appleDOM[i].querySelectorAll('.small_apple')
                smallAppleDOM.forEach((L,i)=>{
                    L.style.display = 'none'
                    if (i==1) {
                        L.classList.remove('small_apple2')
                    } else if (i==2) {
                        L.classList.remove('small_apple3')
                    }
                })
            }, false);
                
        }
    </script>

.apple {
    position: absolute;
    bottom: -300px;
    width: 150px;
    height: 150px;
    left: 50%;
    transform: translate(-50%);
    border-radius: 33% 67% 37% 63% / 35% 62% 38% 65% ;
}
.egg {
    background-color: bisque;
    box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .05),
                15px 25px 10px rgba(0, 0, 0, .1),
                15px 20px 20px rgba(0, 0, 0, .05),
                inset -10px -10px 15px rgba(255, 228, 196, .9);
    animation: appleAni 5s infinite;
    animation-timing-function: cubic-bezier(.55, 0, .85, .36);
}
.egg2 {
    background-color: #f0eeea;
    box-shadow: inset 10px 10px 10px rgba(0, 0, 0, .05),
                15px 25px 10px rgba(0, 0, 0, .1),
                15px 20px 20px rgba(0, 0, 0, .05),
                inset -10px -10px 15px rgba(240, 238, 234, .9);
    animation-delay: 5s;
    animation: appleAni2 3s infinite;
    animation-timing-function: cubic-bezier(.55, 0, .85, .36);
}
body::-webkit-scrollbar {
    display: none
}
@keyframes appleAni {
    0% {bottom: -300px;}
    50% {bottom: 70%;}
    100% {bottom: -300px;left: 15%;}
}
@keyframes appleAni2 {
    0% {bottom: -300px;}
    50% {bottom: 80%;}
    100% {bottom: -300px;left: 75%;}
}
.apple::before {
    position: absolute;
    content: '';
    top: 40px;
    left: 40px;
    width: 5px;
    height: 5px;
    border-radius: 10% 90% 15% 85% / 51% 62% 38% 49% ;
    background-color: rgb(85 84 84 / 33%);
}
.apple::after {
    position: absolute;
    content: '';
    top: 60px;
    left: 80px;
    width: 5px;
    height: 5px;
    border-radius: 10% 90% 15% 85% / 51% 62% 38% 49% ;
    background-color: rgb(0 0 0 / 8%);
}

.small_apple {
    display: none;
    position: absolute;
    width: 50px;
    height: 50px;
    border-radius: 33% 67% 37% 63% / 35% 62% 38% 65% ;
}
.small_egg1 {
    background-color: bisque;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .05),
                8px 10px 5px rgba(0, 0, 0, .1),
                8px 10px 8px rgba(0, 0, 0, .05),
                inset -5px -5px 8px rgba(255, 228, 196, .9);
}
.small_egg2 {
    background-color: f0eeea;
    box-shadow: inset 5px 5px 5px rgba(0, 0, 0, .05),
                8px 10px 5px rgba(0, 0, 0, .1),
                8px 10px 8px rgba(0, 0, 0, .05),
                inset -5px -5px 8px rgba(240, 238, 234, .9);
}
.small_apple2 {
    animation: smallAppleAni2 2s linear;
}
.small_apple3 {
    animation: smallAppleAni3 2s linear;
}
@keyframes smallAppleAni2 {
    0%{left: 0;}
    100%{left: 100px;}
}
@keyframes smallAppleAni3 {
    0%{top: 0;}
    100%{top: 100px;}
}
.appleTwo {
    background: transparent;
    box-shadow: 0 0; 
}