来源

https://yinghe.app/

效果演示

Kapture 2024-05-03 at 20.09.52.gif

源码

<a href="https://yinghe.app/go/?url=aHR0cHM6Ly93d3cuY3oyMzMuY29tLw%3D%3D" target="_blank" rel="external nofollow noopener" data-id="61" data-url="https://www.cz233.com" class="card no-c is-views mb-4 site-61" title="厂长资源：高清、秒播不卡顿的综合型影视资源网站"> <div class="card-body url-content d-flex align-items-center"> <div class="url-img d-flex align-items-center justify-content-center"> <img class=" unfancybox" src="https://pic.rmb.bdstatic.com/bjh/user/05e87f6fdb0ee3bdf9423203add92225.png" height="auto" width="auto" alt="厂长资源"> </div> <div class="url-info flex-fill"> <div class="text-sm overflowClip_1"> <strong>厂长资源</strong> </div> <p class="overflowClip_1 m-0 text-muted text-xs">高清、秒播不卡顿的综合型影视资源网站</p> </div> </div> </a>

 .content-layout .url-card .card:hover .url-img {
        animation: jumps 1.2s ease 1
    }

    @keyframes jumps {
        0% {
            transform: translate(0)
        }

        10% {
            transform: translateY(8px) scaleX(1.2) scaleY(0.8)
        }

        30% {
            transform: translateY(-5px) scaleX(1) scaleY(1) rotate(5deg)
        }

        50% {
            transform: translateY(3px) scale(1) rotate(0)
        }

        55% {
            transform: translateY(0) scaleX(1.1) scaleY(0.9) rotate(0)
        }

        70% {
            transform: translateY(-5px) scaleX(1) scaleY(1) rotate(-2deg)
        }

        80% {
            transform: translateY(0) scaleX(1) scaleY(1) rotate(0)
        }

        85% {
            transform: translateY(0) scaleX(1.05) scaleY(0.95) rotate(0)
        }

        to {
            transform: translateY(0) scaleX(1) scaleY(1)
        }
    }