情人节降至,用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
分享到:
相关推荐
【标题】"纯CSS3制作红心跳动...通过学习和理解这些CSS3技术,开发者不仅可以实现红心跳动动画,还可以创作出更多创意的网页动态效果,提高网站的吸引力和互动性。同时,这也是一种对前端开发技能的良好实践和提升。
在没有更多上下文的情况下,我们假设这是实现红心点赞动画的核心代码文件,可能包含了HTML结构和CSS3动画的定义。 详细知识点: 1. **CSS3动画**:CSS3提供了关键帧动画(@keyframes)功能,允许开发者定义一个动画...
让我们一起深入了解CSS3的核心概念以及如何将它们应用到这个红心跳动爱心动画的实现中。 首先,CSS3是层叠样式表(Cascading Style Sheets)的第三个主要版本,它引入了许多新的特性和功能,使得网页设计更加动态和...
在本文中,我们将深入探讨如何实现Twitter“点赞”红心按钮的CSS3动画特效,这是一种在用户交互时呈现视觉吸引力的常见设计元素。这个特效在用户点击时,按钮颜色会从灰色变为红色,并且伴随着类似烟花绽放的动态...
CSS3(Cascading Style Sheets Level 3)是CSS的最新版本,它引入了许多强大的新功能,如动画、过渡和多列布局等,使得网页设计更加动态和富有表现力。 首先,让我们了解心脏跳动动画的基本原理。这个特效通常是...
"CSS3红心跳动动画代码"是利用CSS3的关键帧动画(@keyframes)来实现一个模拟心跳效果的动画,这种效果常用于表达浪漫、激动或吸引用户注意力的场景。接下来,我们将深入探讨如何创建这样一个红心跳动动画。 首先,...
其中,动画功能是CSS3的一个重要组成部分,它允许我们创建平滑、动态的效果,而无需JavaScript等其他编程语言。 对于红心跳动动画特效,我们需要创建一个心脏形状。这通常通过使用SVG图形或者CSS3的伪元素(如::...
1. **跳动的红心动画**:这部分利用了CSS3的动画属性来实现。通过设置关键帧(@keyframes)定义心脏跳动的过程,包括心脏的收缩和膨胀,然后将这个动画应用到HTML的心形元素上,使其按照预设的时间轴不断重复,呈现...
总结来说,这个CSS3红色爱心跳动动画的实现原理是利用`@keyframes`定义动画的关键帧,通过改变爱心元素的`transform: scale()`值模拟心脏跳动的效果,再结合HTML和CSS的组合,最终在网页上呈现出一个生动的、具有...
1. **CSS3动画**:使用`@keyframes`规则定义动画帧,通过改变时间轴上的样式属性来实现平滑过渡,比如按钮被点击时的放大、颜色变化等效果。 2. **JavaScript事件监听**:通过`addEventListener`监听用户的点击事件...
在网页设计领域,CSS3(层叠样式表第三版)是一种强大的工具,它极大地扩展了网页元素的可定制性,包括动态效果和动画。在这个案例中,"Twitter红心点赞CSS3动画按钮特效"是一个典型的交互式设计元素,用于模仿社交...
心形被填充为红色(通过设置 fillStyle 属性为 'red' 并调用 fill 方法)心形的大小会周期性地变化,模拟心脏跳动的效果。通过调整 scale 变量并在每个动画帧中重新绘制心形来实现这个效果。requestAnimationFrame ...
"Twitter爱心点赞动画效果代码"是一个实现这种互动功能的实例,它利用了JavaScript库jQuery来创建一个模拟Twitter平台上的红心点赞功能。这个功能允许用户通过点击一个红心图标,不仅触发一个动态的爱心动画,同时还...
本文将详细探讨"jquery点赞"这一主题,包括如何利用jQuery实现类似Twitter的“点赞”红心按钮的CSS3动画特效。 首先,我们需要理解"点赞"功能在Web应用中的作用。点赞功能允许用户表达对某个内容的喜爱或赞同,通常...
这种互动设计是通过JavaScript和CSS3等前端技术实现的,它们允许开发者创建动态、交互式的网页元素。 在倒计时结束的瞬间,页面会切换到一个绚丽的烟花展示场景。这可能是通过HTML5的Canvas元素配合JavaScript的...
7. **颜色与透明度变化**:为了增加视觉效果,爱心气泡在上升过程中可能会改变颜色或逐渐变透明。这可以通过修改Canvas的填充色(`fillStyle`)或不透明度(`globalAlpha`)来实现。 8. **碰撞检测**:为了防止爱心...
在这个项目中,开发人员通过编写代码实现了当用户点击红心按钮时,不仅点赞次数增加,还会触发一个动画效果。 首先,jQuery是一个轻量级的JavaScript库,它简化了DOM操作、事件处理、动画和Ajax交互。在本例中,`...
同时,为了提供良好的用户体验,可能还会添加一些视觉效果,如按钮状态的变化,这些可以通过CSS来实现。 总的来说,这个功能的实现涉及前端和后端的协作,包括jQuery的事件处理、Ajax请求的发送和处理、PHP的数据库...