情人节降至，用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的数据库...