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动画animation实现云彩向左滚动
May 09 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
HTML5添加鼠标悬浮音响效果不使用FLASH
Apr 23 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
html5自定义video标签的海报与播放按钮功能
Dec 04 HTML / CSS
HTML5自定义视频播放器源码
Jan 06 HTML / CSS
CSS控制继承中的height能变为可继承吗
Jun 10 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
多文件上载系统完整版
2006/10/09 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
ThinkPHP5&amp;5.1框架关联模型分页操作示例
2019/08/03 PHP
轻轻松松学JS调试(不下载任何工具)
2010/04/14 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
window.opener用法和用途实例介绍
2013/08/19 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
vue项目中做编辑功能传递数据时遇到问题的解决方法
2016/12/19 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
2017/04/13 Javascript
微信小程序自定义导航隐藏和显示功能
2017/06/13 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
使用淘宝镜像cnpm安装Vue.js的图文教程
2018/05/17 Javascript
vue router 源码概览案例分析
2018/10/09 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
Javascript实现鼠标移入方向感知
2020/06/24 Javascript
Python走楼梯问题解决方法示例
2018/07/25 Python
如何实现Django Rest framework版本控制
2019/07/25 Python
python使用sklearn实现决策树的方法示例
2019/09/12 Python
python类中super() 的使用解析
2019/12/19 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
Python装饰器结合递归原理解析
2020/07/02 Python
Django框架请求生命周期实现原理
2020/11/13 Python
python statsmodel的使用
2020/12/21 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
高中毕业生自我鉴定范文
2013/09/26 职场文书
优秀经理事迹材料
2014/02/01 职场文书
最新奶茶店创业计划书范文
2014/02/08 职场文书
档案室主任岗位职责
2014/02/12 职场文书
2014元旦晚会策划方案
2014/02/19 职场文书
学习朴航瑛老师爱岗敬业先进事迹思想汇报
2014/09/17 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书