`
DBear
  • 浏览: 228591 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类

CSS3实现红心动态变化效果

webkitChromeFirefoxCSSHTML 
阅读更多

情人节降至，用CSS3做个红心，送给那个我想见见不到的人。。。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
#heart {
    margin: 0 auto;
    position: absolute;
    z-index: 5;
    overflow: hidden;
    line-height: 350px;
    text-align: center;
    font-family: Cambria, Georgia;
    font-size: 48px;
    font-weight: bold;
    color: white;
    text-shadow: black 2px 2px 4px;
    cursor: pointer;
	left:250px;
	top:50px;
	width:400px;
	height:800px;

}

#heart-part1, #heart-part2, #heart-part3, #heart-part4, #heart-extra-1, #heart-extra-2, #heart-extra-3{
    position: absolute;
    z-index: -2;
	background: #EB1026;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
}

#heart-extra-1, #heart-extra-2, #heart-extra-3{
  width:20px;
  height:80px;
  position: absolute;
  top:10px;


}

#heart-extra-1{
  left:40px;
    -webkit-transform: rotate(-30deg);
    -moz-transform: rotate(-30deg);

}
#heart-extra-2{
  left:150px;

}
#heart-extra-3{
  left:250px;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);

}



#heart:hover #heart-part1, #heart:hover #heart-part2, #heart:hover #heart-part3, #heart:hover #heart-part4, #heart:hover #heart-extra-1, #heart:hover #heart-extra-2, #heart:hover #heart-extra-3{
	background: red;

}

#heart:hover #heart-extra-1, #heart:hover #heart-extra-2, #heart:hover #heart-extra-3{
  -moz-box-shadow: 0 0 5px #888;
  -webkit-box-shadow: 0 0 5px#888;
  box-shadow: 0 0 5px #888;
}

#heart-part1{
    top: 100px;
    left: 10px;
    -webkit-border-radius: 75px 75px 0 0;
    -moz-border-radius-topleft: 75px 75px;
    -moz-border-radius-topright: 75px 75px;
    border-bottom: 0;
	width:150px;
	height:75px;
}
#heart-part2{
    top: 100px;
    left: 150px;
    -webkit-border-radius: 75px 75px 0 0;
    -moz-border-radius-topleft: 75px 75px;
    -moz-border-radius-topright: 75px 75px;
    border-bottom: 0;
	width:150px;
	height:75px;
}

#heart-part3{
    top: 175px;
    left: 10px;
    -webkit-border-radius: 0 0 145px 145px;
    -moz-border-radius: 0 0 145px 145px;
	border-top:0px;
	width:290px;
	height:130px;

}

#heart-part4{
    top: 202px;
    left: 84px;
	width:142px;
	height:142px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
	border-top:0px;
}


#love {
position: absolute;
text-transform: uppercase;
text-indent: 16px;
letter-spacing: 10px;
font: 65px/44px Georgia, Times New Roman, Times, serif;
color: white;
text-shadow: 0 -5px 0 rgba(0, 0, 0, 0.5);
top:190px;
left:35px; 
z-index:999;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
}

#heart:hover #love{
color:yellow;
text-shadow: -10px -30px 0px rgba(0, 0, 0, 0.8);
-webkit-transform:translate(10px,20px);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
}

</style>
</HEAD>

<BODY>
<div id="heart">
  <div id="heart-extra-1"></div>
  <div id="heart-extra-2"></div>
  <div id="heart-extra-3"></div>
  <div id="heart-part1"></div>
  <div id="heart-part2"></div>
  <div id="heart-part3"></div>
  <div id="heart-part4"></div>
  <div id="love">Love</div>
</div>
<div id="xu"></div>
<div id="jia"></div>
<div id="yang"></div>
</BODY>
</HTML>

 

效果图：


 

没做的太复杂，练习下吧。在Chrome下运行效果最好，Firefox下没有渐变效果。

  • 大小: 18.1 KB
分享到：
| 如何解决IE，FF的div宽度兼容问题？
评论
1 楼 muyeandmuye 2015-05-14  
呃，这里被抄袭了。http://www.myexception.cn/HTML-CSS/960248.html
貌似哈。可以看看。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics