中国红客联盟国际站联盟介绍联盟架构联盟文化联盟事记联盟邮箱购买特权捐助我们收藏本站
请登录
立即注册
首页Portal
资讯
圈子Group
贡献榜
关于我们
红客起源事记
搜索
当前位置:»交流社区 › 中国红客联盟【技术分享区】 › 编程代码交流 › HTML+CSS制作心跳特效的实现

[前端] HTML+CSS制作心跳特效的实现

1685 0
Honkers 2022-10-19 15:31:33 | 显示全部楼层 |阅读模式
今天来制作一个简单的心跳效果，不需要很多代码，添加一个盒子，充分利用CSS展现就可以啦。
1.首先我们在页面添加一个可视化的盒子
  1. <body>
  2.         <div class="heart"></div>
  3. </body>
复制代码
2.然后给它先变成一颗心
  1.     .heart{
  2.                 position:relative;
  3.                 width:100px;
  4.                 height:100px;
  5.                 margin:100px;
  6.          }
复制代码
  1. .heart:after,
  2. .heart:before{
  3.         position:absolute;
  4.         width:60px;
  5.         height:100%;
  6.         background-color:#ff6666;
  7.         content:"";
  8.         border-radius:50% 50% 0 0;
  9. }
  10. .heart:before{
  11.         left:0;
  12.         transform:rotate(-52deg);
  13. }
  14. .heart:after{
  15.         right:0;
  16.         transform:rotate(49deg);
  17. }
复制代码
3.最后设置一下动画animation，这里要说一下animation必须和@keyframes一起用哦，因为动画没有动画帧还怎么动吖，就像你用筷子用两根一样，肯定不用一根对叭。
  1. animation:scale 1s linear infinite;
  2.            /*名称 1s 匀速 无限循环*/
复制代码
我们让它水平垂直两倍缩放
  1. @keyframes scale{   /*动画帧*/
  2.                 50%{transform:scale(2)}
  3.         }
复制代码
然后我们看一下效果


哈哈，有点丑，不喜欢的伙伴可以自己再去改一改外貌，毕竟个人审美有限哈哈哈，第一次写博客有点不知道怎么表达，反正过程都在这里啦，下面源代码送上~
  1. <!doctype html>
  2. <html>
  3.   <head>
  4.   <meta charset="UTF-8">
  5.   <title>心跳效果</title>
  6.   <style>
  7.         *{margin:0; padding:0;}
  8.         li{list-style:none;}
  9.         a{text-decoration:none;}
  11.         .heart{
  12.                 position:relative;
  13.                 width:100px;
  14.                 height:100px;
  15.                 margin:100px;
  16.                 animation:scale 1s linear infinite;  
  17.                 /*名称 1s 匀速 无限循环*/
  18.         }
  19.         @keyframes scale{   /*必须和animation一起用  动画帧*/
  20.                 50%{transform:scale(2)}
  21.         }
  22.         .heart:after,
  23.         .heart:before{
  24.                 position:absolute;
  25.                 width:60px;
  26.                 height:100%;
  27.                 background-color:#ff6666;
  28.                 content:"";
  29.                 border-radius:50% 50% 0 0;
  30.         }
  31.         .heart:before{
  32.                 left:0;
  33.                 transform:rotate(-52deg);
  34.         }
  35.         .heart:after{
  36.                 right:0;
  37.                 transform:rotate(49deg);
  38.         }
  39.   </style>
  40. </head>
  42. <!-- 可视化区域-->
  43. <body>
  44.         <div class="heart"></div>
  45. </body>
  46. </html>
复制代码
到此这篇关于HTML+CSS制作心跳特效的实现的文章就介绍到这了,更多相关HTML+CSS心跳内容请搜索中国红客联盟以前的文章或继续浏览下面的相关文章，希望大家以后多多支持中国红客联盟！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

×
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Honkers

特级红客

关注
  • 3142
    主题
  • 36
    粉丝
  • 0
    关注
这家伙很懒，什么都没留下！

中国红客联盟公众号

联系站长QQ：5520533

admin@chnhonker.com
Copyright © 2001-2025 Discuz Team. Powered by Discuz! X3.5 ( 粤ICP备13060014号 )|天天打卡 本站已运行天