纯CSS创建心形翻转动画

最新推荐文章于 2021-11-29 20:35:45 发布
最新推荐文章于 2021-11-29 20:35:45 发布
阅读量1.4k 收藏 8
点赞数 2
分类专栏： CSS 文章标签： css 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/EeeEui/article/details/51779711
版权

首先，需要创建一个元素，代码如下

<!DOCTYPE html>
<html>  
    <meta charset="utf-8">
    <head>
        <title></title>
    </head>
    <body>
        <div id="bgCanvas">
            <div class="heart-shape"></div>
        </div>
    </body>
</html>

然后，为元素添加样式，变成心形，代码如下：

.heart-shape{
    /* 基础样式 */
    position: relative;
    width: 100px;
    height: 100px;
    background-color: #ff1414;

    /* 旋转 */
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);  

}

/* before和after的基础样式*/
.heart-shape:before,.heart-shape:after{
    position: absolute;
    content: '';
    width: 100px;
    height: 100px;
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
    -o-border-radius: 50%;  
    border-radius: 50%; 
    background-color: #ff1414;

}

/* before的增强样式 */
.heart-shape:before{
    bottom: 0;
    left: -50px;
}

/* after的增强样式 */
.heart-shape:after{
    top: -50px;
    right: 0;
}

这里使用了：after和：before伪元素，创建了一个如下效果的心形：

这里写图片描述

然后使用@keyframs定义一个动画，代码如下：

/* 左心室动画 */
@keyframes heart-left
{
    0% {bottom: 0;left: -50%;}
    25% {bottom: 0;left: 50%;}
    50% {bottom: 0;left: 50%;}
    75% {bottom: 0;left: -50%;}

}

/* 右心室动画 */
@keyframes heart-right
{
    25%  {top: -50%;right: 0;}
    50%  {top: 50%;right: 0;}
    75%  {top: 50%;right: 0;}
    100%  {top: -50%;right: 0;}
}

/* Firefox */
@-moz-keyframes heart-left 
{

    0% {bottom: 0;left: -50%;}
    25% {bottom: 0;left: 50%;}
    50% {bottom: 0;left: 50%;}
    75% {bottom: 0;left: -50%;}
}

/* Safari 和 Chrome */
@-webkit-keyframes heart-left 
{
    0% {bottom: 0;left: -50%;}
    25% {bottom: 0;left: 50%;}
    50% {bottom: 0;left: 50%;}
    75% {bottom: 0;left: -50%;}
}

/* Opera */
@-o-keyframes heart-left 
{
    0% {bottom: 0;left: -50%;}
    25% {bottom: 0;left: 50%;}
    50% {bottom: 0;left: 50%;}
    75% {bottom: 0;left: -50%;}
}

/* 右边 */
@keyframes heart-right
{
    25%  {top: -50%;right: 0;}
    50%  {top: 50%;right: 0;}
    75%  {top: 50%;right: 0;}
    100%  {top: -50%;right: 0;}
}

/* Firefox */
@-moz-keyframes heart-right 
{
    25%  {top: -50%;right: 0;}
    50%  {top: 50%;right: 0;}
    75%  {top: 50%;right: 0;}
    100%  {top: -50%;right: 0;}
}

/* Safari 和 Chrome */
@-webkit-keyframes heart-right 
{
    25%  {top: -50%;right: 0;}
    50%  {top: 50%;right: 0;}
    75%  {top: 50%;right: 0;}
    100%  {top: -50%;right: 0;}
}

/* Opera */
@-o-keyframes heart-right 
{
    25%  {top: -50%;right: 0;}
    50%  {top: 50%;right: 0;}
    75%  {top: 50%;right: 0;}
    100%  {top: -50%;right: 0;}
}

错开时间改变心形左右两部分的位置就能够看起来是翻转效果。
最后使用animation属性分别引入动画，代码如下：

/* before的增强样式 */
.heart-shape:before{
    bottom: 0;
    left: -50px;

    /* 动画 */
    -webkit-animation: heart-left 6s;   /* Safari 和 Chrome */
    -moz-animation: heart-left 6s;  /* Firefox */
    -o-animation: heart-left 6s;    /* Opera */
    animation: heart-left 6s;

    /* 规定动画播放次数 infinite为无限循环*/
    -webkit-animation-iteration-count:infinite; /* Safari 和 Chrome */
    animation-iteration-count:infinite;

}

/* after的增强样式 */
.heart-shape:after{

    top: -50px;
    right: 0;

    /* 动画 */
    -moz-animation: heart-right 6s; /* Firefox */
    -webkit-animation: heart-right 6s;  /* Safari 和 Chrome */
    -o-animation: heart-right 6s;   /* Opera */
    animation: heart-right 6s;

    /* 规定动画播放次数 infinite为无限循环*/
    -webkit-animation-iteration-count:infinite; /* Safari 和 Chrome */
    animation-iteration-count:infinite;

}

这样就实现了心形的翻转动画。效果如下：

这里写图片描述

之后还加了一个JS点击事件，点击大心形的时候会变成随机个小心形分布：

var breakHeart = document.getElementsByClassName('heart-shape')[0];

var bgCanvas = document.getElementById('bgCanvas');

this.addEventListener('click',function(e){
    //随机数
    var randomNum = Math.round(Math.random()*50);

    for (var i =0;i < randomNum; i++) {
        //创建小心形
        var smallHeart = document.createElement('div');

        var rNum = Math.round(Math.random()*50);
        //添加类名
        smallHeart.className='small-heart';
        //插入到页面中
        bgCanvas.appendChild(smallHeart);
        //每次旋转不同角度
        smallHeart.style.transform ='rotate('+ rNum+'deg)';

        smallHeart.style.left = 160+2*rNum*9+'px';
        smallHeart.style.top = 100+rNum*i+'px';
    }

    breakHeart.style.display = 'none';

},false)

CSS代码：

.small-heart{

    /* 基础样式 */
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: #ff1414;

    /* 旋转 */
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);  


}

/* before和after的基础样式*/
.small-heart:before,.small-heart:after{
    position: absolute;
    content: '';
    width: 20px;
    height: 20px;
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
    -o-border-radius: 50%;  
    border-radius: 50%; 
    background-color: #ff1414;

}

/* before的增强样式 */
.small-heart:before{
    bottom: 0;
    left: -50%;
}

/* after的增强样式 */
.small-heart:after{
    top: -50%;
    right: 0;
}

点击之后的效果：

这里写图片描述

EeeEui
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
【爱心表白-----使用HTML+CSS+JS实现（效果+源代码）】
追光者♂：记录、分享、总结、提升，现象级专栏《Python从入门到人工智能》作者，无惧黑暗，坚信曙光
08-03 1950
效果 可以随着鼠标的移动，来改变转动方向哦！同时每次刷新，也会更新爱心的颜色~~ 源代码 index.html <!DOCTYPE html> <html lang="en"> <head> <title>three.js canvas - particles with shapes</title> <meta charset="utf-8"> <meta name="viewport" content="width=devic
HTML爱心旋转效果
09-30
HTML爱心旋转效果，自带3D效果，非常的适用，装逼必备的好利器
html爱心表白代码（最全）
热门推荐
皮小孩的博客
12-20 47万+
皮小孩的个人主页（8.1更新）需要本文前12个表白代码可以进链接扫码下载—>>>网页爱心表白代码大全扫码支付成功后会得到百度网盘链接和提取码，里面有本文的前12个表白代码，每个代码都有详细的使用说明，教你怎么修改文字、照片、背景音乐等。购买过程中有问题请及时联系qq1975728171.（比如：购买链接失效、购买后没有百度网盘链接、无法使用支付宝支付等等问题）对象生日快乐祝福代码—>>>html生日快乐代码和ta在一起100天纪念代码—>>>相爱xxx天纪念html代码。
html5酷炫的爱心love旋转效果
11-06
html5酷炫的爱心love旋转效果 html5酷炫的爱心love旋转效果
Css3动画效果，超简单的loveHeart，爱心特效，程序员表白必备
狼丶宇先森的网络科技空间
06-24 1万+
简简单单的随意一写. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Css3动画效果,彩色文字效果,超简单的loveHeart</title> <link rel="stylesh...
CSS3心形文字动画代码.zip
05-14
在CSS3中，我们可以使用`border-radius`属性来创建圆角，`rotate`函数配合`transform`属性来旋转元素，以构建出这种几何形状。 2. **CSS3选择器**： 为了精确地选择和操作HTML元素，CSS3引入了许多新的选择器，如...
CSS3心形文字动画特效代码
03-20
**CSS3心形文字动画特效代码详解** 在网页设计中，CSS3的引入极大地扩展了样式表语言的能力，其中就包括各种动态效果和动画。本篇文章将深入解析一个使用CSS3实现的心形文字动画特效，它能将文字转化为跳动的心形...
CSS3文字组合成心形动画特效
06-24
【CSS3文字组合成心形动画特效】是一种利用CSS3的强大功能来实现的创意效果，它将普通的文本转化为动态的心形展示，适用于各种浪漫场景，如表白、情人节等。这个特效通过精心设计的CSS样式和动画规则，使文本字符...
纯CSS3创意气泡动画特效.zip
最新发布
10-15
【标题】"纯CSS3创意气泡动画特效.zip"揭示了这个压缩包包含的资源是关于使用纯CSS3实现的一种创新、美观的气泡动画效果。CSS3是层叠样式表（Cascading Style Sheets）的第三版，它极大地扩展了CSS的功能，包括新的...
使用css制作心形图案并且添加动画心动效果
my466879168的博客
07-28 800
个人博客已经建好，欢迎各位前来访问 http://mengyang.info/ 纯css制作心形图案 首先制作一个正方形并且旋转45度 .heart{ position: absolute; margin: auto; top: 0; right: 0; bottom: 0; left: 0; background-color: pink; height: 50px; width: 50px; transform: rotate
CSS3制作跳动心形动画代码.zip
07-04
CSS3制作跳动心形动画代码，纯CSS3制作，爱心跳动动画，心形动态图。
HTML-3D旋转表白爱心
10-13
html-3D旋转表白爱心！适合向女神表白！可以直接修改，表白必备！
利用CSS实现爱心跳动案例--浪漫爱心表白
xu_yuxuyu的博客
11-29 4981
CSS实现爱心跳动原理：具体步骤： 先让大家看看心动的感觉吧： 不是吧，不是吧，如此浪漫的爱心表白竟然用CSS就可以完成。是的，你没有听错！接下来小编带大家制作爱心表白： 原理： 利用两个长方形的盒子，让其使用定位或浮动等属性改变其位置，在经过平移、旋转等变形效果后，再使用圆角属性，此时爱心的形状即可完成，然后再结合动画属性最终实现爱心跳动。 具体步骤： 首先我们准备一个大盒子包裹着，在大盒子里准备两个小盒子通过变形属性使其变成爱心； 2.通过定位或者浮动属性使两个盒子重叠在一起 因为两个盒子是
教大家用html/css简单写一个心形，表白必学
weixin_42385951的博客
09-13 6万+
1，建议大家使用Sublime编辑软件去编写，先给大家看个效果图 标题     二，教程开始，图像是由三个图像合成的，两个圆形，一个正方形，大部分用div布局完成的 1，首先建一个大的div 效果图   2，建一个圆形，首先画一个正方形，新建多一个div，css的width属性为260~270px吧，height为150px吧，然后再通过border-radius这个属性...
使用Ｈ５＋ＣＳＳ３实现心形
weshouldhelp的博客
08-24 4186
&lt;style&gt;         .heart{             width: 200px;             height: 300px;             margin: 100px auto;             position: relative;         }         .heart::before,.heart::after{      ...
3d旋转爱心
weixin_30767835的博客
09-06 379
今天做有意思的3d旋转爱心，借此来复习一下css中的相关内容，先上一张成品照片 中间是一个正方体，你可以将正方体的各个面上加上照片 要做这个3d旋转爱心，首先要解决的就是如何画出外边的线条，这里用到了css中的border-radius，我们都知道border-radius是用来设置四个角的，写过border的人都知道border可以带四个参数分别设置四个边框（上左下右的顺序），同样的，b...
抖音上很火的3D立体动态相册实现代码!
jdk_wangtaida的博客
11-26 10万+
前言： 圣诞节快到了，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！先上效果图，来引起下你们的兴趣。 正文： 一、新建一个index.html的文件，代码如下 <!DOCTYPE html> <html lang="en"> <head> <m...
情人节-代码实现-3D心型相册
weixin_44867717的博客
02-15 1549
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; marg...
纯CSS制作心形加载动画
weixin_47664795的博客
11-25 1045
效果图： 首先在body中建“love”类，以列表形式表示加载条 <div id="love"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li>
HTML5制作3D爱心动画教程 献给女友浪漫的礼物_.docx
12-05
在这个特殊的教程中，我们将学习如何利用这两种技术来创建一个立体的、动态的心形动画，以此展示程序员的创意与浪漫。 HTML5是超文本标记语言的最新版本，它引入了许多新特性，如语义化标签、离线存储、音频和视频...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值