纯CSS创建心形翻转动画

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

<!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;
}

点击之后的效果：

纯CSS创建心形翻转动画相关推荐

心形源码HTML,纯CSS实现心形加载动画（附源码）
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...
怎么用css画一个心形_如何用CSS创建心形
CSS3增强了我们仅使用HTML和CSS就能在网站上构建内容的可行性. 您可以找到我们以前精选的出色示例 . 但是,不要让自己过分领先,复杂的设计将需要可能使您头疼的代码. 取而代之的是,我们将创建一 ...
如何使用纯 CSS 创建翻牌动画
下面的示例向您展示了如何使用纯 CSS 创建翻牌动画. 作者:坚果公众号:"大前端之旅" 华为云享专家,InfoQ签约作者,阿里云专家博主,51CTO博客首席体验官,开源项目GV ...
html 数据交互动画,纯css实现可交互的动画
如题,不借助JavaScript,只利用CSS,如何实现可交互式的动画呢?或许该需求仅此一种解决方案,绝无仅有.不知该方案是否是第一次找到. 什么是可交互动画? 就是可以响应用户的动画,直接上图吧,更 ...
html怎么做一个心形边框,使用CSS获取心形边框？
我有这样的代码,用于创建一个彩色心脏(其中有一个蓝色的背景),并使用CSS消色心脏(白色与蓝色边框有色):使用CSS获取心形边框? #favourite_user { position: relati ...
纯CSS制作加div制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
纯css绘制齿轮加载动画
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录前言一.效果图二.步骤 1.html部分 2.css部分前言纯css绘制齿轮加载动画. 无需使用任何图片及素材. 提示: ...
HTML+CSS实现心形效果
html+css实现心形一.正方形+圆形二.矩形一.正方形+圆形效果: 代码: 解析: 设置一个正方向和两个圆形,圆形直径与正方形宽度相等(使用:before/:after) 将两个圆形分别向 ...
iOS 直播心形点赞动画
iOS 直播心形点赞动画 https://github.com/KKKiller/KKHeartFlyAnimation

纯CSS创建心形翻转动画

纯CSS创建心形翻转动画相关推荐

最新文章

热门文章