纯CSS制作“跳动的心”demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Red Heart</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #ffa5a5;
background: linear-gradient(to bottom, #ffa5a5 0%,#ffd3d3 100%);
}
.chest {
width: 500px;
height: 500px;
margin: 0 auto;
position: relative;
}
.heart {
position: absolute;
z-index: 2;
background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%);
animation: beat 0.7s ease 0s infinite normal;
}
.heart.center {
background: linear-gradient(-45deg, #B80734 0%, #d5093c 40%);
}
.heart.top {
z-index: 3;
}
.side {
top: 100px;
width: 220px;
height: 220px;
border-radius: 220px;
}
.center {
width: 210px;
height: 210px;
bottom: 100px;
left: 145px;
/*transform: rotate(45deg);*/
}
.left {
left: 62px;
}
.right {
right: 62px;
}
@keyframes beat {
0% {
transform: scale(1) rotate(225deg);
box-shadow:0 0 40px #d5093c;
}
50% {
transform: scale(1.1) rotate(225deg);
box-shadow:0 0 70px #d5093c;
}
100% {
transform: scale(1) rotate(225deg);
box-shadow:0 0 40px #d5093c;
}
}
</style>
</head>
<body>
<div class="chest">
<div class="heart left side top"></div>
<div class="heart center"></div>
<div class="heart right side"></div>
</div>
</body>
</html>
纯CSS制作“跳动的心”demo的更多相关文章
- 纯CSS制作水平垂直居中“十字架”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- CSS 魔法系列:纯 CSS 绘制图形(心形、六边形等)
<CSS 魔法系列>继续给大家带来 CSS 在网页中以及图形绘制中的使用.这篇文章给大家带来的是纯 CSS 绘制五角星.六角形.五边形.六边形.心形等等. 我们的网页因为 CSS 而呈现千 ...
- 纯CSS制作三角(转)
原原文地址:http://www.w3cplus.com/code/303.html 原文地址:http://blog.csdn.net/dyllove98/article/details/89670 ...
- 如何使用纯 CSS 制作四子连珠游戏
序言:你是否想过单纯使用 CSS 也可以制作一款游戏?甚至可以双人对决!这是一篇非常有趣的文章,作者详细讲解了使用纯 CSS 制作四子连珠游戏的思路以及使用奇淫巧技解决困难问题的方法.因为案例本身比较 ...
- 如何使用纯CSS制作特效导航条?
先上张图,如何使用纯 CSS 制作如下效果? 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS ,能否巧妙的实现上述效果. OK,继续.这个效果是我在业务开发的 ...
- No.5 - 纯 CSS 制作绕中轴旋转的立方体
body{ background-color: #000; margin:; padding:; } main{ perspective: 800px; } .cube{ transform-styl ...
- 纯CSS制作空心三角形和实心三角形及其实现原理
纯CSS制作空心三角形和实心三角形及其实现原理 在一次项目中需要使用到空心三角形,我瞬间懵逼了.查阅了一些资料加上自己的分析思考,终于是达到了效果,个人感觉制作三角形是使用频率很高的,因此记录下来,供 ...
- 每日CSS_纯CSS制作进度条
每日CSS_纯CSS制作进度条 2020_12_26 源码 1. 代码解析 1.1 html 代码解析 设置整个容器 <div class="container"> . ...
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
随机推荐
- 汇总:Linux下svn命令大全
svn(subversion)是近年来崛起的版本管理工具,svn服务器有2种运行方式:独立服务器和借助apache.2种方式各有利弊.不管是那种方式,都需要使用各种命令来实现.在本文中,haohtml ...
- listview禁止双击一条之后选中复选框按钮的方法
this.listViewUsers.SelectedItems[0].Checked = !this.listViewUsers.SelectedItems[0].Checked;
- Simulator模拟器 硬件键盘不能输入
快捷键: Command + Shift +K
- 在Flash Builder或者Eclipse统计代码行数的方法
在Flash Builder或者Eclipse统计代码行数的方法如下图菜单栏--搜索--搜索文件
- Python 删除目录中特定文件
代码如下,使用了递归: import sys currDir = sys.path[] import os def removeFile(dir,postfix): if os.path.isdir( ...
- 纯Javascript实现Windows 8 Metro风格实现
Metro风格设计主要特点 1.Windows 8 Metro风格设计,实现网站或系统功能的导航 2.纯Javascript实现 3.支持所有IE.360.Chrome等常用浏览器 4.支持圆角.阴影 ...
- mmc生产运输问题
本题目结合生产和运输,增加了约束, 其实,比较生产,运输问题,大同小异, 解法基本相同.
- 【Android】利用服务Service创建标题栏通知
创建标题栏通知的核心代码 public void CreateInform() { //定义一个PendingIntent,当用户点击通知时,跳转到某个Activity(也可以发送广播等) Inten ...
- Metadata Lock原理8
http://www.kancloud.cn/taobaomysql/monthly/67141 MySQL· 5.7优化·Metadata Lock子系统的优化 背景 引入MDL锁的目的,最初是为了 ...
- UIDatePicker的时间选择器里的时区的问题
转自:http://www.cocoachina.com/bbs/simple/?t70445.html 初始化代码: - (void)viewDidLoad { [super viewDidLoad ...