<!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. 关于STM32 (Cortex-M3) 中NVIC的分析

    一.STM32 (Cortex-M3) 中的优先级概念 STM32(Cortex-M3)中有两个优先级的概念:抢占式优先级和响应优先级,也把响应优先级称作"亚优先级"或" ...

  2. 攻防世界 web2.robots

    输入ip/robots.txt,显示出了flag目录,直接访问.

  3. 【BZOJ-2199】奶牛议会

    链接: BZOJ-2199 题意: 给出 \(n(1\leq n\leq 1000)\) 个点,\(m(1\leq m\leq 4000)\) 个形如:"点 \(a\) 取 \(ca\) 或 ...

  4. Linux文件IO操作

    来源:微信公众号「编程学习基地」 目录 文件操作 Linux文件类型 Linux文件权限 修改文件权限 Linux error 获取系统调用时的错误描述 打印错误信息 系统IO函数 open/clos ...

  5. java 三大特性_继承、封装、多态_day005

    一.继承: java的三大特性之一.两个类之间通过extends关键字来描述父子关系,子类便可拥有父类的公共方法和公共属性.子类可以继承父类的方法和属性,子类也可以自己定义没有的方法或者通过覆盖父类的 ...

  6. C++ 重载、重写、重定义的区别

    C++ 中 重载.重写.重定义的区别 重载(overload) 定义: 在同一个作用域内,两函数的函数名相同, 参数不相同(可以是参数类型不同或者是参数个数不同), 那么就说这两个 函数重载. 分类: ...

  7. Vue首屏性能优化组件

    Vue首屏性能优化组件 简单实现一个Vue首屏性能优化组件,现代化浏览器提供了很多新接口,在不考虑IE兼容性的情况下,这些接口可以很大程度上减少编写代码的工作量以及做一些性能优化方面的事情,当然为了考 ...

  8. LeetCode88 合并有序数组

    1. 这道题为简单题目,但是还有需要好好思考的 2. 首先不能使用额外数组合并,不然就没得后文了 3. nums1后面有0填充,且填充数量正好是n,整个数组大小即m+n能够容纳合并后的数据 4.既然要 ...

  9. NCF 中如何将Function升级到FunctionRender

    简介 历史的车轮在不断的向前推进,NCF也在不断的迭代更新,只为成为更好的NCF 如果你之前没有用过NCF可以跳过这个文档,直接去下载最新的NCF源码进行实践. NCF仓库地址:https://git ...

  10. Flume面试题整理

    1.Flume使用场景(☆☆☆☆☆) 线上数据一般主要是落地(存储到磁盘)或者通过socket传输给另外一个系统,这种情况下,你很难推动线上应用或服务去修改接口,实现直接向kafka里写数据,这时候你 ...