用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>
相关推荐
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06276 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台6 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121386 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
尘心cx7 小时前
前端-CSS-day1
前端·css
全宝8 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
没有钱的钱仔8 小时前
STM32低功耗模式全面指南
css·stm32·css3
拾光拾趣录10 小时前
CSS常见问题深度解析与解决方案(第三波)
前端·css
祝余呀11 小时前
HTML初学者第三天
前端·html
就爱瞎逛11 小时前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind