html css3模拟心的跳动

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>模拟心的跳动</title>
</head>
<style type="text/css">* {margin: 0;padding: 0;
}
body {background-color: #D4CECE;
}
.big {width: 200px;height: 200px;margin: 0 auto;position: relative;animation: heartAnimation 0.7s linear 0s infinite;
}
.big #heart {margin: 5px 0;width: 100%;height: 100%;background-color: #FF0606;position: absolute;
}
.left,.right {border-radius: 100px 100px 0 0;  /*左上 右上 右下 左下*/box-shadow: 0px 0px 20px #FD0707;
}
.bottom {box-shadow: 0px 0px 20px #FD0707;
}
.left {transform: translate(-50px,150px) rotate(-45deg);  /*translate()位移 rotate() 旋转角度*/
}
.right {transform: translate(50px,150px) rotate(45deg);
}
.bottom {transform: translate(0,214px) rotate(45deg) scale(.9,.9)  /*scale:定义 2D 缩放转换。*/}
/*动画效果*/
@keyframes heartAnimation{form {transform: scale(0.9,0.9);}to {transform: scale(1.1,1.1);}
}
</style>
<body><div class="big"><div id="heart" class="left"></div><div id="heart" class="right"></div><div id="heart" class="bottom"></div></div>
</body>
</html>

html css3模拟心的跳动相关推荐

怎样用html制作动态心,利用html+css3制作心的跳动动画
模拟心的跳动
CSS3模拟IOS滑动开关
前言 H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释效果代码 <!DOCTYPE html> <html lang=" ...
Python+matplotlib绘制散点图模拟心型图案
推荐教材: <Python数据分析.挖掘与可视化>(慕课版)(ISBN:978-7-115-52361-7),董付国,人民邮电出版社,定价49.8元,2020年1月出版,2021年3月第6 ...
Css3模拟彩色灯光
Css3模拟彩色灯光开发工具与关键技术:DW前端作者:盘子撰写时间:2019年2月18日下面来分享下一个简单而又好看的彩色灯光样式,源代码部分,见如下截图: 源代码部分所敲的代码很简洁,从此处 ...
【键盘】jQuery+CSS3模拟键盘事件（精）
jQuery+CSS3模拟键盘事件是一款基于jQuery的模拟键盘事件的应用,键盘上除了功能键,其他键都可以用这款插件来模拟.当你敲击键盘上的键时,这款应用会帮助你获取到这个键的事件,并在页面上的模拟 ...
HTML5+CSS3模拟实现《亮剑》平安县城一役精彩微信群聊-谁开的炮？
转眼从2005年到现在,<亮剑>已经播出多年,但热度依然不减,而且每次重温我都会看出不一样的意蕴,今天,我就用HTML5+CSS3模拟实现<亮剑>平安县城一役精彩微信群聊-谁开 ...
随心音乐，让心跟着跳动起来！
Yuan-SxMusic 项目地址:jsyjst/Yuan-SxMusic 简介: 随心音乐,让心跟着跳动起来! 更多:作者提 Bug 标签: 随心音乐,是一款基于 MVP+Retrofit+E ...
html5模拟点击事件,css3模拟jq点击事件的实例代码
今天是一个css3模拟jq点击事件,因为我发现,css3中没有类似于,js的点击事件,那么,可不可以仿照jq的效果,类似的做一个呢?主要用到,input里面的radio 单选按钮,然后后面跟一个a标签 ...
JavaScript css3模拟简单的视频弹幕功能
最近相对比较空闲,想写一些东西写着玩.就尝试写了一个demo模拟了最简单的视频弹幕功能~~. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用 ...

html css3模拟心的跳动

html css3模拟心的跳动相关推荐

最新文章

热门文章