淡淡的凌乱风的gravatar头像
淡淡的凌乱风 2014-08-13 10:49:58

html+css3实现跳动的红心网页特效源代码下载

html+css3实现跳动的红心网页特效源代码下载

<!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>
</html>

打赏

文件名:heart.zip,文件大小:1.218K 下载
  • /
    • /heart.html
最代码最近下载分享源代码列表最近下载
2174728859  LV7 2022年5月9日
1164252099  LV1 2018年10月15日
wangweit1x2x  LV7 2018年8月27日
cb123456  LV9 2018年5月29日
muzi0617  LV1 2017年11月28日
xyljxylj  LV11 2017年11月18日
南峋丶  LV18 2016年6月18日
chn5712718  LV5 2015年12月11日
fansle  LV1 2015年3月21日
718886446  LV1 2014年12月22日
最代码最近浏览分享源代码列表最近浏览
y20031217  LV7 2022年12月17日
微信网友_6184005683466240  LV8 2022年11月9日
183859  LV1 2022年10月7日
jdhdjsksscdw  LV6 2022年8月2日
2174728859  LV7 2022年5月9日
Lazy-xyz  LV3 2022年4月26日
暂无贡献等级
QWERTYUIOPAZSX  LV3 2022年2月24日
hanzq2018  LV2 2021年12月16日
project  LV1 2021年10月26日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友