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