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

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

  • 大小: 18.1 KB
分享到:
评论
1 楼 muyeandmuye 2015-05-14  
呃,这里被抄袭了。http://www.myexception.cn/HTML-CSS/960248.html
貌似哈。可以看看。

相关推荐

    纯CSS3制作红心跳动动画特效.zip

    【标题】"纯CSS3制作红心跳动...通过学习和理解这些CSS3技术,开发者不仅可以实现红心跳动动画,还可以创作出更多创意的网页动态效果,提高网站的吸引力和互动性。同时,这也是一种对前端开发技能的良好实践和提升。

    基于CSS3 Twitter红心点赞按钮动画特效源码.zip

    在没有更多上下文的情况下,我们假设这是实现红心点赞动画的核心代码文件,可能包含了HTML结构和CSS3动画的定义。 详细知识点: 1. **CSS3动画**:CSS3提供了关键帧动画(@keyframes)功能,允许开发者定义一个动画...

    纯CSS3制作红心跳动动画特效

    让我们一起深入了解CSS3的核心概念以及如何将它们应用到这个红心跳动爱心动画的实现中。 首先,CSS3是层叠样式表(Cascading Style Sheets)的第三个主要版本,它引入了许多新的特性和功能,使得网页设计更加动态和...

    Twitter“点赞”红心按钮CSS3动画特效

    在本文中,我们将深入探讨如何实现Twitter“点赞”红心按钮的CSS3动画特效,这是一种在用户交互时呈现视觉吸引力的常见设计元素。这个特效在用户点击时,按钮颜色会从灰色变为红色,并且伴随着类似烟花绽放的动态...

    纯CSS3制作红心跳动动画特效特效代码

    CSS3(Cascading Style Sheets Level 3)是CSS的最新版本,它引入了许多强大的新功能,如动画、过渡和多列布局等,使得网页设计更加动态和富有表现力。 首先,让我们了解心脏跳动动画的基本原理。这个特效通常是...

    CSS3红心跳动动画代码

    "CSS3红心跳动动画代码"是利用CSS3的关键帧动画(@keyframes)来实现一个模拟心跳效果的动画,这种效果常用于表达浪漫、激动或吸引用户注意力的场景。接下来,我们将深入探讨如何创建这样一个红心跳动动画。 首先,...

    纯CSS3红心跳动动画特效特效代码

    其中,动画功能是CSS3的一个重要组成部分,它允许我们创建平滑、动态的效果,而无需JavaScript等其他编程语言。 对于红心跳动动画特效,我们需要创建一个心脏形状。这通常通过使用SVG图形或者CSS3的伪元素(如::...

    爱心源码 html-css 动态跳动的爱心和动态的在一起时间跳动

    1. **跳动的红心动画**:这部分利用了CSS3的动画属性来实现。通过设置关键帧(@keyframes)定义心脏跳动的过程,包括心脏的收缩和膨胀,然后将这个动画应用到HTML的心形元素上,使其按照预设的时间轴不断重复,呈现...

    CSS3红色爱心跳动动画代码

    总结来说,这个CSS3红色爱心跳动动画的实现原理是利用`@keyframes`定义动画的关键帧,通过改变爱心元素的`transform: scale()`值模拟心脏跳动的效果,再结合HTML和CSS的组合,最终在网页上呈现出一个生动的、具有...

    喜欢,点赞按钮的动态效果

    1. **CSS3动画**:使用`@keyframes`规则定义动画帧,通过改变时间轴上的样式属性来实现平滑过渡,比如按钮被点击时的放大、颜色变化等效果。 2. **JavaScript事件监听**:通过`addEventListener`监听用户的点击事件...

    Twitter红心点赞CSS3动画按钮特效特效代码

    在网页设计领域,CSS3(层叠样式表第三版)是一种强大的工具,它极大地扩展了网页元素的可定制性,包括动态效果和动画。在这个案例中,"Twitter红心点赞CSS3动画按钮特效"是一个典型的交互式设计元素,用于模仿社交...

    HTML+CSS+JS 画出一颗一颗跳动的红心

    心形被填充为红色(通过设置 fillStyle 属性为 'red' 并调用 fill 方法)心形的大小会周期性地变化,模拟心脏跳动的效果。通过调整 scale 变量并在每个动画帧中重新绘制心形来实现这个效果。requestAnimationFrame ...

    Twitter爱心点赞动画效果代码.zip

    "Twitter爱心点赞动画效果代码"是一个实现这种互动功能的实例,它利用了JavaScript库jQuery来创建一个模拟Twitter平台上的红心点赞功能。这个功能允许用户通过点击一个红心图标,不仅触发一个动态的爱心动画,同时还...

    jquery点赞

    本文将详细探讨"jquery点赞"这一主题,包括如何利用jQuery实现类似Twitter的“点赞”红心按钮的CSS3动画特效。 首先,我们需要理解"点赞"功能在Web应用中的作用。点赞功能允许用户表达对某个内容的喜爱或赞同,通常...

    新年倒计时加绚丽烟花.zip

    这种互动设计是通过JavaScript和CSS3等前端技术实现的,它们允许开发者创建动态、交互式的网页元素。 在倒计时结束的瞬间,页面会切换到一个绚丽的烟花展示场景。这可能是通过HTML5的Canvas元素配合JavaScript的...

    HTML5 Canvas圆形爱心点赞按钮冒泡动画特效

    7. **颜色与透明度变化**:为了增加视觉效果,爱心气泡在上升过程中可能会改变颜色或逐渐变透明。这可以通过修改Canvas的填充色(`fillStyle`)或不透明度(`globalAlpha`)来实现。 8. **碰撞检测**:为了防止爱心...

    Twitter爱心点赞动画效果特效代码

    在这个项目中,开发人员通过编写代码实现了当用户点击红心按钮时,不仅点赞次数增加,还会触发一个动画效果。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在本例中,`...

    jQuery+Ajax+PHP实现“喜欢”评级功能附源码下载

    同时,为了提供良好的用户体验,可能还会添加一些视觉效果,如按钮状态的变化,这些可以通过CSS来实现。 总的来说,这个功能的实现涉及前端和后端的协作,包括jQuery的事件处理、Ajax请求的发送和处理、PHP的数据库...

Global site tag (gtag.js) - Google Analytics