2-9 CSS动画案例：跳动的心

1.分析:
一个心的构成由：两个圆和一个旋转45°的正方形构成
具体的移动方法构成方法没有绝对，只要有足够的想象力，能够做出来就可以。

<body><div id="heart"><div class="left"></div><div class="right"></div><div class="bottom"></div></div>

*{margin:2; padding:0; box-sizing: border-box;}#heart{margin:100px;/*移动heart的位置*/position: relative;/*absolute的定位基准，好调整圆的位置*/display: inline-block;/*heart大小为完全包含内部元素大小*/transition: all .5s;/*加一个过度，0.5可以直接缩写成.5*/
}#heart:hover{transform: scale(1.5);/*鼠标浮上去放大1.5倍*/
}#heart>.bottom{/*正方形*/width: 50px;height: 50px;transform: rotate(45deg);/*正方形旋转45度*/background: red;
}#heart>.left{/*圆*/width: 50px;height: 50px;position: absolute;bottom: 100%;right:100%;/*将圆调整到左上角的位置*/transform:rotate(45deg) translateX(41px);/*将左上角的方形旋转再往右下角移动，具体移动数值自己不断尝试调整，直到完全贴合*/border-radius:50% 0 0 50%;/*平时变成圆可以简写成一个50%，此时调整两个角就一个一个试*/background: red;
}#heart>.right{/*圆*/width: 50px;height: 50px;position: absolute;bottom: 100%;left: 100%;/*将圆调整到左上角的位置*/transform:rotate(45deg) translateY(41px);border-radius:50% 50% 0 0;background: red;
}

图解：

调整圆移动的位置，translate的数值即可

2-9 CSS动画案例：跳动的心相关推荐

12个优美的CSS动画案例
大家好,我是前端实验室的大师兄! 对于网页设计师和开发工程师而言,创建一款极具趣味性和实用性的CSS网页动画,能让网站美观不少 CSS动画,就是通过CSS代码搭建网页动画.允许设计师和开发人员,通过编 ...
CSS动画实现跳动小红心
如何利用CSS简单实现一个跳动的小红心呢? 请看下文,简要分为三个步骤: 1.首先定义3个div. 2.调整div的距离和形状. 3.增加阴影和实现动画功能. <!DOCTYPE html> ...
css动画实现跳动的小人
跳动的小女孩图片原尺寸为1260x300,小女孩在某时刻的宽度为180px,同一时刻其他位置的小女孩隐藏. 使用动画设置运动方式,每次显示一个位置的宽度 <!DOCTYPE html> ...
【疯狂世界杯】css 动画实现跳动的足球
使用css制作跳动的心
利用css动画制作跳动的心代码如下: <!DOCTYPE html> <html lang="en"><head><meta chars ...
用CSS3咋写“跳动的心”？
CSS3写跳动的心需要哪些样式(属性)? 1.动画样式: 触发式动画:①触发条件: :hover :checked :active②动画的参数: transition-duration:5s;--时间 ...
CSS 动画指南：原理和实战
简介:无论动画以何种技术载体呈现,无论是传统的手绘动画,还是电脑生成的3D动画,也无论是用Flash还是CSS, 动画的基本原理和设计准则都未曾变过的. 在这篇文章中,我们会先解释CSS动画的基本概念 ...
CSS 动画指南：原理和实战（二）
简介:无论动画以何种技术载体呈现,无论是传统的手绘动画,还是电脑生成的3D动画,也无论是用Flash还是CSS, 动画的基本原理和设计准则都未曾变过的. 在这篇文章中,我们会先解释CSS动画的基本概念 ...
css3动画案例，滤镜的各个使用比较
css动画案例,用案例看出其用法动画复合写法案例,制作音乐盒滤镜滤镜阴影与盒子阴影的对比. 动画动画通过@keyframs定义动画. 在指定元素中,通过animation属性来调用动画. ...

2-9 CSS动画案例：跳动的心

2-9 CSS动画案例：跳动的心相关推荐

最新文章

热门文章