HTML+CSS3模拟心的跳动实例代码


Posted in HTML / CSS onSeptember 05, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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 / CSS 相关文章推荐
带有css3动画效果的兼容多浏览器简单导航条示例
Jan 26 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3 rgb and rgba(透明色)的使用详解
Sep 25 HTML / CSS
CSS3 实现的缩略图悬停效果
Dec 09 HTML / CSS
HTML5边玩边学(3)像素和颜色
Sep 21 HTML / CSS
突袭HTML5之Javascript API扩展5—其他扩展(应用缓存/服务端消息/桌面通知)
Jan 31 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
html5手机端页面可以向右滑动导致样式受影响的问题
Jun 20 HTML / CSS
微信小程序之html5 canvas绘图并保存到系统相册
Jun 20 HTML / CSS
HTML5中的网络存储实现方式
Apr 28 HTML / CSS
AmazeUI折叠式卡片布局,整合内容列表、表格组件实现
Aug 20 HTML / CSS
详解css3 Transition属性(平滑过渡菜单栏案例)
Sep 05 #HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 #HTML / CSS
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
Aug 18 #HTML / CSS
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
Aug 15 #HTML / CSS
浅谈CSS3中display属性的Flex布局的方法
Aug 14 #HTML / CSS
CSS3实现伪类hover离开时平滑过渡效果示例
Aug 10 #HTML / CSS
使用CSS3来代替JS实现交互
Aug 10 #HTML / CSS
You might like
phpmyadmin中配置文件现在需要绝密的短语密码的解决方法
2007/02/11 PHP
thinkphp实现数组分页示例
2014/04/13 PHP
php使用curl简单抓取远程url的方法
2015/03/13 PHP
php项目中百度 UEditor 简单安装调试和调用
2015/07/15 PHP
php操作路径的经典方法(必看篇)
2016/10/04 PHP
javascript中删除指定数组中指定的元素的代码
2011/02/12 Javascript
模拟多级复选框效果的jquery代码
2013/08/13 Javascript
Js操作树节点自动折叠展开的几种方法
2014/05/05 Javascript
jQuery+CSS3折叠卡片式下拉列表框实现效果
2015/11/02 Javascript
JS修改地址栏参数实例代码
2016/06/14 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
vue canvas绘制矩形并解决由clearRec带来的闪屏问题
2019/09/02 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
Python实现遍历windows所有窗口并输出窗口标题的方法
2015/03/13 Python
python探索之BaseHTTPServer-实现Web服务器介绍
2017/10/28 Python
python3实现windows下同名进程监控
2018/06/21 Python
利用Python如何生成便签图片详解
2018/07/09 Python
Python3匿名函数用法示例
2018/07/25 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
500行代码使用python写个微信小游戏飞机大战游戏
2019/10/16 Python
pygame库实现俄罗斯方块小游戏
2019/10/29 Python
基于Django实现日志记录报错信息
2019/12/17 Python
pycharm 多行批量缩进和反向缩进快捷键介绍
2021/01/15 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
在C++ 程序中调用被C 编译器编译后的函数,为什么要加extern "C"
2014/08/09 面试题
教师三严三实学习心得体会
2014/10/11 职场文书
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2015年反洗钱工作总结
2015/04/25 职场文书
MySQL中使用or、in与union all在查询命令下的效率对比
2021/05/26 MySQL
拒绝盗图!教你怎么用python给图片加水印
2021/06/04 Python
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python