devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：IT小白 | 2024-02-16 11:26:18

赞

踩

html logo

我是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特效

 代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7.  
  8.     <title>logo特效</title>
  9.     <style>
  10.         *{
  11.     /* 初始化 取消页面内外边距 */
  12.     margin: 0;
  13.     padding: 0;
  14. }
  15. .box{
  16.     background-color: #000;
  17.     /* 100%窗口宽度和高度 */
  18.     width: 100vw;
  19.     height: 100vh;
  20.     /* 弹性布局 水平、垂直居中 */
  21.     display: flex;
  22.     justify-content: center;
  23.     align-items: center;
  24.     /* 横向排列 */
  25.     flex-direction: row;
  26.     /* 将平面图形转换为具有透视的3D图形 */
  27.     perspective: 300;
  28.     -webkit-perspective: 300;
  29.     overflow: hidden;
  30. }
  31. /* 动画字符所在的块 */
  32. .chars{
  33.     color: #fff;
  34.     /* 相对定位 */
  35.     position: relative;
  36.     width: 60px;
  37.     height: 60px;
  38.     text-align: center;
  39.     line-height: 60px;
  40.     font-size: 54px;
  41.     font-weight: 900;
  42.     /* 斜体 */
  43.     font-style: italic;
  44.     margin: 0 10px;
  45.     opacity: 0;
  46. }
  47. /* 字符外的方框 */
  48. .ll{
  49.     /* 绝对定位 */
  50.     position: absolute;
  51.     margin-left: -480px;
  52.     width: 60px;
  53.     height: 60px;
  54.     border-radius: 3px;
  55.     opacity: 0;
  56. }
  57. .x{
  58.     border: 4px solid #f5b5fc;
  59.     /* 执行动画：动画名称 时长 线性的 停留在最后一帧 */
  60.     animation: xmove 2s linear forwards;
  61. }
  62. .e{
  63.     border: 4px solid #96f7d2;
  64.     animation: emove 2s linear forwards;
  65.     /* 设置动画延迟 */
  66.     animation-delay: 0.1s;
  67. }
  68. .l{
  69.     border: 4px solid #f0f696;
  70.     animation: lmove 2s linear forwards;
  71.     animation-delay: 0.2s;
  72. }
  73. .p{
  74.     border: 4px solid #fcb1b1;
  75.     animation: pmove 2s linear forwards;
  76.     animation-delay: 0.3s;
  77. }
  78. .i{
  79.     border: 4px solid #f0f696;
  80.     animation: imove 2s linear forwards;
  81.     animation-delay: 0.4s;
  82. }
  83. .n{
  84.     border: 4px solid #96f7d2;
  85.     animation: nmove 2s linear forwards;
  86.     animation-delay: 0.5s;
  87. }
  88. .a{
  89.     border: 4px solid #f5b5fc;
  90.     animation: amove 2s linear forwards;
  91.     animation-delay: 0.6s;
  92. }
  93. /* 正中间的一条线 */
  94. .pcov{
  95.     position: absolute;
  96.     width: 4px;
  97.     height: 60px;
  98.     background-color: #fcb1b1;
  99.     opacity: 0;
  100.     animation: showp forwards;
  101.     animation-delay: 2.3s;
  102. }
  103.  
  104. /* 定义动画 */
  105. /* 显示正中间的那条线 */
  106. @keyframes showp {
  107.     from{
  108.         opacity: 0;
  109.     }
  110.     to{
  111.         transform: scale(1,2);
  112.         opacity: 1;
  113.     }
  114. }
  115. /* A字符外方框的动画 */
  116. @keyframes amove {
  117.     0%{
  118.         opacity: 1;
  119.         transform: rotateY(0deg);
  120.     }
  121.     50%{
  122.         transform: rotateY(180deg);
  123.     }
  124.     100%{
  125.         opacity: 1;
  126.         transform: rotateY(360deg);
  127.     }
  128. }
  129. /* N字符外方框的动画 */
  130. @keyframes nmove {
  131.     30%{
  132.         opacity: 1;
  133.         transform: translate(30px) rotateY(135deg) scale(1.1,1.1);
  134.     }
  135.     60%{
  136.         transform: translate(50px) rotateY(45deg) scale(1.1,1.1);
  137.     }
  138.     85%{
  139.         transform: translate(80px) rotateY(103deg) scale(1.2,1.2);
  140.     }
  141.     100%{
  142.         opacity: 1;
  143.         z-index: -99;
  144.         transform: translate(80px) rotateY(77deg) scale(1.2,1.2);
  145.     }
  146. }
  147. /* I字符外方框的动画 */
  148. @keyframes imove {
  149.     30%{
  150.         opacity: 1;
  151.         transform: translate(60px) rotateY(135deg) scale(1.2,1.2);
  152.     }
  153.     60%{
  154.         transform: translate(120px) rotateY(45deg) scale(1.3,1.3);
  155.     }
  156.     85%{
  157.         transform: translate(160px) rotateY(103deg) scale(1.3,1.3);
  158.     }
  159.     100%{
  160.         opacity: 1;
  161.         transform: translate(164px) rotateY(77deg) scale(1.3,1.3);
  162.     }
  163. }
  164. /* P字符外方框的动画 */
  165. @keyframes pmove {
  166.     30%{
  167.         opacity: 1;
  168.         transform: translate(60px) rotateY(135deg) scale(1.2,1.2);
  169.     }
  170.     60%{
  171.         transform: translate(120px) rotateY(45deg) scale(1.4,1.4);
  172.     }
  173.     85%{
  174.         transform: translate(240px) rotateY(135deg) scale(1.6,1.6);
  175.     }
  176.     100%{
  177.         opacity: 1;
  178.         transform: translate(240px) rotateY(90deg) scale(1.6,1.6);
  179.     }
  180. }
  181. /* L字符外方框的动画 */
  182. @keyframes lmove {
  183.     33%{
  184.         opacity: 1;
  185.         transform: translate(80px) rotateY(135deg) scale(1.2,1.2);
  186.     }
  187.     66%{
  188.         transform: translate(240px) rotateY(45deg) scale(1.6,1.6);
  189.     }
  190.     95%{
  191.         transform: translate(320px) rotateY(100deg) scale(1.4,1.4);
  192.     }
  193.     100%{
  194.         opacity: 1;
  195.         transform: translate(320px) rotateY(103deg) scale(1.3,1.3);
  196.     }
  197. }
  198. /* E字符外方框的动画 */
  199. @keyframes emove {
  200.     33%{
  201.         opacity: 1;
  202.         transform: translate(80px) rotateY(135deg) scale(1.2,1.2);
  203.     }
  204.     66%{
  205.         transform: translate(240px) rotateY(45deg) scale(1.6,1.6);
  206.     }
  207.     95%{
  208.         transform: translate(390px) rotateY(135deg) scale(1.2,1.2);
  209.     }
  210.     100%{
  211.         opacity: 1;
  212.         transform: translate(402px) rotateY(103deg) scale(1.2,1.2);
  213.     }
  214. }
  215. /* X字符外方框的动画 */
  216. @keyframes xmove {
  217.     25%{
  218.         opacity: 1;
  219.         transform: translate(100px) rotateY(135deg) scale(1.2,1.2);
  220.     }
  221.     50%{
  222.         transform: translate(260px) rotateY(45deg) scale(1.6,1.6);
  223.     }
  224.     85%{
  225.         transform: translate(400px) rotateY(135deg) scale(1.2,1.2);
  226.     }
  227.     100%{
  228.         opacity: 1;
  229.         transform: translate(484px) rotateY(0deg) scale(1,1);
  230.     }
  231. }
  232. /* 前两个字符的动画 */
  233. @keyframes show12 {
  234.     0%{
  235.         opacity: 1;
  236.         transform: rotateY(0deg);
  237.     }
  238.     100%{
  239.         opacity: 1;
  240.         transform: rotateY(360deg);
  241.     }
  242. }
  243. /* 第3个及之后的字符的动画 */
  244. @keyframes show3 {
  245.     0%{
  246.         opacity: 1;
  247.         transform: rotateY(90deg);
  248.     }
  249.     100%{
  250.         opacity: 1;
  251.         transform: rotateY(360deg);
  252.     }
  253. }
  254.  
  255. /* 为每个字符添加动画 */
  256. .box div:nth-child(1){
  257.     animation: show12 1.2s linear forwards;
  258.     animation-iteration-count: 2;
  259.     animation-delay: 0.2s;
  260. }
  261. .box div:nth-child(2){
  262.     animation: show12 1.2s linear forwards;
  263.     animation-iteration-count: 2;
  264.     animation-delay: 0.4s;
  265. }
  266. .box div:nth-child(3){
  267.     animation: show3 1s linear 1 forwards;
  268.     animation-delay: 0.7s;
  269. }
  270. .box div:nth-child(4){
  271.     animation: show3 1s linear 1 forwards;
  272.     animation-delay: 0.9s;
  273. }
  274. .box div:nth-child(5){
  275.     animation: show3 1s linear 1 forwards;
  276.     animation-delay: 1.1s;
  277. }
  278. .box div:nth-child(6){
  279.     animation: show3 1.2s linear 1 forwards;
  280.     animation-delay: 1.3s;
  281. }
  282. .box div:nth-child(7){
  283.     animation: show3 1.2s linear 1 forwards;
  284.     animation-delay: 1.6s;
  285. }
  286.     </style>
  287. </head>
  288.  
  289. <body>
  290.     <div class="box">
  291.         <div class="chars">l</div>
  292.         <div class="chars">q</div>
  293.         <div class="chars">j</div>
  294.         <div class="chars">_</div>
  295.         <div class="chars">本</div>
  296.         <div class="chars">人</div>
  297.         <div class="chars">csdn</div>
  298.         <div class="ll a"></div>
  299.         <div class="ll n"></div>
  300.         <div class="ll i"></div>
  301.         <div class="ll p"></div>
  302.         <div class="ll l"></div>
  303.         <div class="ll e"></div>
  304.         <div class="ll x"></div>
  305.         <div class="pcov"></div>
  306.     </div>
  307. </body>
  308.  
  309. </html>

2.每个文字闪光logo效果

 代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7.  
  8.     <title>字体发光效果logo</title>
  9.     <style>
  10.         *{
  11.     /* 初始化 取消页面元素的内外边距 */
  12.     margin: 0;
  13.     padding: 0;
  14. }
  15. .container{
  16.     /* 100%窗口高度 */
  17.     height: 100vh;
  18.     /* 弹性布局 水平、垂直居中 */
  19.     display: flex;
  20.     justify-content: center;
  21.     align-items: center;
  22.     background-color: #000;
  23. }
  24. span{
  25.     font-size: 100px;
  26.     font-weight: bold;
  27.     color: #111;
  28.     /* 大写 */
  29.     text-transform: uppercase;
  30.     /* 字间距 */
  31.     letter-spacing: 5px;
  32.     /* 模糊滤镜 */
  33.     filter: blur(2px);
  34.     /* 执行动画：动画名称 时长 线性的 无限次播放 */
  35.     animation: animate 2.5s linear infinite;
  36. }
  37. /* 接下来为每一个span元素设置动画延迟时间 */
  38. span:nth-child(1){
  39.     animation-delay: 0s;
  40. }
  41. span:nth-child(2){
  42.     animation-delay: 0.25s;
  43. }
  44. span:nth-child(3){
  45.     animation-delay: 0.5s;
  46. }
  47. span:nth-child(4){
  48.     animation-delay: 0.75s;
  49. }
  50. span:nth-child(5){
  51.     animation-delay: 1s;
  52. }
  53. span:nth-child(6){
  54.     animation-delay: 1.25s;
  55. }
  56. span:nth-child(7){
  57.     animation-delay: 1.5s;
  58. }
  59. span:nth-child(8){
  60.     animation-delay: 1.75s;
  61. }
  62. span:nth-child(9){
  63.     animation-delay: 2s;
  64. }
  65. span:nth-child(10){
  66.     animation-delay: 2.25s;
  67. }
  68.  
  69. /* 定义动画 */
  70. @keyframes animate {
  71.     0%,100%{
  72.         color: rgb(255, 255, 255);
  73.         /* 模糊滤镜 */
  74.         filter: blur(2px);
  75.         /* 文字阴影 */
  76.         text-shadow: 
  77.         0 0 10px #ff5e00,
  78.         0 0 20px #d1ff02,
  79.         0 0 30px #32ff7e,
  80.         0 0 40px #00a2ff,
  81.         0 0 100px #5900ff,
  82.         0 0 200px #32ff7e,
  83.         0 0 300px #ff009d,
  84.         0 0 400px #32ff7e
  85.         ;
  86.     }
  87.     5%,95%{
  88.         color: #111;
  89.         filter: blur(0px);
  90.         text-shadow: none;
  91.     }
  92. }
  93.     </style>
  94. </head>
  95.  
  96. <body>
  97.     <div class="container">
  98.         <span>l</span>
  99.         <span>q</span>
  100.         <span>j</span>
  101.         <span>_</span>
  102.         <span>本</span>
  103.         <span>人</span>
  104.         <span>C</span>
  105.         <span>S</span>
  106.         <span>D</span>
  107.         <span>N</span>
  108.     </div>
  109. </body>
  110.  
  111. </html>

3.文字滚动logo效果

 代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7.  
  8.     <title>超酷的文字滚动特效</title>
  9.     <style>
  10.         *{
  11.     /* 初始化 取消页面元素的内外边距 */
  12.     margin: 0;
  13.     padding: 0;
  14. }
  15. body{
  16.     /* 100%窗口高度 */
  17.     height: 100vh;
  18.     background-color: #f2be45;
  19.     /* 相对定位 */
  20.     position: relative;
  21.     /* 执行背景颜色变化的动画：动画名 时长 线性的 停留在最后一帧 */
  22.     animation: changeBg 2.5s linear forwards;
  23. }
  24. /* 添加祝贺文本 */
  25. .container::before,
  26. .container::after{
  27.     /* 绝对定位 */
  28.     position: absolute;
  29.     top: 5%;
  30.     color: #f2be45;
  31.     font-size: 70px;
  32.     font-weight: bold;
  33.     /* 执行显示祝贺文本的动画 */
  34.     animation: showText 2.5s linear forwards;
  35. }
  36. .container::before{
  37.     content: "CSDN";
  38.     left: 5%;
  39.     /* 沿X轴倾斜15度 */
  40.     transform: skewX(15deg);
  41. }
  42. .container::after{
  43.     content: "我的超人";
  44.     right: 5%;
  45.     /* 沿X轴倾斜-15度 */
  46.     transform: skewX(-15deg);
  47. }
  48. .letter{
  49.     font-size: 160px;
  50.     font-weight: bold;
  51.     color: #725e82;
  52.     /* 转大写 */
  53.     text-transform: uppercase;
  54.     /* 绝对固定定位 */
  55.     position: fixed;
  56. }
  57. .letter span{
  58.     /* 弹性布局 水平、垂直居中 */
  59.     display: flex;
  60.     justify-content: center;
  61.     align-items: center;
  62.     width: 180px;
  63.     height: 200px;
  64. }
  65. .letter.letter1{
  66.     left: calc(50% - 270px);
  67.     top: -400px;
  68.     /* 执行动画：动画名 时长 加速后减速 */
  69.     animation: letter1Animate 2.5s ease-in-out;
  70. }
  71. .letter.letter2{
  72.     left: calc(50% - 90px);
  73.     top: -200px;
  74.     /* 执行动画：动画名 时长 加速后减速 */
  75.     animation: letter2Animate 2.5s ease-in-out;
  76. }
  77. .letter.letter3{
  78.     left: calc(50% + 90px);
  79.     top: -800px;
  80.     /* 执行动画：动画名 时长 加速后减速 */
  81.     animation: letter3Animate 2.5s ease-in-out;
  82. }
  83. .letter .check{
  84.     color: #f2be45;
  85. }
  86.  
  87. /* 定义动画 */
  88. /* 改变背景颜色 */
  89. @keyframes changeBg {
  90.     0%{
  91.         background-color: #f2be45;
  92.     }
  93.     100%{
  94.         background-color: #725e82;
  95.     }
  96. }
  97. /* 第一个字母的滚动动画 */
  98. @keyframes letter1Animate {
  99.     0%{
  100.         top: -2000px;
  101.     }
  102.     100%{
  103.         top: -400px;
  104.         color: #725e82;
  105.     }
  106. }
  107. /* 第二个字母的滚动动画 */
  108. @keyframes letter2Animate {
  109.     0%{
  110.         top: -4000px;
  111.     }
  112.     100%{
  113.         top: -200px;
  114.         color: #725e82;
  115.     }
  116. }
  117. /* 第三个字母的滚动动画 */
  118. @keyframes letter3Animate {
  119.     0%{
  120.         top: -3000px;
  121.     }
  122.     100%{
  123.         top: -800px;
  124.         color: #725e82;
  125.     }
  126. }
  127. /* 显示祝贺文本 */
  128. @keyframes showText {
  129.     0%{
  130.         color: #f2be45;
  131.     }
  132.     98%{
  133.         color: #725e82;
  134.         text-shadow: none;
  135.     }
  136.     100%{
  137.         color: #fff;
  138.         /* 文字阴影 */
  139.         text-shadow: 5px 5px 0 #f2be45;
  140.     }
  141. }
  142.     </style>
  143. </head>
  144.  
  145. <body>
  146.     <div class="container">
  147.         <div class="letter letter1">
  148.             <span>a</span>
  149.             <span>b</span>
  150.             <span>c</span>
  151.             <span>d</span>
  152.             <span class="check">l</span>
  153.             <span>f</span>
  154.             <span>g</span>
  155.             <span>h</span>
  156.             <span>i</span>
  157.             <span>j</span>
  158.             <span>k</span>
  159.             <span>l</span>
  160.             <span>m</span>
  161.             <span>n</span>
  162.             <span>o</span>
  163.             <span>p</span>
  164.             <span>q</span>
  165.             <span>r</span>
  166.             <span>s</span>
  167.             <span>t</span>
  168.             <span>u</span>
  169.             <span>v</span>
  170.             <span>w</span>
  171.             <span>x</span>
  172.             <span>y</span>
  173.             <span>z</span>
  174.         </div>
  175.         <div class="letter letter2">
  176.             <span>a</span>
  177.             <span>b</span>
  178.             <span>c</span>
  179.             <span class="check">q</span>
  180.             <span>e</span>
  181.             <span>f</span>
  182.             <span>g</span>
  183.             <span>h</span>
  184.             <span>i</span>
  185.             <span>j</span>
  186.             <span>k</span>
  187.             <span>l</span>
  188.             <span>m</span>
  189.             <span>n</span>
  190.             <span>o</span>
  191.             <span>p</span>
  192.             <span>q</span>
  193.             <span>r</span>
  194.             <span>s</span>
  195.             <span>t</span>
  196.             <span>u</span>
  197.             <span>v</span>
  198.             <span>w</span>
  199.             <span>x</span>
  200.             <span>y</span>
  201.             <span>z</span>
  202.         </div>
  203.         <div class="letter letter3">
  204.             <span>a</span>
  205.             <span>b</span>
  206.             <span>c</span>
  207.             <span>d</span>
  208.             <span>e</span>
  209.             <span>f</span>
  210.             <span class="check">j</span>
  211.             <span>h</span>
  212.             <span>i</span>
  213.             <span>j</span>
  214.             <span>k</span>
  215.             <span>l</span>
  216.             <span>m</span>
  217.             <span>n</span>
  218.             <span>o</span>
  219.             <span>p</span>
  220.             <span>q</span>
  221.             <span>r</span>
  222.             <span>s</span>
  223.             <span>t</span>
  224.             <span>u</span>
  225.             <span>v</span>
  226.             <span>w</span>
  227.             <span>x</span>
  228.             <span>y</span>
  229.             <span>z</span>
  230.         </div>
  231.     </div>
  232. </body>
  233.  
  234. </html>

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

代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7.  
  8.     <title>流星划过天际的背景效果</title>
  9.     <style>
  10.         *{
  11.     /* 初始化 */
  12.     margin: 0;
  13.     padding: 0;
  14. }
  15. body{
  16.     /* 100%窗口高度 */
  17.     height: 100vh;
  18.     /* 溢出隐藏 */
  19.     overflow: hidden;
  20. }
  21. .container{
  22.     /* 绝对定位 */
  23.     position: absolute;
  24.     top: 0;
  25.     left: 0;
  26.     width: 100%;
  27.     height: 100%;
  28.     background: url("space.jpg") no-repeat;
  29.     /* 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域 */
  30.     background-size: cover;
  31.     /* 定位背景图像为正中间 */
  32.     background-position-x: center;
  33.     /* 执行动画：动画名称 时长 线性的 无限次播放 */
  34.     animation: animateBg 5s linear infinite;
  35. }
  36. span{
  37.     position: absolute;
  38.     top: 50%;
  39.     left: 50%;
  40.     width: 4px;
  41.     height: 4px;
  42.     background-color: rgb(196, 4, 4);
  43.     border-radius: 50%;
  44.     /* 发光效果 */
  45.     box-shadow: 0 0 0 4px rgba(255,255,255,0.1),
  46.     0 0 0 8px rgba(255,255,255,0.1),
  47.     0 0 20px rgba(255,255,255,1);
  48.     /* 执行动画 */
  49.     animation: animate 3s linear infinite;
  50. }
  51. /* 拖尾效果 */
  52. span::before{
  53.     content: "";
  54.     position: absolute;
  55.     top: 50%;
  56.     transform: translateY(-50%);
  57.     width: 300px;
  58.     height: 3px;
  59.     background: linear-gradient(90deg,rgb(251, 255, 4),transparent);
  60. }
  61. /* 接下来分别为每一个流星设置位置、动画延迟时间、动画时长 */
  62. span:nth-child(1){
  63.     top: 0;
  64.     right: 0;
  65.     /* initial关键字用于设置CSS属性为它的默认值 */
  66.     left: initial;
  67.     /* 动画延迟时间 */
  68.     animation-delay: 0s;
  69.     /* 动画时长 */
  70.     animation-duration: 1s;
  71. }
  72. span:nth-child(2){
  73.     top: 0;
  74.     right: 80px;
  75.     left: initial;
  76.     animation-delay: 0.2s;
  77.     animation-duration: 3s;
  78. }
  79. span:nth-child(3){
  80.     top: 80px;
  81.     right: 0;
  82.     left: initial;
  83.     animation-delay: 0.4s;
  84.     animation-duration: 2s;
  85. }
  86. span:nth-child(4){
  87.     top: 0;
  88.     right: 180px;
  89.     left: initial;
  90.     animation-delay: 0.6s;
  91.     animation-duration: 1.5s;
  92. }
  93. span:nth-child(5){
  94.     top: 0;
  95.     right: 400px;
  96.     left: initial;
  97.     animation-delay: 0.8s;
  98.     animation-duration: 2.5s;
  99. }
  100. span:nth-child(6){
  101.     top: 0;
  102.     right: 600px;
  103.     left: initial;
  104.     animation-delay: 1s;
  105.     animation-duration: 3s;
  106. }
  107. span:nth-child(7){
  108.     top: 300px;
  109.     right: 0;
  110.     left: initial;
  111.     animation-delay: 1.2s;
  112.     animation-duration: 1.75s;
  113. }
  114. span:nth-child(8){
  115.     top: 0;
  116.     right: 700px;
  117.     left: initial;
  118.     animation-delay: 1.4s;
  119.     animation-duration: 1.25s;
  120. }
  121. span:nth-child(9){
  122.     top: 0;
  123.     right: 1000px;
  124.     left: initial;
  125.     animation-delay: 0.75s;
  126.     animation-duration: 2.25s;
  127. }
  128. span:nth-child(10){
  129.     top: 0;
  130.     right: 450px;
  131.     left: initial;
  132.     animation-delay: 2.75s;
  133.     animation-duration: 2.25s;
  134. }
  135.  
  136. /* 定义动画 */
  137. /* 背景缩放动画 */
  138. @keyframes animateBg {
  139.     0%,100%{
  140.         transform: scale(1);
  141.     }
  142.     50%{
  143.         transform: scale(1.2);
  144.     }
  145. }
  146. /* 流星划过动画 */
  147. @keyframes animate {
  148.     0%{
  149.         transform: rotate(315deg) translateX(0);
  150.         opacity: 1;
  151.     }
  152.     90%{
  153.         opacity: 1;
  154.     }
  155.     100%{
  156.         transform: rotate(315deg) translateX(-1000px);
  157.         opacity: 0;
  158.     }
  159. }
  160.     </style>
  161. </head>
  162.  
  163. <body>
  164.     <div class="container">
  165.         <!-- 10个span -->
  166.         <span></span>
  167.         <span></span>
  168.         <span></span>
  169.         <span></span>
  170.         <span></span>
  171.         <span></span>
  172.         <span></span>
  173.         <span></span>
  174.         <span></span>
  175.         <span></span>
  176.     </div>
  177. </body>
  178.  
  179. </html>

5.点击爱心button效果

 代码：

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.     <meta http-equiv="content-type" content="text/html; charset=utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
  7.  
  8.     <title>点击爱心button的动画效果</title>
  9.     <style>
  10.         *{
  11.     /* 初始化 */
  12.     margin: 0;
  13.     padding: 0;
  14. }
  15. body{
  16.     background: rgb(6, 216, 253);
  17.     /* 100%窗口高度 */
  18.     height: 100vh;
  19.     /* 弹性布局 居中 */
  20.     display: flex;
  21.     justify-content: center;
  22.     align-items: center;
  23.     /* 自定义属性，可通过var函数对其调用 */
  24.     --c: #ff6b81;
  25. }
  26. svg{
  27.     width: 200px;
  28.     /* 相对定位 */
  29.     position: relative;
  30.     /* z-index: 10; */
  31. }
  32. #heart{
  33.     /* 填充颜色 */
  34.     fill: #eee;
  35.     /* stroke属性可应用于任何种类的线条，文字和元素，就像一个圆的轮廓 */
  36.     stroke: var(--c);
  37.     /* 线条宽度 */
  38.     stroke-width: 40px;
  39.     /* 设置线条为虚线，虚线的长度 */
  40.     stroke-dasharray: 2600;
  41.     /* 线条的位移 */
  42.     stroke-dashoffset: 2600;
  43.     /* 端点为圆头 */
  44.     stroke-linecap: round;
  45. }
  46. span{
  47.     display: block;
  48.     width: 24px;
  49.     height: 24px;
  50.     background-color: transparent;
  51.     border-radius: 50%;
  52.     /* 绝对定位 居中 */
  53.     position: absolute;
  54.     top: 50%;
  55.     left: 50%;
  56.     transform: translate(-50%,-50%) scale(0);
  57.     /* 设置各个方向的阴影 */
  58.     /* 通过var函数调用自定义属性--c,设置阴影颜色 */
  59.     box-shadow: 0 -160px 0 var(--c),
  60.     0 160px 0 var(--c),
  61.     -160px 0 0 var(--c),
  62.     160px 0 0 var(--c),
  63.     -120px -120px 0 var(--c),
  64.     120px -120px 0 var(--c),
  65.     120px 120px 0 var(--c),
  66.     -120px 120px 0 var(--c);
  67. }
  68. /* 勾选复选框执行各个动画 */
  69. #checkbox:checked + svg #heart{
  70.     /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
  71.     animation: drawHeart 1s linear forwards;
  72. }
  73. #checkbox:checked ~ span{
  74.     /* 执行动画: 动画名 时长 加速后减速 停留在最后一帧 */
  75.     animation: blink 0.5s ease-in-out forwards;
  76.     /* 动画延迟时间 */
  77.     animation-delay: 0.85s;
  78. }
  79. #checkbox:checked + svg{
  80.     /* 执行动画: 动画名 时长 线性的 停留在最后一帧 */
  81.     animation: beat 1s linear forwards;
  82. }
  83. label{
  84.     /* 鼠标移入,光标变小手 */
  85.     cursor: pointer;
  86. }
  87.  
  88. /* 定义动画 */
  89. /* 画心的动画 */
  90. @keyframes drawHeart {
  91.     0%{
  92.         stroke-dashoffset: 2600;
  93.     }
  94.     80%{
  95.         fill: #eee;
  96.         stroke-dashoffset: 0;
  97.     }
  98.     100%{
  99.         fill: var(--c);
  100.         stroke-dashoffset: 0;
  101.     }
  102. }
  103. /* 小圆点闪出的动画 */
  104. @keyframes blink {
  105.     0%{
  106.         transform: translate(-50%,-50%) scale(0.5);
  107.         opacity: 0.8;
  108.     }
  109.     50%{
  110.         transform: translate(-50%,-50%) scale(1);
  111.         opacity: 1;
  112.     }
  113.     100%{
  114.         transform: translate(-50%,-50%) scale(1.1);
  115.         opacity: 0;
  116.     }
  117. }
  118. /* 心跳动的动画 */
  119. @keyframes beat {
  120.     0%{
  121.         transform: scale(1);
  122.     }
  123.     70%{
  124.         transform: scale(1);
  125.     }
  126.     80%{
  127.         transform: scale(1.2);
  128.     }
  129.     100%{
  130.         transform: scale(1);
  131.     }
  132. }
  133.     </style>
  134. </head>
  135.  
  136. <body>
  137.     <label for="checkbox">
  138.         <input type="checkbox" id="checkbox" hidden>
  139.         <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>
  140.         <span></span>
  141.     </label>
  142. </body>
  143.  
  144. </html>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/92702
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号