每日分享html之3个logo、1个背景、1个button

已于 2022-11-30 23:37:02 修改
阅读量1.2k 收藏 11
点赞数 4
分类专栏： 前端 文章标签： html css css3
于 2022-09-29 01:46:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lbcyllqj/article/details/127099655
版权

我是c站的一个小博主，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于html特效专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏，每天都分享前端知识哦~

欢迎关注b站：小淼前端

有更多的前端特效，及视频讲解+源代码可领取哦~

欢迎关注b站：小淼前端

有更多的前端特效，及视频讲解+源代码可领取哦~

目录

我是c站的一个小博主，近期我会每天分享前端知识包括（原生的web语句，以及vue2和vue3，微信小程序的写法及知识点）本篇文章收录于html特效专栏中，如果想每天在我这学到一些东西，请关注我并订阅专栏，每天都分享前端知识哦~

欢迎关注b站：小淼前端

有更多的前端特效，及视频讲解+源代码可领取哦~

欢迎关注b站：小淼前端

有更多的前端特效，及视频讲解+源代码可领取哦~

前端的特效视觉：

1.logo特效

2.每个文字闪光logo效果

3.文字滚动logo效果

4.流星划过天际背景效果

5.点击爱心button效果

欢迎关注b站：小淼前端

有更多的前端特效，及视频讲解+源代码可领取哦~

欢迎关注b站：小淼前端

有更多的前端特效，及视频讲解+源代码可领取哦~

前端的特效视觉：

层次结构的表现

动态效果，如缩放，覆盖，滑出网页或单个视觉元素，可帮助用户理解网页信息架构。通常是通过转场和菜单来展开网页。

表现层级关系

为了展现层与层的关系，是抽屉，是打开，还是平级切换等等。让用户知道这个界面和上一个、下一个的关系。

清晰明确

动效可以清晰地表明各种数据块中间的逻辑结构，即使在数据高度饱和的情况下也能使一切从观感上有组织性。

添加了图层

在网站制作过程中加上特效，每个元素都在用户滚动页面或者是鼠标经过的地方有动态效果，就像在平面层上多出了一个动态层，这样看起来更加有层次感。

我想借此专栏发布的内容帮助那些正在入坑前端的家人们，同时作为我以后复习的笔记，希望我们可以互相帮助，共同加油！！！

1.logo特效

 代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>logo特效</title>
    <style>
        *{
    /* 初始化 取消页面内外边距 */
    margin: 0;
    padding: 0;
}
.box{
    background-color: #000;
    /* 100%窗口宽度和高度 */
    width: 100vw;
    height: 100vh;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 横向排列 */
    flex-direction: row;
    /* 将平面图形转换为具有透视的3D图形 */
    perspective: 300;
    -webkit-perspective: 300;
    overflow: hidden;
}
/* 动画字符所在的块 */
.chars{
    color: #fff;
    /* 相对定位 */
    position: relative;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 54px;
    font-weight: 900;
    /* 斜体 */
    font-style: italic;
    margin: 0 10px;
    opacity: 0;
}
/* 字符外的方框 */
.ll{
    /* 绝对定位 */
    position: absolute;
    margin-left: -480px;
    width: 60px;
    height: 60px;
    border-radius: 3px;
    opacity: 0;
}
.x{
    border: 4px solid #f5b5fc;
    /* 执行动画：动画名称 时长 线性的 停留在最后一帧 */
    animation: xmove 2s linear forwards;
}
.e{
    border: 4px solid #96f7d2;
    animation: emove 2s linear forwards;
    /* 设置动画延迟 */
    animation-delay: 0.1s;
}
.l{
    border: 4px solid #f0f696;
    animation: lmove 2s linear forwards;
    animation-delay: 0.2s;
}
.p{
    border: 4px solid #fcb1b1;
    animation: pmove 2s linear forwards;
    animation-delay: 0.3s;
}
.i{
    border: 4px solid #f0f696;
    animation: imove 2s linear forwards;
    animation-delay: 0.4s;
}
.n{
    border: 4px solid #96f7d2;
    animation: nmove 2s linear forwards;
    animation-delay: 0.5s;
}
.a{
    border: 4px solid #f5b5fc;
    animation: amove 2s linear forwards;
    animation-delay: 0.6s;
}
/* 正中间的一条线 */
.pcov{
    position: absolute;
    width: 4px;
    height: 60px;
    background-color: #fcb1b1;
    opacity: 0;
    animation: showp forwards;
    animation-delay: 2.3s;
}

/* 定义动画 */
/* 显示正中间的那条线 */
@keyframes showp {
    from{
        opacity: 0;
    }
    to{
        transform: scale(1,2);
        opacity: 1;
    }
}
/* A字符外方框的动画 */
@keyframes amove {
    0%{
        opacity: 1;
        transform: rotateY(0deg);
    }
    50%{
        transform: rotateY(180deg);
    }
    100%{
        opacity: 1;
        transform: rotateY(360deg);
    }
}
/* N字符外方框的动画 */
@keyframes nmove {
    30%{
        opacity: 1;
        transform: translate(30px) rotateY(135deg) scale(1.1,1.1);
    }
    60%{
        transform: translate(50px) rotateY(45deg) scale(1.1,1.1);
    }
    85%{
        transform: translate(80px) rotateY(103deg) scale(1.2,1.2);
    }
    100%{
        opacity: 1;
        z-index: -99;
        transform: translate(80px) rotateY(77deg) scale(1.2,1.2);
    }
}
/* I字符外方框的动画 */
@keyframes imove {
    30%{
        opacity: 1;
        transform: translate(60px) rotateY(135deg) scale(1.2,1.2);
    }
    60%{
        transform: translate(120px) rotateY(45deg) scale(1.3,1.3);
    }
    85%{
        transform: translate(160px) rotateY(103deg) scale(1.3,1.3);
    }
    100%{
        opacity: 1;
        transform: translate(164px) rotateY(77deg) scale(1.3,1.3);
    }
}
/* P字符外方框的动画 */
@keyframes pmove {
    30%{
        opacity: 1;
        transform: translate(60px) rotateY(135deg) scale(1.2,1.2);
    }
    60%{
        transform: translate(120px) rotateY(45deg) scale(1.4,1.4);
    }
    85%{
        transform: translate(240px) rotateY(135deg) scale(1.6,1.6);
    }
    100%{
        opacity: 1;
        transform: translate(240px) rotateY(90deg) scale(1.6,1.6);
    }
}
/* L字符外方框的动画 */
@keyframes lmove {
    33%{
        opacity: 1;
        transform: translate(80px) rotateY(135deg) scale(1.2,1.2);
    }
    66%{
        transform: translate(240px) rotateY(45deg) scale(1.6,1.6);
    }
    95%{
        transform: translate(320px) rotateY(100deg) scale(1.4,1.4);
    }
    100%{
        opacity: 1;
        transform: translate(320px) rotateY(103deg) scale(1.3,1.3);
    }
}
/* E字符外方框的动画 */
@keyframes emove {
    33%{
        opacity: 1;
        transform: translate(80px) rotateY(135deg) scale(1.2,1.2);
    }
    66%{
        transform: translate(240px) rotateY(45deg) scale(1.6,1.6);
    }
    95%{
        transform: translate(390px) rotateY(135deg) scale(1.2,1.2);
    }
    100%{
        opacity: 1;
        transform: translate(402px) rotateY(103deg) scale(1.2,1.2);
    }
}
/* X字符外方框的动画 */
@keyframes xmove {
    25%{
        opacity: 1;
        transform: translate(100px) rotateY(135deg) scale(1.2,1.2);
    }
    50%{
        transform: translate(260px) rotateY(45deg) scale(1.6,1.6);
    }
    85%{
        transform: translate(400px) rotateY(135deg) scale(1.2,1.2);
    }
    100%{
        opacity: 1;
        transform: translate(484px) rotateY(0deg) scale(1,1);
    }
}
/* 前两个字符的动画 */
@keyframes show12 {
    0%{
        opacity: 1;
        transform: rotateY(0deg);
    }
    100%{
        opacity: 1;
        transform: rotateY(360deg);
    }
}
/* 第3个及之后的字符的动画 */
@keyframes show3 {
    0%{
        opacity: 1;
        transform: rotateY(90deg);
    }
    100%{
        opacity: 1;
        transform: rotateY(360deg);
    }
}

/* 为每个字符添加动画 */
.box div:nth-child(1){
    animation: show12 1.2s linear forwards;
    animation-iteration-count: 2;
    animation-delay: 0.2s;
}
.box div:nth-child(2){
    animation: show12 1.2s linear forwards;
    animation-iteration-count: 2;
    animation-delay: 0.4s;
}
.box div:nth-child(3){
    animation: show3 1s linear 1 forwards;
    animation-delay: 0.7s;
}
.box div:nth-child(4){
    animation: show3 1s linear 1 forwards;
    animation-delay: 0.9s;
}
.box div:nth-child(5){
    animation: show3 1s linear 1 forwards;
    animation-delay: 1.1s;
}
.box div:nth-child(6){
    animation: show3 1.2s linear 1 forwards;
    animation-delay: 1.3s;
}
.box div:nth-child(7){
    animation: show3 1.2s linear 1 forwards;
    animation-delay: 1.6s;
}
    </style>
</head>

<body>
    <div class="box">
        <div class="chars">l</div>
        <div class="chars">q</div>
        <div class="chars">j</div>
        <div class="chars">_</div>
        <div class="chars">本</div>
        <div class="chars">人</div>
        <div class="chars">csdn</div>
        <div class="ll a"></div>
        <div class="ll n"></div>
        <div class="ll i"></div>
        <div class="ll p"></div>
        <div class="ll l"></div>
        <div class="ll e"></div>
        <div class="ll x"></div>
        <div class="pcov"></div>
    </div>
</body>

</html>

2.每个文字闪光logo效果

 代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>字体发光效果logo</title>
    <style>
        *{
    /* 初始化 取消页面元素的内外边距 */
    margin: 0;
    padding: 0;
}
.container{
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
span{
    font-size: 100px;
    font-weight: bold;
    color: #111;
    /* 大写 */
    text-transform: uppercase;
    /* 字间距 */
    letter-spacing: 5px;
    /* 模糊滤镜 */
    filter: blur(2px);
    /* 执行动画：动画名称 时长 线性的 无限次播放 */
    animation: animate 2.5s linear infinite;
}
/* 接下来为每一个span元素设置动画延迟时间 */
span:nth-child(1){
    animation-delay: 0s;
}
span:nth-child(2){
    animation-delay: 0.25s;
}
span:nth-child(3){
    animation-delay: 0.5s;
}
span:nth-child(4){
    animation-delay: 0.75s;
}
span:nth-child(5){
    animation-delay: 1s;
}
span:nth-child(6){
    animation-delay: 1.25s;
}
span:nth-child(7){
    animation-delay: 1.5s;
}
span:nth-child(8){
    animation-delay: 1.75s;
}
span:nth-child(9){
    animation-delay: 2s;
}
span:nth-child(10){
    animation-delay: 2.25s;
}

/* 定义动画 */
@keyframes animate {
    0%,100%{
        color: rgb(255, 255, 255);
        /* 模糊滤镜 */
        filter: blur(2px);
        /* 文字阴影 */
        text-shadow: 
        0 0 10px #ff5e00,
        0 0 20px #d1ff02,
        0 0 30px #32ff7e,
        0 0 40px #00a2ff,
        0 0 100px #5900ff,
        0 0 200px #32ff7e,
        0 0 300px #ff009d,
        0 0 400px #32ff7e
        ;
    }
    5%,95%{
        color: #111;
        filter: blur(0px);
        text-shadow: none;
    }
}
    </style>
</head>

<body>
    <div class="container">
        <span>l</span>
        <span>q</span>
        <span>j</span>
        <span>_</span>
        <span>本</span>
        <span>人</span>
        <span>C</span>
        <span>S</span>
        <span>D</span>
        <span>N</span>
    </div>
</body>

</html>

3.文字滚动logo效果

 代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>超酷的文字滚动特效</title>
    <style>
        *{
    /* 初始化 取消页面元素的内外边距 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    background-color: #f2be45;
    /* 相对定位 */
    position: relative;
    /* 执行背景颜色变化的动画：动画名 时长 线性的 停留在最后一帧 */
    animation: changeBg 2.5s linear forwards;
}
/* 添加祝贺文本 */
.container::before,
.container::after{
    /* 绝对定位 */
    position: absolute;
    top: 5%;
    color: #f2be45;
    font-size: 70px;
    font-weight: bold;
    /* 执行显示祝贺文本的动画 */
    animation: showText 2.5s linear forwards;
}
.container::before{
    content: "CSDN";
    left: 5%;
    /* 沿X轴倾斜15度 */
    transform: skewX(15deg);
}
.container::after{
    content: "我的超人";
    right: 5%;
    /* 沿X轴倾斜-15度 */
    transform: skewX(-15deg);
}
.letter{
    font-size: 160px;
    font-weight: bold;
    color: #725e82;
    /* 转大写 */
    text-transform: uppercase;
    /* 绝对固定定位 */
    position: fixed;
}
.letter span{
    /* 弹性布局 水平、垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 180px;
    height: 200px;
}
.letter.letter1{
    left: calc(50% - 270px);
    top: -400px;
    /* 执行动画：动画名 时长 加速后减速 */
    animation: letter1Animate 2.5s ease-in-out;
}
.letter.letter2{
    left: calc(50% - 90px);
    top: -200px;
    /* 执行动画：动画名 时长 加速后减速 */
    animation: letter2Animate 2.5s ease-in-out;
}
.letter.letter3{
    left: calc(50% + 90px);
    top: -800px;
    /* 执行动画：动画名 时长 加速后减速 */
    animation: letter3Animate 2.5s ease-in-out;
}
.letter .check{
    color: #f2be45;
}

/* 定义动画 */
/* 改变背景颜色 */
@keyframes changeBg {
    0%{
        background-color: #f2be45;
    }
    100%{
        background-color: #725e82;
    }
}
/* 第一个字母的滚动动画 */
@keyframes letter1Animate {
    0%{
        top: -2000px;
    }
    100%{
        top: -400px;
        color: #725e82;
    }
}
/* 第二个字母的滚动动画 */
@keyframes letter2Animate {
    0%{
        top: -4000px;
    }
    100%{
        top: -200px;
        color: #725e82;
    }
}
/* 第三个字母的滚动动画 */
@keyframes letter3Animate {
    0%{
        top: -3000px;
    }
    100%{
        top: -800px;
        color: #725e82;
    }
}
/* 显示祝贺文本 */
@keyframes showText {
    0%{
        color: #f2be45;
    }
    98%{
        color: #725e82;
        text-shadow: none;
    }
    100%{
        color: #fff;
        /* 文字阴影 */
        text-shadow: 5px 5px 0 #f2be45;
    }
}
    </style>
</head>

<body>
    <div class="container">
        <div class="letter letter1">
            <span>a</span>
            <span>b</span>
            <span>c</span>
            <span>d</span>
            <span class="check">l</span>
            <span>f</span>
            <span>g</span>
            <span>h</span>
            <span>i</span>
            <span>j</span>
            <span>k</span>
            <span>l</span>
            <span>m</span>
            <span>n</span>
            <span>o</span>
            <span>p</span>
            <span>q</span>
            <span>r</span>
            <span>s</span>
            <span>t</span>
            <span>u</span>
            <span>v</span>
            <span>w</span>
            <span>x</span>
            <span>y</span>
            <span>z</span>
        </div>
        <div class="letter letter2">
            <span>a</span>
            <span>b</span>
            <span>c</span>
            <span class="check">q</span>
            <span>e</span>
            <span>f</span>
            <span>g</span>
            <span>h</span>
            <span>i</span>
            <span>j</span>
            <span>k</span>
            <span>l</span>
            <span>m</span>
            <span>n</span>
            <span>o</span>
            <span>p</span>
            <span>q</span>
            <span>r</span>
            <span>s</span>
            <span>t</span>
            <span>u</span>
            <span>v</span>
            <span>w</span>
            <span>x</span>
            <span>y</span>
            <span>z</span>
        </div>
        <div class="letter letter3">
            <span>a</span>
            <span>b</span>
            <span>c</span>
            <span>d</span>
            <span>e</span>
            <span>f</span>
            <span class="check">j</span>
            <span>h</span>
            <span>i</span>
            <span>j</span>
            <span>k</span>
            <span>l</span>
            <span>m</span>
            <span>n</span>
            <span>o</span>
            <span>p</span>
            <span>q</span>
            <span>r</span>
            <span>s</span>
            <span>t</span>
            <span>u</span>
            <span>v</span>
            <span>w</span>
            <span>x</span>
            <span>y</span>
            <span>z</span>
        </div>
    </div>
</body>

</html>

4.流星划过天际背景效果

代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>流星划过天际的背景效果</title>
    <style>
        *{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口高度 */
    height: 100vh;
    /* 溢出隐藏 */
    overflow: hidden;
}
.container{
    /* 绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("space.jpg") no-repeat;
    /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 */
    background-size: cover;
    /* 定位背景图像为正中间 */
    background-position-x: center;
    /* 执行动画：动画名称 时长 线性的 无限次播放 */
    animation: animateBg 5s linear infinite;
}
span{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background-color: rgb(196, 4, 4);
    border-radius: 50%;
    /* 发光效果 */
    box-shadow: 0 0 0 4px rgba(255,255,255,0.1),
    0 0 0 8px rgba(255,255,255,0.1),
    0 0 20px rgba(255,255,255,1);
    /* 执行动画 */
    animation: animate 3s linear infinite;
}
/* 拖尾效果 */
span::before{
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    height: 3px;
    background: linear-gradient(90deg,rgb(251, 255, 4),transparent);
}
/* 接下来分别为每一个流星设置位置、动画延迟时间、动画时长 */
span:nth-child(1){
    top: 0;
    right: 0;
    /* initial关键字用于设置CSS属性为它的默认值 */
    left: initial;
    /* 动画延迟时间 */
    animation-delay: 0s;
    /* 动画时长 */
    animation-duration: 1s;
}
span:nth-child(2){
    top: 0;
    right: 80px;
    left: initial;
    animation-delay: 0.2s;
    animation-duration: 3s;
}
span:nth-child(3){
    top: 80px;
    right: 0;
    left: initial;
    animation-delay: 0.4s;
    animation-duration: 2s;
}
span:nth-child(4){
    top: 0;
    right: 180px;
    left: initial;
    animation-delay: 0.6s;
    animation-duration: 1.5s;
}
span:nth-child(5){
    top: 0;
    right: 400px;
    left: initial;
    animation-delay: 0.8s;
    animation-duration: 2.5s;
}
span:nth-child(6){
    top: 0;
    right: 600px;
    left: initial;
    animation-delay: 1s;
    animation-duration: 3s;
}
span:nth-child(7){
    top: 300px;
    right: 0;
    left: initial;
    animation-delay: 1.2s;
    animation-duration: 1.75s;
}
span:nth-child(8){
    top: 0;
    right: 700px;
    left: initial;
    animation-delay: 1.4s;
    animation-duration: 1.25s;
}
span:nth-child(9){
    top: 0;
    right: 1000px;
    left: initial;
    animation-delay: 0.75s;
    animation-duration: 2.25s;
}
span:nth-child(10){
    top: 0;
    right: 450px;
    left: initial;
    animation-delay: 2.75s;
    animation-duration: 2.25s;
}

/* 定义动画 */
/* 背景缩放动画 */
@keyframes animateBg {
    0%,100%{
        transform: scale(1);
    }
    50%{
        transform: scale(1.2);
    }
}
/* 流星划过动画 */
@keyframes animate {
    0%{
        transform: rotate(315deg) translateX(0);
        opacity: 1;
    }
    90%{
        opacity: 1;
    }
    100%{
        transform: rotate(315deg) translateX(-1000px);
        opacity: 0;
    }
}
    </style>
</head>

<body>
    <div class="container">
        <!-- 10个span -->
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</body>

</html>

5.点击爱心button效果

 代码：

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>点击爱心button的动画效果</title>
    <style>
        *{
    /* 初始化 */
    margin: 0;
    padding: 0;
}
body{
    background: rgb(6, 216, 253);
    /* 100%窗口高度 */
    height: 100vh;
    /* 弹性布局 居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* 自定义属性，可通过var函数对其调用 */
    --c: #ff6b81;
}
svg{
    width: 200px;
    /* 相对定位 */
    position: relative;
    /* z-index: 10; */
}
#heart{
    /* 填充颜色 */
    fill: #eee;
    /* stroke属性可应用于任何种类的线条，文字和元素，就像一个圆的轮廓 */
    stroke: var(--c);
    /* 线条宽度 */
    stroke-width: 40px;
    /* 设置线条为虚线，虚线的长度 */
    stroke-dasharray: 2600;
    /* 线条的位移 */
    stroke-dashoffset: 2600;
    /* 端点为圆头 */
    stroke-linecap: round;
}
span{
    display: block;
    width: 24px;
    height: 24px;
    background-color: transparent;
    border-radius: 50%;
    /* 绝对定位 居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%) scale(0);
    /* 设置各个方向的阴影 */
    /* 通过var函数调用自定义属性--c,设置阴影颜色 */
    box-shadow: 0 -160px 0 var(--c),
    0 160px 0 var(--c),
    -160px 0 0 var(--c),
    160px 0 0 var(--c),
    -120px -120px 0 var(--c),
    120px -120px 0 var(--c),
    120px 120px 0 var(--c),
    -120px 120px 0 var(--c);
}
/* 勾选复选框执行各个动画 */
#checkbox:checked + svg #heart{
    /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
    animation: drawHeart 1s linear forwards;
}
#checkbox:checked ~ span{
    /* 执行动画: 动画名 时长 加速后减速 停留在最后一帧 */
    animation: blink 0.5s ease-in-out forwards;
    /* 动画延迟时间 */
    animation-delay: 0.85s;
}
#checkbox:checked + svg{
    /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
    animation: beat 1s linear forwards;
}
label{
    /* 鼠标移入,光标变小手 */
    cursor: pointer;
}

/* 定义动画 */
/* 画心的动画 */
@keyframes drawHeart {
    0%{
        stroke-dashoffset: 2600;
    }
    80%{
        fill: #eee;
        stroke-dashoffset: 0;
    }
    100%{
        fill: var(--c);
        stroke-dashoffset: 0;
    }
}
/* 小圆点闪出的动画 */
@keyframes blink {
    0%{
        transform: translate(-50%,-50%) scale(0.5);
        opacity: 0.8;
    }
    50%{
        transform: translate(-50%,-50%) scale(1);
        opacity: 1;
    }
    100%{
        transform: translate(-50%,-50%) scale(1.1);
        opacity: 0;
    }
}
/* 心跳动的动画 */
@keyframes beat {
    0%{
        transform: scale(1);
    }
    70%{
        transform: scale(1);
    }
    80%{
        transform: scale(1.2);
    }
    100%{
        transform: scale(1);
    }
}
    </style>
</head>

<body>
    <label for="checkbox">
        <input type="checkbox" id="checkbox" hidden>
        <svg t="1639041971928" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3128"><path d="M512 896a42.666667 42.666667 0 0 1-30.293333-12.373333l-331.52-331.946667a224.426667 224.426667 0 0 1 0-315.733333 223.573333 223.573333 0 0 1 315.733333 0L512 282.026667l46.08-46.08a223.573333 223.573333 0 0 1 315.733333 0 224.426667 224.426667 0 0 1 0 315.733333l-331.52 331.946667A42.666667 42.666667 0 0 1 512 896z" p-id="3129" id="heart"></path></svg>
        <span></span>
    </label>
</body>

</html>
淼学派对
关注
  • 4
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

淼学派对

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值