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 相关文章推荐
定义css设备类型-Media Queries图表简介及使用方法
Jan 21 HTML / CSS
CSS3网格的三个新特性详解
Apr 04 HTML / CSS
浅析与CSS3的loading动画加载相关的transition优化
May 18 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
Jan 06 HTML / CSS
html5 application cache遇到的严重问题
Dec 26 HTML / CSS
HTML5 语音搜索只需一句代码
Jan 03 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
html5文字阴影效果text-shadow使用示例
Jul 25 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 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/01/18 PHP
在PHP中养成7个面向对象的好习惯
2010/01/28 PHP
PHP学习之数组值的操作
2011/04/17 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
php常用字符函数实例小结
2016/12/29 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
javascript 表单验证常见正则
2009/09/28 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
浅谈js中字符和数组一些基本算法题
2016/08/15 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
2020/04/18 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
javascript阻止事件冒泡和浏览器的默认行为
2017/01/21 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
使用angular帮你实现拖拽的示例
2017/07/05 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue 设置proxyTable参数进行代理跨域
2018/04/09 Javascript
nodejs 十六进制字符串型数据与btye型数据相互转换
2018/07/30 NodeJs
vuejs简单验证码功能完整示例
2019/01/08 Javascript
layer提示框添加多个按钮选择的实例
2019/09/12 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[56:46]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VP vs Effect
2018/04/01 DOTA
python使用KNN算法手写体识别
2018/02/01 Python
python对常见数据类型的遍历解析
2019/08/27 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
《赵州桥》教学反思
2014/02/17 职场文书
先进个人材料怎么写
2014/12/30 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python
Java8中Stream的一些神操作
2021/11/02 Java/Android