使用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透 ...
随机推荐
- linux常用20条命令
1.cd命令 这是一个非常基本,也是大家经常需要使用的命令,它用于切换当前目录,它的参数是要切换到的目录的路径,可以是绝对路径,也可以是相对路径.如: cd /root/Docements # 切换到 ...
- 控制类名（className属性）
className 属性设置或返回元素的class 属性. 语法: object.className = classname 作用: 1.获取元素的class 属性 2. 为网页内的某个元素指定一个c ...
- SolrCloud配置
一.简介 Apache Solr是基于Lucene的全文搜索引擎.如何让Solr具有容错性和高可用性,SolrCloud可以帮助我们搭建集群,提供分布式索引,以及自动备份.SolrCloud是Solr ...
- 在WPF中使用AForge控件
AForge.NET 是用C#写的一个关于计算机视觉和人工智能领域的框架,它包括图像处理.神经网络.遗传算法和机器学习等. 要实现视频功能,需要使用AForge.Controls命名空间中的Video ...
- 本地oracle可以通过localhost连接,无法通过ip地址连接解决方法，oracle远程连接配置
Oracle11g安装后只有本地可以连接,远程无法连接,而且本地只能配置成localhost配置成IP地址也无法连接. 这是因为安装oracle的时候没有配置远程的监听,默认的监听是localhost ...
- [转]synchronized的锁机制
参考文章:https://blog.csdn.net/lang_programmer/article/details/72722751 synchronized是否是可重入锁 https:// ...
- 多线程分配线程的实现方案：CountDownLatch类
需求:假如我们本地有4个文件需要解析,每个文件的内容为20万行.为了提高效率我们要创建4个线程进行处理.等4个线程处理完,要在文件日志表中记录处理状态. 一般的的解决方法是使用join,join用于让 ...
- 【React自制全家桶】八、React动画以及react-transition-group动画库的使用
React动画通常有三种方法实现从易到难为: 1.transition(CSS3自带) 2.animation(CSS3自带) 3.react-transition-group动画库(需要引入插件) ...
- View的事件机制
为了更好的研究View的事件转发,我们自定以一个MyButton继承Button,然后把跟事件传播有关的方法进行复写,然后添加上日志. import android.content.Context; ...
- ListView中用鼠标拖动各项上下移动的问题。(100分)
在OnDragDrop事件中處理:以下是delphi的例子 procedure TForm1.ListBox1DragOver(Sender, Source: TObject; X, Y: Integ ...