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的appearance属性改变任何元素的浏览器默认风格
Dec 24 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
CSS3中媒体查询结合rem布局适配手机屏幕
Jun 10 HTML / CSS
css3 flex实现div内容水平垂直居中的几种方法
Mar 27 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
html5声频audio和视频video等新特性详细说明
Dec 26 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 HTML / CSS
详解通过focusout事件解决IOS键盘收起时界面不归位的问题
Jul 18 HTML / CSS
HTML+CSS+JavaScript实现图片3D展览的示例代码
Oct 12 HTML / CSS
HTML中link标签属性的具体用法
May 07 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&amp;MYSQL留言板源码
2020/07/19 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
thinkPHP利用ajax异步上传图片并显示、删除的示例
2018/09/26 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
js 3秒后跳转页面的实现代码
2014/03/10 Javascript
js 实现的可折叠留言板(附源码下载)
2014/07/01 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
js仿黑客帝国字母掉落效果代码分享
2020/11/08 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
vue axios请求超时的正确处理方法
2018/04/02 Javascript
JSON生成Form表单的方法示例
2018/11/21 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
2019/09/26 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
深入了解Vue3模板编译原理
2020/11/19 Vue.js
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python中的super用法详解
2015/05/28 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
python 对key为时间的dict排序方法
2018/10/17 Python
使用Python获取爱奇艺电视剧弹幕数据的示例代码
2021/01/12 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
海滩咖啡馆:Beach Cafe
2018/02/02 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
美国最大的户外装备和服装购物网站:Backcountry
2019/10/15 全球购物
程序集与命名空间有什么不同
2014/07/25 面试题
室内设计自我鉴定
2013/10/15 职场文书
中文系学生自荐信范文
2013/11/13 职场文书
小学生思想品德评语
2014/12/31 职场文书
公司聚餐通知
2015/04/22 职场文书
Python中zipfile压缩包模块的使用
2021/05/14 Python
MySQL使用IF语句及用case语句对条件并结果进行判断 
2022/09/23 MySQL