<!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编写-怦怦跳的心的更多相关文章

  1. 用原生CSS编写动态字体

    HTML部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...

  2. canvas ：原生javascript编写动态时钟

    canvas :原生javascript编写动态时钟     此时针是以画布的中心为圆心: g.translate(width/2,width/2); 此函数是将画布的原点移到(width/2,wid ...

  3. 原生 Javascript 编写五子棋

    原文地址:原生 Javascript 编写五子棋 博客地址:http://www.extlight.com 一.背景 近一个月没写 Javascript 代码,有点生疏.正好浏览网页时弹出五子棋的游戏 ...

  4. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  5. HTML+CSS编写规范

    在任何一个项目或者系统开发之前都需要定制一个开发约定和规则,这样有利于项目的整体风格统一.代码维护和扩展.由于Web项目开发的分散性.独立性.整合的交互性等,所以定制一套完整的约定和规则显得尤为重要. ...

  6. 关于错位动画的练习，原生js编写

    最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...

  7. css编写注意事项（不定时更新）

    CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...

  8. 个人css编写规范

    前言:最近在做微信小程序,因为公司小,就我一个人弄前端的东西,js和页面都是我来弄,结果那天后台的人看到我的js代码,说我的代码写得不规范,函数什么的都很乱,弄得我羞愧难当,幸亏没看我的css,其实我 ...

  9. 原生css 中变量的使用

    前两天看到阮大神的一篇在css中使用变量的文章,整理了一下. 这个重要的 CSS 新功能,所有主要浏览器已经都支持了.本文全面介绍如何使用它,你会发现原生 CSS 从此变得异常强大. 一.变量的声明 ...

随机推荐

  1. C++ 、Qt计算时间的方法

    原文链接:https://blog.csdn.net/chy555chy/article/details/53405072 Qt计算时间的两种方法: QTime elapsed() : ms QTim ...

  2. dfs初步模板解析

    #include<stdio.h> int a[10],book[10],n; //这里还有需要注意的地方C语言全局变量默认为0 void dfs(int step){ //此时在第ste ...

  3. 零基础学习Linux所必备的七大习惯

    对于很多Linux初学者来说,在刚开始使用linux系统时会感到很多的不适.这里为大家整理了自己以前linux入门时别人告诉我的七个习惯.我相信如果你运用了这七个习惯,在你使用Linux时你会感觉更安 ...

  4. 字符串匹配（kmp+trie+aho-corasic automaton+fail tree）

    目录 kmp 那么怎么快速求最长前缀后缀呢 trie aho-corasic automaton fail tree kmp 对于一个字符串\(s_{0\dots n}\),称\(s_{0\dots ...

  5. vue混入mixin的使用，保证你看的明明白白！

    场景描述 有些时候,我们发现有些组件部分功能代码是几乎是一样的. 这个时候,我们就可以将相同的逻辑代码抽离出来 此时我们的主角混入mixin就登场了 下面我们有a-test和b-test两个组件,点击 ...

  6. PSS--待看

    转载:浅谈可移植激励规范(PSS)复用策略_路科验证-CSDN博客 译者按 :当今硬件设计变得愈加复杂,如何创建出足够的测试来保证设计的正确性是每个硬件工程师需要面对的问题.Accellera的可移植 ...

  7. Python pylint requires Python '>=3.4.*' but the running Python is 2.7.12

    用pylint 1.9.x 安装 pip install pylint==1.9.3. 或者换源 pip install -i https://pypi.tuna.tsinghua.edu.cn/si ...

  8. 最近公共祖先 牛客网 程序员面试金典 C++ Python

    最近公共祖先 牛客网 程序员面试金典 C++ Python 题目描述 有一棵无穷大的满二叉树,其结点按根结点一层一层地从左往右依次编号,根结点编号为1.现在有两个结点a,b.请设计一个算法,求出a和b ...

  9. Python matplotlib 概率论与数理统计 伯努利分布 二项分布

    Python 代码实现 二项分布 import numpy as np import matplotlib.pyplot as plt import math from scipy import st ...

  10. flask 中的endpoint有什么用？

    url到view function之间的一个中间概念,默认是view function的名字,相比于直接使用view function, 使用end point 提供了一个命名空间,可以让不同蓝图的v ...