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 相关文章推荐
学做Bootstrap的第一个页面
May 15 HTML / CSS
浅谈CSS3中的变形功能-transform功能
Dec 27 HTML / CSS
HTML5网页音乐播放器的示例代码
Nov 09 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5中的音频和视频媒体播放元素小结
Jan 29 HTML / CSS
深入浅析HTML5中的article和section的区别
May 15 HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 HTML / CSS
基于html5 canvas做批改作业的小插件
May 20 HTML / CSS
html+css实现环绕倒影加载特效
Jul 07 HTML / CSS
html网页引入svg图片的4种方式
Aug 05 HTML / CSS
使用 CSS 构建强大且酷炫的粒子动画效果
Aug 14 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的memory_limit限制的方法分享
2012/02/21 PHP
php读取excel文件的简单实例
2013/08/26 PHP
Laravel 5.3 学习笔记之 错误&amp;日志
2016/08/28 PHP
addRule在firefox下的兼容写法
2006/11/30 Javascript
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
Javascript中Eval函数的使用
2010/03/23 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
2010/06/23 Javascript
js 使用form表单select类实现级联菜单效果
2012/12/19 Javascript
javascript学习(一)构建自己的JS库
2013/01/02 Javascript
JS小功能(offsetLeft实现图片滚动效果)实例代码
2013/11/28 Javascript
基于 Docker 开发 NodeJS 应用
2014/07/30 NodeJs
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
移动web开发之touch事件实例详解
2018/01/17 Javascript
详解node字体压缩插件font-spider的用法
2018/09/28 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
2019/01/15 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
jQuery实现带进度条的轮播图
2020/09/13 jQuery
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
Python实现将不规范的英文名字首字母大写
2016/11/15 Python
Python的mysql数据库的更新如何实现
2017/07/31 Python
python smtplib发送带附件邮件小程序
2018/05/22 Python
使用Python来开发微信功能
2018/06/13 Python
Python学习笔记之While循环用法分析
2019/08/14 Python
Python 实现opencv所使用的图片格式与 base64 转换
2020/01/09 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
Django中日期时间型字段进行年月日时分秒分组统计
2020/11/27 Python
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
教师节商场活动方案
2014/02/13 职场文书
2014年国庆节寄语
2014/09/19 职场文书
个人融资协议书
2014/10/02 职场文书
个人总结格式范文
2015/03/09 职场文书
淮海战役观后感
2015/06/11 职场文书
2016年“12.3”国际残疾人日活动总结
2016/04/01 职场文书
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS