温馨提示×

html跳动爱心代码怎么写

小亿
1265
2023-08-04 00:46:34
栏目: 编程语言

下面是一个简单的HTML跳动爱心代码示例:

<!DOCTYPE html>

<html>

<head>

  <title>跳动爱心</title>

  <style>

    .heart {

      position: relative;

      width: 100px;

      height: 100px;

      transform: rotate(45deg);

      animation: beat 1.2s infinite ease-in-out;

    }

    .heart:before,

    .heart:after {

      content: "";

      position: absolute;

      top: 0;

      width: 100px;

      height: 100px;

      border-radius: 50%;

      background-color: #e74c3c;

    }

    .heart:before {

      left: -50px;

    }

    .heart:after {

      left: 50px;

    }

    @keyframes beat {

      0% {

        transform: scale(1) rotate(45deg);

      }

      50% {

        transform: scale(0.6) rotate(45deg);

      }

      100% {

        transform: scale(1) rotate(45deg);

      }

    }

  </style>

</head>

<body>

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

</body>

</html>

该代码使用CSS动画来实现爱心的跳动效果。使用.heart类选择器定义了爱心元素的样式,包括尺寸、颜色和旋转角度等。

通过:before和:after伪元素创建两个半圆形状构成爱心的两侧。使用@keyframes关键字定义了名为beat的动画,控制爱心的尺寸和旋转。

最后,在HTML中创建了一个具有.heart类的<div>元素,用于展示跳动的爱心效果。你可以根据需要调整样式和动画参数来实现更多个性化的效果。


0