跳动的红心

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	 
	<!-- Last Updated March 7th -->
	<title>heart</title>
	<meta charset="UTF-8">
	<style type="text/css">
	html, body {
	  height: 100%;
	  background: #202a39;
	}
	.withLove {
	    overflow: hidden;
	    text-align: center;
	    padding-bottom: 2em;
	    cursor: default;
	    color: #616c84;
	}
	 @media screen and (min-width: 900px) {
	.withLove {
	    margin-top: 125px;
	}
	}
	.withLove * {
	    display: inline-block;
	}
	.withLove .alpha, .withLove .omega {
	    width: 40%;
	}
	.withLove .alpha {
	    text-align: right;
	}
	.withLove .omega {
	    text-align: left;
	}
	.withLove .heart {
	    margin: 0 -2px;
	    position: relative;
	    z-index: 3;
	    -webkit-animation: throb 1.33s ease-in-out infinite;
	    animation: throb 1.33s ease-in-out infinite;
	}
	.withLove .heart path {
	    fill: #ff005d;
	}
	 @media screen and (min-width: 300px) {
	.withLove .heart {
	    width: 30px;
	    height: 30px;
	    top: .66em;
	}
	}
	@media screen and (min-width: 460px) {
	.withLove .heart {
	    top: .8em;
	    width: 50px;
	    height: 50px;
	}
	}
	 @-webkit-keyframes throb {
	 0% {
	 -webkit-transform: scale(1);
	}
	 50% {
	 -webkit-transform: scale(0.8);
	}
	 100% {
	 -webkit-transform: scale(1);
	}
	}
	 @keyframes throb {
	 0% {
	 transform: scale(1);
	}
	 50% {
	 transform: scale(0.8);
	}
	 100% {
	 transform: scale(1);

	}

	}

	</style>

	</head>

	<body>

	<div class="withLove"> <span data-scroll-reveal-initialized="true" style="-webkit-transform: translatex(0);transform: translatex(0);opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-id="53" class="alpha" data-scroll-reveal="move 50px enter left over 1s no reset">Made with</span>

	 

	 <svg class="heart" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="92.515px" height="73.161px" viewBox="0 0 92.515 73.161" enable-background="new 0 0 92.515 73.161" xml:space="preserve">

	  <g>

	    <path d="M82.32,7.888c-8.359-7.671-21.91-7.671-30.271,0l-5.676,5.21l-5.678-5.21c-8.357-7.671-21.91-7.671-30.27,0          c-9.404,8.631-9.404,22.624,0,31.255l35.947,32.991L82.32,39.144C91.724,30.512,91.724,16.52,82.32,7.888z" fill="#010101"></path>

	  </g>

	  </svg>

	   

	   <span data-scroll-reveal-initialized="true" style="-webkit-transform: translatex(0);transform: translatex(0);opacity: 1;-webkit-transition: -webkit-transform 1s ease-in-out 0s,  opacity 1s ease-in-out 0s;transition: transform 1s ease-in-out 0s, opacity 1s ease-in-out 0s;-webkit-perspective: 1000;-webkit-backface-visibility: hidden;" data-scroll-reveal-id="54" class="omega" data-scroll-reveal="move 50px enter right over 1s no reset">in NanChang</span> </div>

	</body>



输入图片说明

转载于:https://my.oschina.net/zhangshsURL/blog/1581577

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值