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下没有渐变效果。