使用HTML + CSS实现鼠标悬停的一些奇幻效果

最新推荐文章于 2024-06-01 19:28:30 发布

网络真危险！！

最新推荐文章于 2024-06-01 19:28:30 发布

阅读量3.6k

点赞数

分类专栏： # css项目踩坑总结文章标签： html5 css

本文链接：https://blog.csdn.net/weixin_55846296/article/details/124014433

版权

css项目踩坑总结专栏收录该内容

5 篇文章 2 订阅

订阅专栏

使用HTML + CSS实现鼠标悬停的一些奇幻效果

背景：图一是刚开始的样子，鼠标悬停上去实现图二的效果
参考：各种鼠标悬停效果
在这里插入图片描述

代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        figure {
            position: relative;
            float: left;
            overflow: hidden;
            margin: 10px 1%;
            min-width: 320px;
            max-width: 480px;
            max-height: 360px;
            width: 48%;
            height: auto;
            background: #3085a3;
            text-align: center;
            cursor: pointer;
        }

        figure img {
            position: relative;
            display: block;
            min-height: 100%;
            max-width: 100%;
            opacity: 0.8;
        }

        figure figcaption {
            padding: 2em;
            color: #fff;
            text-transform: uppercase;
            font-size: 1.25em;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        figure figcaption::before,
        figure figcaption::after {
            pointer-events: none;
        }

        figure figcaption,
        figure figcaption>a {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        figure figcaption>a {
            z-index: 1000;
            text-indent: 200%;
            white-space: nowrap;
            font-size: 0;
            opacity: 0;
        }

        figure h2 {
            word-spacing: -0.15em;
            font-weight: 300;
        }

        figure h2 span {
            font-weight: 800;
        }

        figure h2,
        figure p {
            margin: 0;
        }

        figure p {
            letter-spacing: 1px;
            font-size: 68.5%;
        }

        figure.effect-julia {
            background: #2f3238;
        }

        figure.effect-julia img {
            max-width: none;
            height: 400px;
            -webkit-transition: opacity 1s, -webkit-transform 1s;
            transition: opacity 1s, transform 1s;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }

        figure.effect-julia figcaption {
            text-align: left;
        }

        figure.effect-julia h2 {
            position: relative;
            padding: 0.5em 0;
        }

        figure.effect-julia p {
            display: inline-block;
            margin: 0 0 0.25em;
            padding: 0.4em 1em;
            background: rgba(255, 255, 255, 0.9);
            color: #2f3238;
            text-transform: none;
            font-weight: 500;
            font-size: 75%;
            -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
            transition: opacity 0.35s, transform 0.35s;
            -webkit-transform: translate3d(-360px, 0, 0);
            transform: translate3d(-360px, 0, 0);
        }

        figure.effect-julia p:first-child {
            -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
        }

        figure.effect-julia p:nth-of-type(2) {
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
        }

        figure.effect-julia p:nth-of-type(3) {
            -webkit-transition-delay: 0.05s;
            transition-delay: 0.05s;
        }

        figure.effect-julia:hover p:first-child {
            -webkit-transition-delay: 0s;
            transition-delay: 0s;
        }

        figure.effect-julia:hover p:nth-of-type(2) {
            -webkit-transition-delay: 0.05s;
            transition-delay: 0.05s;
        }

        figure.effect-julia:hover p:nth-of-type(3) {
            -webkit-transition-delay: 0.1s;
            transition-delay: 0.1s;
        }

        figure.effect-julia:hover img {
            opacity: 0.4;
            -webkit-transform: scale3d(1.1, 1.1, 1);
            transform: scale3d(1.1, 1.1, 1);
        }

        figure.effect-julia:hover p {
            opacity: 1;
            -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
        }
    </style>
</head>

<body>
    <figure class="effect-julia">
        <img src="https://tympanus.net/Development/HoverEffectIdeas/img/21.jpg" alt="img21" />
        <figcaption>
            <h2>Passionate <span>Julia</span></h2>
            <div>
                <p>Julia dances in the deep dark</p>
                <p>She loves the smell of the ocean</p>
                <p>And dives into the morning light</p>
            </div>
            <a href="#">View more</a>
        </figcaption>
    </figure>
</body>

</html>

网络真危险！！

关注

0
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
使用HTML + CSS实现鼠标悬停的一些奇幻效果

使用HTML + CSS实现鼠标悬停的一些奇幻效果背景：图一是刚开始的样子，鼠标悬停上去实现图二的效果参考：各种鼠标悬停效果代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport
复制链接

扫一扫

专栏目录