Ai
1 Star 0 Fork 0

陈卓/JavaScript

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
克隆/下载
heart.css 1.28 KB
一键复制 编辑 原始数据 按行查看 历史
web-Chen 提交于 2019-04-10 10:04 +08:00 . 跳动的心
#heart {
position: relative;
width: 100px;
height: 90px;
margin: 200px auto;
}
#heart:before, #heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
@keyframes move{
0%{
transform: scale(1.0);
}
25%, 75%{
transform: scale(1.05);
}
50%{
transform: scale(1.1);
}
100%{
transform: scale(1.0)
}
}
#heart{
animation: move 1.3s infinite;
}
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML
1
https://gitee.com/codeChenZ/JavaScript.git
git@gitee.com:codeChenZ/JavaScript.git
codeChenZ
JavaScript
JavaScript
master

搜索帮助