用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>
相关推荐
小*-^-*九1 天前
php 使用html 生成pdf word wkhtmltopdf 系列2
pdf·html·php
BillKu1 天前
vue3 样式 css、less、scss、sass 的说明
css·less·sass·scss
乖女子@@@1 天前
css3新增-网格Grid布局
前端·css·css3
Sapphire~1 天前
重学前端013 --- 响应式网页设计 CSS网格布局
前端·css
二十雨辰1 天前
歌词滚动效果
前端·css
hashiqimiya1 天前
html实现右上角有个图标,鼠标移动到该位置出现手型,点击会弹出登录窗口。
前端·html
BillKu1 天前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
dllmayday2 天前
FontForge 手工扩展 iconfont.ttf
css·qt
BUG创建者2 天前
html获取16个随机颜色并不重复
css·html·css3
DevilSeagull2 天前
JavaScript WebAPI 指南
java·开发语言·javascript·html·ecmascript·html5