用原生CSS编写-怦怦跳的心

作者:神秘网友 发布时间:2021-03-10 16:50:07

用原生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编写-怦怦跳的心 相关文章

  1. .net core 编写日志类

    using System;using System.IO;namespace WebApplication2.Controllers{ public static class LogExtentsions { private static string currentDay = string.Empty;//当前时间 private static object lockHelper = new object();//锁对象 /// summary /// 延

  2. css常用选择器总结

    前言:我们在码代码的时候,经常会遇到需要给第一个或者最后一个元素添加或删除样式,还有一些比较特殊的是选取第几个元素添加或删除样式,下面记录css选择器中常见的选择器:相邻兄弟选择器(+)、子选择器()、兄弟选择器(~)、first-child、:last-child

  3. CSS3新增属性clip-path裁剪

    clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法。想象一下你在Photoshop中勾勒路径的场景。MDN上是这样介绍 clip-path的: clip-path属性可以防止部分元素通过定义的剪切区域来显示,仅通过显示的特殊区域。剪切区域是被UR

  4. 30个前端开发人员必备的顶级工具

    目录 CSS代码生成器 CSS3 Generator 终极CSS Generator CSS Grid布局生成器 静态站点生成器 Next.js Gatsby SVG 优化器 SVGOMG SVG Optimizers 动画库 Animate.css GreenSock (GSAP) Anime.js 跨浏览器测试 Caniuse Am I Responsive Responsive Web Design C

  5. css怎么去掉下划线

    css去掉下划线的方法:可以利用text-decoration属性来实现,如【text-decoration: none;】,属性值none表示没有文本装饰。 本文操作环境:windows10系统、css 3、thinkpad t480电脑。 可以使用text-decoration 属性来取消文本下划线,该属性规定添加到文本的

  6. 链表 - 相交链表

    题目: 编写一个程序,找到两个单链表相交的起始节点。(考察Y型相交) leedcode网址 https://leetcode-cn.com/problems/intersection-of-two-linked-lists/ 解答: 一图胜千言,看图你就明白了 空间复杂度 O(1)O(1) 时间复杂度为 O(n)O(n) 这里使用图解的方

  7. CSS圣杯和双飞翼布局

    圣杯布局 !DOCTYPE htmlhtmlhead meta charset="UTF-8" meta name="viewport" content="width=device-width, initial-scale=1.0" meta http-equiv="X-UA-Compatible" content="ie=edge" title圣杯布局/title style type="text/css" body { min-width: 550px;

  8. web前端html5css3初级笔记1/2/3——前端介绍/网页简史/HTML

    ------------恢复内容开始------------ 1 前端介绍 通常情况下,现在的软件一般由两个部分组成 -客户端:用户通过客户端来使用软件 -服务端:服务器负责在远程处理业务逻辑 1.1 服务器 服务器开发的语言: Java PHP C# Python Node.js(前端JavaScript编写服

  9. 原生表格加滚动条 有点技术含量

    设置原始表格有滚动条 姓名 年龄 出生年月 手机号码 单位 李四 39 yyy 167777272 百度 李四 39 yyy 167777272 百度 李四 39 yyy 167777272 百度 李四 39 yyy 167777272 百度 李四 39 yyy 167777272 百度 李四 39 yyy 167777272 百度 李四 39 yyy 167777272

  10. 文字居中的css代码

    文字居中的css代码是“text-align:center;”或“line-height:值;”。text-align属性规定元素文本的水平对齐方式,当值为center时,即可实现水平居中;而设置line-height可实现文字垂直居中。 本教程操作环境:windows7系统、CSS3HTML5版、Dell G3电脑。 css

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词