Register
> 博客>

网页html爱心代码

新星源码网 1年前 7 0

以下是一个简单的HTML爱心代码：

<!DOCTYPE html>
<html>
<head>
    <title>爱心</title>
    <style>
        .heart {
            position: relative;
            width: 100px;
            height: 90px;
        }
        .heart:before,
        .heart:after {
            position: absolute;
            content: "";
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            background: red;
            border-radius: 50px 50px 0 0;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
        }
        .heart:after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }
    </style>
</head>
<body>
    <div class="heart"></div>
</body>
</html>

这个代码使用了CSS的伪元素和transform属性来创建一个简单的爱心形状。你可以将这个代码复制到一个HTML文件中并在浏览器中打开它来查看效果。

如果你想要在网页中添加一个可交互的爱心，可以使用JavaScript来实现。以下是一个简单的例子：

<!DOCTYPE html>
<html>
<head>
    <title>爱心</title>
    <style>
        .heart {
            position: relative;
            width: 100px;
            height: 90px;
            cursor: pointer;
        }
        .heart:before,
        .heart:after {
            position: absolute;
            content: "";
            left: 50px;
            top: 0;
            width: 50px;
            height: 80px;
            background: red;
            border-radius: 50px 50px 0 0;
            transform: rotate(-45deg);
            transform-origin: 0 100%;
            transition: all 0.2s ease-in-out;
        }
        .heart:after {
            left: 0;
            transform: rotate(45deg);
            transform-origin: 100% 100%;
        }
        .heart:hover:before,
        .heart:hover:after {
            transform: scale(1.2) rotate(-45deg);
            background: pink;
        }
    </style>
</head>
<body>
    <div class="heart"></div>
    <script>
        const heart = document.querySelector('.heart');
        heart.addEventListener('click', function() {
            heart.classList.toggle('active');
        });
    </script>
</body>
</html>

这个代码使用了CSS的伪元素和transform属性来创建一个简单的爱心形状，并添加了:hover伪类来实现鼠标悬停时的动画效果。同时，使用JavaScript监听了爱心的点击事件，并在点击时切换了一个名为“active”的CSS类，以实现爱心的动态效果。

你可以将这个代码复制到一个HTML文件中并在浏览器中打开它来查看效果。

Related

热门文章

微海报