使用html5编辑爱心树表白呈现效果

作者：System 时间：2024年08月13日分类：所有,html5 字数：1685

以下是一个使用HTML5和CSS3创建的爱心树表白页面的简单示例：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱心树表白</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #222 url(background.jpg) no-repeat center center fixed;
    background-size: cover;
  }
 
  .heart-container {
    position: relative;
    width: 200px;
    height: 200px;
    perspective: 600px;
  }
 
  .heart {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f00;
    transform-origin: center bottom;
    animation: rotate 5s infinite linear;
  }
 
  .heart:before, .heart:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #f00;
    border-radius: 50%;
  }
 
  .heart:before {
    top: -50%;
    left: 0;
    transform: translate(0, -50%);
  }
 
  .heart:after {
    top: 0;
    left: -50%;
    transform: translate(-50%, 0);
  }
 
  @keyframes rotate {
    0% {
      transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
      transform: rotateX(90deg) rotateY(360deg) rotateZ(360deg);
    }
  }
 
  .text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 20px;
    text-align: center;
  }
</style>
</head>
<body>
 
<div class="heart-container">
  <div class="heart"></div>
</div>
<div class="text">
  <p>我爱你，爱心树将永远开放给你。</p>
</div>
 
</body>
</html>

在这个示例中，我们创建了一个包含爱心图案的容器，通过CSS3的动画效果实现爱心的旋转。背景使用了一张树木的图片，进一步增加了表白的真实感。这个页面简洁而有趣，可以作为表白的一种方式。

使用html5编辑爱心树表白呈现效果

评论已关闭

推荐阅读