HTML+CSS+JS实现 ❤️6种transform图片悬停动态效果❤️

最新推荐文章于 2022-05-20 14:44:04 发布

java李杨勇

最新推荐文章于 2022-05-20 14:44:04 发布

阅读量2.4k

点赞数 6

分类专栏： H5+CSS网页特效实战

本文链接：https://blog.csdn.net/weixin_39709134/article/details/120229479

版权

CSS3 动画效果响应式设计图片滑动前端开发

关键词由CSDN通过智能技术生成

H5+CSS网页特效实战专栏收录该内容

110 篇文章 496 订阅

订阅专栏

🍅 作者主页：Java李杨勇

🍅 简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

效果演示： 文末获取源码

代码目录：

主要代码实现：

CSS样式：

body,
figure,
figcaption,
img,
h2,
p {
    padding: 0;
    margin: 0;
}

body {
    width: 100%;
}

figure {
    position: relative;
    float: left;
    overflow: hidden;
    height: 350px;
    width: 33.33%;
}

figcaption {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    font-family: "å¾®è½¯é›…é»‘";
}

figure img {
    opacity: 0.8;
}

figure figcaption,
figure figcaption p,
figure img {
    transition: all 0.35s;
}

figure figcaption,
figure figcaption div {
    transition: all 0.35s;
}

figure figcaption p,
figure figcaption h2 {
    transition: all 0.35s;
}

figure:hover img {
    transform: translate(-150px, 0);
    opacity: 0.5
}

@media screen and ( max-width: 600px) {
    figure {
        width: 100%
    }
}

@media screen and (min-width: 601px) and ( max-width: 1000px) {
    figure {
        width: 50%
    }
}

@media screen and (min-width: 1001px) {
    figure {
        width: 33.33%
    }
}

.one {
    background: #f9aa0f;
}

.one figcaption {
    padding: 20px;
}

HTML代码 :

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <!--<meta name="viewport" content="width=device-width, initial-scale=1.0">-->
    <title></title>
    <link rel="stylesheet" href="css/css3.css" />
</head>

<body>
    <figure class="one">
        <img src="img/img01.jpg" />
        <figcaption>
            <h2>移动效果标题</h2>
            <p>移动效果一</p>
            <p>移动效果二</p>
            <p>移动效果三</p>
        </figcaption>
    </figure>
    <figure class="two">
        <img src="img/img02.jpg" />
        <figcaption>
            <h2>旋转效果标题</h2>
            <p>旋转效果</p>
            <div></div>
        </figcaption>
    </figure>
    <figure class="three">
        <img src="img/img03.jpg" />
        <figcaption>
            <h2>斜切效果标题</h2>
            <p>斜切效果</p>
        </figcaption>
    </figure>
    <figure class="four">
        <img src="img/img04.jpg" />
        <figcaption>
            <h2>缩放效果标题</h2>
            <p>缩放效果</p>
            <div></div>
        </figcaption>
    </figure>
    <figure class="five">
        <img src="img/img05.jpg" />
        <figcaption>
            <h2>缩放效果标题</h2>
            <p>缩放效果</p>
            <div><input type="button" value="button1" /></div>
        </figcaption>
    </figure>
    <figure class="six">
        <img src="img/img07.jpg" />
        <figcaption>
            <h2>缩放效果标题</h2>
            <p>缩放效果</p>
            <div class="border1"></div>
            <div class="border2"></div>
        </figcaption>
    </figure>
</body>

</html>