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 按钮样式简单可扩展创建
Mar 18 HTML / CSS
css3中background新增的4个新的相关属性用法介绍
Sep 26 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
解决CSS3 transition-delay 属性默认值0不带单位失效的问题
Oct 29 HTML / CSS
CSS3贝塞尔曲线示例:创建链接悬停动画效果
Nov 19 HTML / CSS
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
Jan 09 HTML / CSS
HTML5对比HTML4的主要改变和改进总结
May 27 HTML / CSS
HTML最新标准HTML5总结(必看)
Jun 13 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
Jul 28 HTML / CSS
用CSS3画一个爱心
Apr 27 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 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
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
随窗体滑动的小插件sticky源码
2013/06/21 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jQuery插件支持同一页面被多次调用
2016/02/14 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
Bootstrap实现带暂停功能的轮播组件(推荐)
2016/11/25 Javascript
JS填写银行卡号每隔4位数字加一个空格
2016/12/19 Javascript
原生javascript移动端滑动banner效果
2017/03/10 Javascript
浅谈JS封闭函数、闭包、内置对象
2017/07/18 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
Python 实现引用其他.py文件中的类和类的方法
2018/04/29 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
对Python _取log的几种方式小结
2019/07/25 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
python中np是做什么的
2020/07/21 Python
关于python scrapy中添加cookie踩坑记录
2020/11/17 Python
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
BRASTY捷克:购买香水、化妆品、手袋和手表
2017/07/12 全球购物
PHP面试题集
2016/12/18 面试题
管理学专业个人求职信范文
2013/12/13 职场文书
我的大学生活职业生涯规划
2014/01/02 职场文书
优秀应届生求职信
2014/06/16 职场文书
机械机修工岗位职责
2014/08/03 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
Java基础之详解HashSet的使用方法
2021/06/30 Java/Android
git中cherry-pick命令的使用教程
2022/06/25 Servers