css 如何在引导卡图像的右上角放置一个元素(心形动画)？

mnemlml8 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(147)

我想在引导图像的右上角放置一个动画，但我真的不知道该怎么做。
这就是我所说的：

大多数情况下，我试图添加一个像这样的心脏动画，例如https://plantpot.works/2847（任何其他也可以接受）。

来源：https://stackoverflow.com/questions/75063316/how-can-i-place-an-element-heart-like-animation-on-the-right-upper-corner-of-b

1条答案

按热度按时间

k4ymrczo1#

你可以用CSS来做这样的事情

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

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
    

    <style>
        .heart {
            width: 80px;
            height: 80px;
            background: url("https://cssanimation.rocks/images/posts/steps/heart.png") no-repeat;
            background-position: 0 0;
            cursor: pointer;
            transition: background-position 1s steps(28);
            transition-duration: 0s;
        }

        .heart.is-active {
            transition-duration: 1s;
            background-position: -2800px 0;
        }
    </style>

    <title>Hello, world!</title>
</head>

<body>
    <div class="card" style="width: 18rem;">
        <div>
            <img src="http://www.azspagirls.com/files/2010/09/orange.jpg" class="card-img-top" alt="...">
            <div style="position: absolute;top: 8px;right: 0px;">

                <div class="stage">
                    <div class="heart"></div>
                </div>

            </div>
        </div>
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's
                content.</p>
            <a href="#" class="btn btn-primary">Go somewhere</a>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>

    <script>
        $(function () {
            $(".heart").on("click", function () {
                $(this).toggleClass("is-active");
            });
        });
    </script>

</body>

</html>

赞(0）回复(0）举报 2023-01-14

我来回答

css 如何在引导卡图像的右上角放置一个元素(心形动画)？

1条答案

相关问题

热门标签

最新问答