纯CSS心

下载代码

html

css

分享到微信朋友圈

html

css

body {
  background: #fff;  
}
 
.center {
  position: absolute;
  margin: auto;
  top:-70px; bottom:0;
  left:0; right:0;
}

.heart {
  top: -100px;
}

.half {
  width: 100px; 
  height: 160px;
  background: #F65549;
  border: #1A4264 solid 10px;
  -webkit-transform-origin: 100% 100%;
      -ms-transform-origin: 100% 100%;
          transform-origin: 100% 100%;
  border-radius: 70px 70px 0 0;
  -webkit-transform: translateX(20%) rotate(-45deg);
      -ms-transform: translateX(20%) rotate(-45deg);
          transform: translateX(20%) rotate(-45deg);
} 
.half:nth-child(2) {  
  height: 100px;
  top: -95px;
  right: -82px;
  -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
  -webkit-transform: translateX(-20%) rotate(45deg);
      -ms-transform: translateX(-20%) rotate(45deg);
          transform: translateX(-20%) rotate(45deg);
}
.rect {
  width: 42px;
  height: 60px;
  top: 121px;
  right: 3px;
  background: #F65549;
  border: #1A4264 solid 10px;
  border-top: 0;
  border-radius: 0;
  -webkit-transform-origin: 0% 100%;
      -ms-transform-origin: 0% 100%;
          transform-origin: 0% 100%;
  -webkit-transform: translateX(-20%) rotate(45deg);
      -ms-transform: translateX(-20%) rotate(45deg);
          transform: translateX(-20%) rotate(45deg);
}

.hilite {
  width: 10px;
  height: 40px;
  top: -15px;
  right: -120px;
  border: white solid 0px;
  border-right: white solid 10px;
  border-radius: 0 50% 50% 0;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg