css实现图片呈现动画案例

CSS实现图片呈现动画是一种生动有趣的效果，通过CSS样式数值的改变来呈现动画特效，让页面更加丰富多彩。下面介绍一个CSS实现图片呈现动画的案例：

    <html>
    <head>
        <style>
            .image-wrapper {
                overflow: hidden;
                position: relative;
                margin: 20px;
            }

            .image-wrapper img {
                position: absolute;
                top: -50%;
                left: -50%;
                transform: translate(50%,50%) rotate(-45deg);
                width: 150%;
                height: 150%;
            }

            .image-wrapper:hover img {
                top: -25%;
                left: -25%;
                transform: translate(0%,0%) rotate(0deg);
                transition: all 0.5s ease-in-out;
            }
        </style>
    </head>
    <body>
        <div class="image-wrapper">
            <img src="/res/2023/08-20/13/35703991c279d1dac0dede819e1e8437.jpg" alt="Picture">
        </div>
    </body>
    </html>

代码解析：

    .image-wrapper：定义包含图片的容器；
    overflow: hidden：用于将溢出图片的部分隐藏；
    position: relative：为图片提供定位上下文；
    margin: 20px：提供容器本身与其他元素之间的间距；
    .image-wrapper img：定义图片样式；
    position: absolute：绝对定位使图片从容器中心开始移动；
    top: -50%；left: -50%：将图片的中心定位在容器的中心；
    transform: translate(50%,50%) rotate(-45deg)：把图片旋转并向右下角移动；
    width: 150%; height: 150%：确保图片完全填充容器；
    .image-wrapper:hover img：当鼠标悬停在容器上时，改变图片样式；
    top: -25%; left: -25%：使图片移动到容器中心；
    transform: translate(0%,0%) rotate(0deg)：取消图片的旋转效果；
    transition: all 0.5s ease-in-out：动画效果的过渡时间和速度；

效果预览：

css实现图片呈现动画案例

相关推荐