用原生CSS编写-怦怦跳的心
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>怦怦跳爱心</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<body>
<label>
<input type="checkbox" />
<svg viewBox="0 0 532 532">
<path id="heart" transform="translate(10, 10)" d="M256,96.5l-19.7-20.3C186.1,24.3,104.5,15.9,49.7,62.6c-62.8,53.6-66.1,149.8-9.9,207.9l193.5,199.8 c12.5,12.9,32.8,12.9,45.3,0l193.5-199.8c56.3-58.1,53-154.3-9.8-207.9l0,0C407.5,15.9,326,24.3,275.7,76.2L256,96.5z"/>
</svg>
<span></span>
</label>
</body>
</html>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
transform: scale(1.0);
}
svg {
width: 200px;
position: relative;
z-index: 10;
}
#heart {
fill: #eee;
stroke-width: 20px;
stroke: red;
stroke-dasharray: 1600;
stroke-dashoffset: 1600;
stroke-linecap: round;
}
span, span::after {
display: block;
width: 24px;
height: 24px;
background-color: transparent;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
box-shadow: 0 -160px 0 red, 0 160px 0 red, -160px 0 0 red, 160px 0 0 red;
}
span::after {
content: '';
transform: translate(-50%, -50%) scale(0) rotate(45deg);
}
input[type="checkbox"] {
display: none;
}
label {
cursor: pointer;
}
input[type="checkbox"]:checked + svg #heart {
animation: 1s draw-heart linear forwards ;
}
@keyframes draw-heart {
0% {
stroke-dashoffset: 1600;
}
80% {
stroke-dashoffset: 0;
fill: #eee;
}
100% {
fill: red;
stroke-dashoffset: 0;
}
}
input[type="checkbox"]:checked ~span {
animation: .5s blink ease-in-out forwards .85s;
}
input[type="checkbox"]:checked ~span::after {
animation: .5s blink-after ease-in-out forwards .85s;
}
@keyframes blink {
0% {
transform: translate(-50%, -50%) scale(0.5);
opacity: .8;
}
50% {
transform: translate(-50%, -50%) scale(1);
opacity: .8;
}
100% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0;
}
}
@keyframes blink-after {
0% {
transform: translate(-50%, -50%) rotate(45deg) scale(0.5);
opacity: .8;
}
50% {
transform: translate(-50%, -50%) rotate(45deg) scale(1);
opacity: .8;
}
100% {
transform: translate(-50%, -50%) rotate(45deg) scale(1.1);
opacity: 0;
}
}
input[type="checkbox"]:checked + svg {
animation: 1s pop linear forwards;
}
@keyframes pop {
0% {
transform: scale(1);
}
70% {
transform: scale(1);
}
80% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
效果图:
用原生CSS编写-怦怦跳的心的更多相关文章
- 用原生CSS编写动态字体
HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...
- canvas ：原生javascript编写动态时钟
canvas :原生javascript编写动态时钟 此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...
- 原生 Javascript 编写五子棋
原文地址:原生 Javascript 编写五子棋 博客地址:http://www.extlight.com 一.背景 近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- HTML+CSS编写规范
在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...
- 关于错位动画的练习，原生js编写
最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...
- css编写注意事项（不定时更新）
CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...
- 个人css编写规范
前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...
- 原生css 中变量的使用
前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...
随机推荐
- STM32必学的时钟系统
STM32的时钟系统 相较于51单片机,stm32的时钟系统可以说是非常复杂了,我们现在看下面的一张图: 上图说明了时钟的走向,是从左至右的从时钟源一步步的分配给外设时钟.需要注意的是,上图左侧一 ...
- Linux C 数据结构 ->单向链表
之前看到一篇单向链表的博文,代码也看着很舒服,于是乎记录下来,留给自己~,循序渐进,慢慢 延伸到真正的内核链表~(敢问路在何方?路在脚下~) 1. 简介 链表是Linux 内核中最简单,最普通的数据结 ...
- 【行人惯性导航】关于行人导航中IMU位姿推导的知识点及相关代码
IMU姿态惯性推导 最近从事行人惯性导航的研究,本人也是一个小白,其中看了很多文献,有很多个人思考很费时间的地方,撰写此随笔的目的不仅是给自己做一个笔记,也是给各位有需要的仁兄一点个人理解. 本文只关 ...
- linux rtl8188eu ap模式 密码错误 disassoc reason code(8)
2018-05-30 14:12:46 于深圳南山科技园 最近有个项目,客户需要通过手机app通过机器wifi热点连接,从而实现对机器的设置及视频的实时预览等各种功能.这两天一直在搞rtl8188eu ...
- 树形DP 枚举祖宗的例题
这类题目是真的很头疼....其实这类题目的特征也很明显,叶子结点贡献答案时和其所在链的祖宗有关,也就是说要想得知其贡献必须知道他的所有祖宗的贡献,其实处理方法也不是太难,就是在dfs枚举时顺便把祖宗的 ...
- nod_1009 数字1的数量（分析题）
题意: 给定一个十进制正整数N,写下从1开始,到N的所有正数,计算出其中出现所有1的个数. 例如:n = 12,包含了5个1.1,10,12共包含3个1,11包含2个1,总共5个1. Input 输入 ...
- Python里字符串Format时的一个易错“点”
这是一篇很小的笔记,原因是我做学习通的时候见到了这个题: 当时看了一会儿发现没有符合自己想法的答案,然后就脑袋一热选了C,结果当然是错了... 看了一眼这个format的字符串对象,发现有个 {:7. ...
- journalctl常用命令
journalctl -xe 查看全部日志# 以flow形式查看日志 $ journalctl -f # 查看内核日志 $ journalctl -k # 查看指定服务日志 $ journalctl ...
- C 数组类型语法总结
数组类型语法总结 数组指针 和 指针数组 区分 数组指针是一个指针,只对应类型的数组.指针数组是一个数组,其中每个元素都是指针 数组指针遵循指针运算法则.指针数组拥有c语言数组的各种特性 数组类型重命 ...
- 2021 祥云杯 wp
52 web ezyii https://pan.baidu.com/s/1j7IJm9xiea5FvBhPMkPNoQ 提取码GAME <?php include("closure/ ...