用html写一个爱心

html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <title>爱您</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        background-color: pink;
      }
      #frame {
        position: relative;
        width: 400px;
        height: 300px;
        margin: 200px auto;
      }
      .left,
      .right {
        top: 0;
        width: 200px;
        height: 200px;
        border-radius: 50%;
      }
      .left {
        left: 35px;
      }
      .right {
        right: 35px;
        z-index: -1;
      }
      .bottom {
        bottom: 36px;
        left: 100px;
        width: 200px;
        height: 200px;
        transform: rotate(45deg);
        z-index: -1;
      }
      .heart {
        position: absolute;
        box-shadow: 0 0 40px #d5093c;
        animation: beat 0.8s ease infinite normal;
        background: linear-gradient(-90deg, #f50a45 0%, #d5093c 40%);
      }
      @keyframes beat {
        0% {
          transform: scale(1) rotate(225deg);
          box-shadow: 0 0 40px #d5093c;
        }
        50% {
          transform: scale(1.1) rotate(225deg);
          box-shadow: 0 0 70px #d5093c;
        }
        100% {
          transform: scale(1) rotate(225deg);
          box-shadow: 0 0 40px #d5093c;
        }
      }
      @keyframes a {
        0% {
          transform: scale(1) rotate(0deg);
        }
        50% {
          transform: scale(1.1) rotate(0deg);
        }
        100% {
          transform: scale(1) rotate(0deg);
        }
      }

      #z {
        width: 90px;
        margin: -23% 30%;
        position: absolute;
        animation: a 0.8s ease infinite normal;
      }
      #w {
        width: 90px;
        margin: -23% 67%;
        position: absolute;
        animation: a 0.8s ease infinite normal;
      }
      #con {
        width: 20px;
        margin: -7% 49.5%;
        position: absolute;
        animation: a 0.8s ease infinite normal;
      }
    </style>
  </head>
  <body>
    <div id="frame">
      <div class="heart left"></div>
      <div class="heart right"></div>
      <div class="heart bottom"></div>
    </div>
    <div id="z">
      <h2>胡歌</h2>
    </div>
    <div id="w">
      <h2>未知</h2>
    </div>
    <!-- <div id="con">
    	<h1>
    		字里行间,全都是你。
    	</h1>
    </div> -->
    <script type="text/javascript">
      var btn = document.getElementById('frame')
      //   双击事件
      btn.ondblclick = function () {
        // window.location.href = 'http://www.kim-shift.cn'
        window.open('http://www.kim-shift.cn')
      }
    </script>
  </body>
</html>
相关推荐
Xf3n1an7 小时前
html语法
前端·html
ai小鬼头9 小时前
如何重装旁路由系统并优化AIStarter部署:一步步教程
java·css·github
止观止10 小时前
CSS3 粘性定位解析:position sticky
前端·css·css3
I'mxx11 小时前
【html常见页面布局】
前端·css·html
布丁052312 小时前
DOM编程实例(不重要,可忽略)
前端·javascript·html
慧一居士13 小时前
预处理器完整功能介绍和示例演示(LESS/SCSS)
前端·css·css3
你这-坏孩子15 小时前
更改elementui 图标 css content
前端·css·elementui
扶光与望舒呀16 小时前
HTML 标题标签
前端·css·html
sunbyte17 小时前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DoubleClickHeart(双击爱心)
前端·javascript·css·vue.js·tailwindcss
周不凢17 小时前
css 边框颜色渐变
前端·css