html5 心跳效果,css3实现心脏跳动

源码如下:

Title

margin: 0;

padding: 0;

}

body{

width: 100vw;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

background: #34495e;

}

.heart{

width: 200px;

height: 200px;

background: red;

transform: rotate(45deg) scale(.5);

animation-name: hd;

animation-duration: 2s;

animation-iteration-count: infinite;

}

.heart::before{

content: "";

width: 200px;

height: 200px;

border-radius: 50%;

position: absolute;

background: red;

transform: translateX(-100px);

}

.heart::after{

content: "";

width: 200px;

height: 200px;

border-radius: 50%;

position: absolute;

background: red;

transform: translateY(-100px);

}

@keyframes hd {

25%{

transform: rotate(45deg) scale(1);

}

50%{

transform: rotate(45deg) scale(.5);

}

75%{

transform: rotate(45deg) scale(1);

}

to{

transform: rotate(45deg) scale(.5);

}

标签：css3,scale,心脏,45deg,transform,width,跳动,rotate,200px

来源： https://www.cnblogs.com/y-y-y-y/p/12205445.html

html5 心跳效果,css3实现心脏跳动相关推荐

html5 漫画效果,CSS3和js打造四格漫画风格的LightBox特效
在这篇文章中我们想制作一个很有意思四格漫画风格的Lightbox特效.以前在报纸上可以看到很多的四格漫画,我们做的这个特效类似于这个风格,一个大方框中包含4格等宽等高的图片,当点击任意图片的时候,该图 ...
html5 翻牌效果,css3实现图片翻牌特效
复制代码代码如下: css3 翻牌 *{ margin:0; padding:0;} ul,li{ list-style:none; margin:0; padding:0;} .brandsSho ...
html5 翻牌效果,css3实现翻牌效果
body,div{margin:0;padding:0;background:teal;} .flip_wrap{ display: inline-block; width:300px; height ...
纯html css动画效果,8个超震撼的HTML5和纯CSS3动画源码
本文作者html5tricks,转载请注明出处 1.HTML5 Canvas水波纹动画特效 HTML5的Canvas特性非常实用,我们不仅可以在Canvas画布上绘制各种图形,也可以制作绚丽的动画,比 ...
8个超震撼的HTML5和纯CSS3动画源码
HTML5和CSS3之所以强大,不仅因为现在大量的浏览器的支持,更是因为它们已经越来越能满足现代开发的需要.Flash在几年之后肯定会消亡,那么HTML5和CSS3将会替代Flash.今天我们要给大家 ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
css3抽奖转盘html5,HTML5抽奖转盘-CSS3超简单版本
网上有很多关于抽奖转盘的代码和实例,有使用JavaScript控制动画的,有使用Canvas实现的,它们思路各不相同,本文将介绍一种采用CSS3的方式来实现转盘动画效果,非常简单,只需几行代码即可实现 ...
html5粒子效果,8款惊艳的HTML5粒子动画特效
[导读] HTML5确实强大,很多时候我们可以利用HTML5中的新技术实现非常炫酷的粒子动画效果,粒子动画在HTML5应用中也是比较消耗本地资源的,尤其是CPU,但是有些HTML5粒子效果确实能给用户 ...
html网站点击特效,HTML5 svg和CSS3炫酷鼠标点击按钮特效
这是一组效果非常炫酷的HTML5 svg和CSS3鼠标点击按钮特效.这组鼠标点击特效共有22种效果,大多数是在伪元素上使用CSS3 animations来制作动画效果.非常适合于移动手机APP上的按钮 ...

html5 心跳效果,css3实现心脏跳动

html5 心跳效果,css3实现心脏跳动相关推荐

最新文章

热门文章