CSS3兑现红心动态变化效果-HTML教程-爱易网页

CSS3兑现红心动态变化效果

日期：2014-05-17　浏览次数：20956 次

CSS3实现红心动态变化效果

情人节降至，用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下没有渐变效果。

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

CSS3兑现红心动态变化效果

相关资料更多>

推荐阅读更多>