使用transform属性和animation属性制作跳动的心
transform属性允许我们对元素进行旋转、缩放、移动和倾斜；
animation属性允许我们对元素实现一些动画效果；
跳动的心源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>跳动的心</title>
<style>
*{
margin: 0;
padding: 0;
}
.contain{
width: 100%;
height: 100%;
position: fixed; /*固定定位相对于浏览器窗口*/
background-color: white;
animation-name: contain;
animation-duration: 1s;
animation-iteration-count: infinite; /*动画次数*/
}
.heart{
width: 50px;
height: 50px;
background-color:pink;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
transform: rotate(-45deg);
animation-name: beat;
animation-duration: 1s;
animation-iteration-count: infinite;
}
.heart:before{
background-color: pink;
content: "";
border-radius: 50%;
width: 50px;
height: 50px;
position: absolute;
top:-25px;
left: 0;
} .heart:after{
background-color: pink;
content: "";
border-radius: 50%;
width:50px;
height: 50px;
position: absolute;
top: 0 ;
left: 25px;
} @keyframes contain {
50%{
background-color: #ffe6f2;
}
} @keyframes beat{
0%{
transform: scale(1) rotate(-45deg);
}
50%{
transform: scale(0.6) rotate(-45deg);
}
}
</style>
</head>
<body>
<div class="contain">
<div class="heart"> </div>
</div>
</body>
</html>
以上代码使用了两个动画：背景图的颜色变化、桃心的大小变化；
关于.heart的伪类：
1.top和left值的变化 （该数值与原heart的大小的联系）
使用transform属性和animation属性制作跳动的心的更多相关文章
- 纯CSS制作“跳动的心”demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- CSS Transform / Transition / Animation 属性的区别
back21 Jun 2011 Category: tech Tags: css 最近想UI的动画转到css3能吃进3d加速的属性上面来以加强动画的连贯性.只是对于css几个新加的属性不太熟悉,常常容 ...
- CSS3 Transform、Transition和Animation属性总结
CSS3的三个与变形和动画啊相关的属性: Transform 浏览器支持情况: Internet Explorer 10.Firefox.Opera 支持 transform 属性. Internet ...
- CSS3学习之 animation 属性
发现animation这个新属性很有趣,在此学习,并整理下! 浏览器支持: Internet Explorer 10.Firefox 以及 Opera 支持 animation 属性: Safari ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- CSS3 animation属性中的steps实现GIF动图(逐帧动画)
相信 animation 大家都用过很多,知道是 CSS3做动画用的.而我自己就只会在 X/Y轴 上做位移旋转,使用 animation-timing-function 规定动画的速度曲线,常用到的 ...
- CSS3之animation属性
CSS中的animation属性可用于为许多其他CSS属性设置动画,例如颜色,背景色,高度或宽度. 每个动画都需要使用@keyframes这种at-rule语句定义,然后使用animation属性来调 ...
- CSS3动画属性之Animation
首先定义一个动画规则: @keyframes mymove { from {top:0px;} to {top:200px;} } @-moz-keyframes mymove /* Firefox ...
- Android动画总结#补间动画(Tween Animation/View Animation) #帧动画(Frame Animation/Drawable Animation)#属性动画(PropertyAnimation)
1.共有三种动画,英文名字多种叫法如下 第一种动画:补间动画(Tween Animation/View Animation) 四个:RotateAnimation旋转. AlphaAnimation透 ...
随机推荐
- 统计网络time_wait连接状态及tcpip连接数
netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' LAST_ACK 1 SYN_RECV 14 ESTABLIS ...
- win7配置flutter报错 运行flutter doctor报错及解决方法
先按照官方文档进行配置 win10下按照flutter官方文档进行部署flutter 基本没有任何问题 win7情况下 按照官方文档操作后 前面也都可以正常进行 直到 win7下运行flutter d ...
- cygwin执行.py提示找不到模块，但已经安装模块的解决办法
. 在解决了cygwin中make命令不能使用的问题之后(https://www.cnblogs.com/zhenggege/p/10724122.html),make maskrcnn路径下的set ...
- Android 使用date set命令修改系统时间
测试环境:android 7.1.1 在adb shell中试图使用 date -s "yyyymmdd.[[[hh]mm]ss]"修改系统系统时间时,会提示 date: Unkn ...
- Cortex-M3 R0~R15寄存器组 & 特殊功能寄存器组
[R0~R15寄存器组] Cortex-M3处理器拥有R0~R15的寄存器组,如: [R0~R12通用寄存器]R0~R12都是32位通用寄存器,用于数据操作.其中: R0~R7为低组寄存器,所有的指令 ...
- Badge 标记
出现在按钮.图标旁的数字或状态标记. 基础用法 展示新消息数量. 定义value属性,它接受Number或者String. <el-badge :value="12" cla ...
- tensorflow实现线性回归、以及模型保存与加载
内容:包含tensorflow变量作用域.tensorboard收集.模型保存与加载.自定义命令行参数 1.知识点 """ 1.训练过程: 1.准备好特征和目标值 2.建 ...
- springboot2.0数据制作为excel表格
注意:由于公司需要大量导出数据成excel表格,因此在网上找了方法,亲测有效. 声明:该博客参考于https://blog.csdn.net/long530439142/article/details ...
- 阶段3 3.SpringMVC·_04.SpringMVC返回值类型及响应数据类型_8 响应json数据之响应json格式数据
springMvc的框架已经帮我们做好了.发过来的数据转换为javaBean对象 发过来的键值的形式,如果属性和javaBean对应的话,可以直接封装到对象中. key做额外的转换的时候,需要另外的j ...
- Web jsp开发学习——dbcp jsp连接MySQL出现中文乱码解决
开发过程中,通过dbcp.properties连接MySQL数据库,向数据库中插入中文字符时,出现乱码情况. 通过查阅资料,发现出现乱码的原因:MySQL数据库使用的是UTF-8编码,而dbcp.pr ...