个人摄影作品网站,金融行业网站开发,怎么购买国外服务器,江门市网站开发前端萌新别慌#xff1a;用HTMLCSS画个会跳动的心#xff0c;表白神器速成#xff01;前端萌新别慌#xff1a;用HTMLCSS画个会跳动的心#xff0c;表白神器速成#xff01;先泼点冷水#xff1a;这玩意儿其实土得掉渣心形到底怎么画出来的#xff1f;几何…前端萌新别慌用HTMLCSS画个会跳动的心表白神器速成前端萌新别慌用HTMLCSS画个会跳动的心表白神器速成先泼点冷水这玩意儿其实土得掉渣心形到底怎么画出来的几何暴力美学让它动起来别只会linear了行吗这方案香在哪坑又在哪说点实在的实际项目里谁在用这玩意儿写完发现心不动排查指南收好几个骚操作让你的心更带感写在最后代码有价真心无价前端萌新别慌用HTMLCSS画个会跳动的心表白神器速成说真的我到现在都没想明白为啥每个前端教程都喜欢拿心形当入门案例就那个♥符号你不管是在菜鸟教程、MDN还是某乎专栏总能看到它的身影。一开始我以为这是技术圈的浪漫传统后来琢磨明白了——纯粹因为这玩意儿几何结构够简单两个圆怼一起再转个45度就完事比画星星画月亮省事多了。但别急着关页面虽然原理简单真要把心跳效果做出噗通噗通的质感里面门道还真不少。今天咱就不搞那些虚头巴脑的理论直接上手撸代码争取让你看完这篇文章不仅能复制粘贴去发朋友圈还能搞清楚每一行CSS到底在干啥。先泼点冷水这玩意儿其实土得掉渣先别幻想用这个去表白成功啊除非对方也是前端。你要真拿着个会动的红心页面去追人大概率会得到一句哦网页会动啊然后呢的死亡回应。但话说回来作为练手项目它确实完美——不涉及JS逻辑不依赖第三方库连网络不好的时候都能本地打开看效果。而且你别说这种看似简单的CSS动画在实际项目里出场率还挺高。 loading状态、空状态页面、节日活动彩蛋甚至某些复古风格的个人博客都能看到这种土味浪漫的身影。掌握了这个至少以后改需求的时候你能淡定地说“这效果简单给我十分钟。”心形到底怎么画出来的几何暴力美学很多人第一反应是找个PNG图片贴上或者直接用SVG画路径。但咱既然标题说了HTMLCSS纯手写那就得用div硬刚出来。原理其实挺粗暴的两个圆形当肩膀中间一个旋转的正方形当身体拼起来就是个心形。来看看这个经典的CSS几何拼装术!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleCSS心跳效果/titlestyle*{margin:0;padding:0;box-sizing:border-box;}body{height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);/* 先来个骚气的渐变背景显得咱们很专业 */}.heart-container{position:relative;width:100px;height:100px;/* 这个容器就是用来定位的实际的心形是绝对定位在里面 */}.heart{position:absolute;width:50px;height:50px;background-color:#ff4757;transform:rotate(-45deg);/* 核心来了先转45度让这个正方形斜过来 */left:25px;top:25px;box-shadow:-10px 10px 90px #ff4757;/* 加个发光阴影氛围感拉满 */}/* 左边的圆 */.heart::before{content:;position:absolute;width:50px;height:50px;background-color:#ff4757;border-radius:50%;/* 搞成圆形 */top:-25px;left:0;/* 往上挪半个身位刚好卡在正方形左上角 */}/* 右边的圆 */.heart::after{content:;position:absolute;width:50px;height:50px;background-color:#ff4757;border-radius:50%;/* 同样圆形 */top:0;left:25px;/* 往右挪卡在右上角 */}/style/headbodydivclassheart-containerdivclassheart/div/div/body/html看到没就这点代码一个红心就出来了。重点在于伪元素::before和::after的使用这俩货分别扮演左右两个心房。transform: rotate(-45deg)是关键如果不旋转你得到的就只是个菱形转完才对味。这里有个坑得提醒一下很多新手会疑惑为啥要设position: absolute还用那么多像素值计算。其实这就是CSS绘图的痛点——你得像做手工一样一点点调整位置。上面代码里正方形是50x50两个圆也是50x50直径然后分别向上和向右偏移25px刚好是半径长度这样拼起来才严丝合缝。要是你觉得尺寸不合适想搞个大点的心记住一个公式圆的直径正方形的边长圆的偏移量边长的一半。比如你想搞个100px的心那正方形就100x100两个圆也100x100分别偏移50px。别问我为啥知道这个问就是调了半小时发现的规律。让它动起来别只会linear了行吗静态的心只是图片会跳的心才是灵魂。但这里有个误区我见过太多人直接写个animation: heartbeat 1s linear infinite然后抱怨这动画看起来好机械。废话linear是匀速运动真实的心跳是噗通——停顿——噗通有节奏的你得用贝塞尔曲线啊兄弟来看看专业的心跳节奏怎么写.heart{position:absolute;width:50px;height:50px;background-color:#ff4757;transform:rotate(-45deg);left:25px;top:25px;box-shadow:-10px 10px 90px #ff4757;/* 动画三要素名称 时长 循环 */animation:heartbeat 1.5s ease-in-out infinite;/* 等等先别急着复制下面还有个更好的版本 */}/* 高级版本的心跳动画 */keyframesheartbeat{0%{transform:rotate(-45deg)scale(1);/* 注意这里要保留rotate不然动画会覆盖掉之前的旋转 */}15%{transform:rotate(-45deg)scale(1.3);/* 第一下猛跳收缩期 */}30%{transform:rotate(-45deg)scale(1);/* 回弹 */}45%{transform:rotate(-45deg)scale(1.15);/* 第二下弱跳舒张期 */}60%{transform:rotate(-45deg)scale(1);/* 恢复原状 */}100%{transform:rotate(-45deg)scale(1);/* 保持静止直到下一轮 */}}看出来门道没真实的心跳是有主次之分的——咚那一下强哒那一下弱中间还有停顿。所以我在15%的时候设了1.3倍缩放45%的时候只有1.15倍剩下的时间都在摸鱼。这样看起来才有那种生命感不然就是抽风。但上面那个其实还不够丝滑CSS高手通常会用cubic-bezier来精确控制节奏.heart{animation:heartbeat 1.5scubic-bezier(0.215,0.61,0.355,1)infinite;}keyframesheartbeat{0%{transform:rotate(-45deg)scale(0.95);}5%{transform:rotate(-45deg)scale(1.1);}10%{transform:rotate(-45deg)scale(0.95);}15%{transform:rotate(-45deg)scale(1.3);}50%{transform:rotate(-45deg)scale(0.95);}100%{transform:rotate(-45deg)scale(0.95);}}这个cubic-bezier(0.215, 0.61, 0.355, 1)是啥意思简单说就是先快后慢模拟那种突然收缩然后慢慢回弹的感觉。你要嫌麻烦直接用ease-in-out也行但效果会打点折扣。还有个细节特别容易忽略transform-origin。默认情况下元素变形是以中心点为基准的但咱们这个心形是拼出来的中心点位置很微妙。如果你发现心跳的时候心形在漂移或者左右晃动那就是变形基准点不对。解决方案是.heart{transform-origin:center;/* 或者更精确点 */transform-origin:25px 25px;/* 根据你的实际尺寸调整 */}我之前就踩过这个坑心形跳动的时候像个陀螺一样转圈检查半天才发现是transform-origin默认值在作祟。这方案香在哪坑又在哪说点实在的先说好听的。这玩意儿最大的优点就是轻量真·零依赖。你哪怕把代码截图发给别人对方手动敲进记事本改个.html后缀都能跑不需要npm install不需要webpack打包甚至不需要联网。在现在这个大前端时代动不动就是一个项目几百MB依赖这种几KB就能跑的原生方案简直是股清流。兼容性也是杠杠的。只要不用太新的CSS特性IE11都能凑合看虽然心跳可能会有点卡顿但至少形状是对的。移动端更不用说了iOS Safari和Chrome通吃性能消耗微乎其微。但缺点也得实话实说。首先你想在这个心上加复杂交互比如点击爆炸成粒子或者根据鼠标位置产生视差效果纯CSS就力不从心了。这时候还得请JS出山或者干脆上Canvas。其次响应式布局的时候有点烦。因为心形是用固定像素拼出来的你要想让它随屏幕大小自适应得用vw/vh单位或者媒体查询重新计算所有尺寸。不像SVG那样直接改个viewBox就能自动缩放。还有颜色控制也受限。咱现在用的是纯色背景如果你想搞个渐变填充的心你会发现background: linear-gradient不能直接应用到伪元素上得用background-clip: text之类的hack或者干脆把渐变写在父容器上心形做成透明镂空。麻烦得很。实际项目里谁在用这玩意儿你可能觉得这就是个玩具但事实上这种简单的CSS动画在商业项目里挺常见的。最常见的是登录页的loading状态。用户点击登录按钮后显示一个跳动的心配文正在连接服务器…既缓解了等待焦虑又比单纯的转圈圈loading看着有温度。特别是那些社交类APP heart本来就是核心icon用它做loading毫无违和感。还有404页面。有些产品的404不整那些枯燥的页面找不到了而是画个破碎的心或者先显示完整的心然后裂开配合文案连接已断开情感化设计做得飞起。用户看到反而会觉得有趣甚至截图发朋友圈。情人节活动H5更是重灾区。各种测测你们的恋爱指数、给TA送颗心之类的活动页全靠这种CSS动画撑场面。 advantages? 开发快啊活动页生命周期就几天没必要上复杂动画库直接写几行CSS搞定下午提需求晚上就能上线。甚至某些音乐播放器的视觉化效果也会用这个。心跳节奏跟着BPM走虽然精度不高但做个氛围足够了。写完发现心不动排查指南收好我知道你现在可能已经在本地建了个html文件试了结果发现心形静静躺在那儿像个标本完全不动。别慌按这个 checklist 检查第一检查动画名称拼写/* 错误示范 */animation:heartbeet 1s infinite;/* 拼错了是beat不是beet *//* 正确写法 */animation:heartbeat 1s infinite;这种 typo 我一周至少犯三次特别是深夜加班的时候。第二检查关键帧定义/* 很多人容易写成这样 */keyframesheartbeat{from{transform:scale(1);}to{transform:scale(1.2);}}/* 但别忘了.heart本身就有rotate(-45deg) *//* 如果在keyframe里只写scale会覆盖掉rotate心形就摆正了看起来像正方形在伸缩 */所以记住在keyframes里必须同时保留rotate和scalekeyframesheartbeat{0%{transform:rotate(-45deg)scale(1);}100%{transform:rotate(-45deg)scale(1.2);}}第三检查animation属性是否生效有时候样式被覆盖了你可以打开浏览器的开发者工具F12选中那个心形元素看看Styles面板里animation属性有没有被划掉。如果被划掉了说明优先级不够加个!important试试或者提高选择器权重。第四检查transform-origin如果心形跳动的时候看起来像是在漂移而不是原地缩放那就是变形中心点不对。默认是center但咱们的几何拼装可能导致实际视觉中心偏离几何中心。试试.heart{transform-origin:50% 50%;/* 这是默认值如果不行就试试具体像素 *//* 或者 */transform-origin:center bottom;/* 让心形从底部开始跳动更像真实心脏 */}第五浏览器前缀2024年了应该不需要但以防万一如果你用的是十年前的浏览器可能需要加前缀.heart{-webkit-animation:heartbeat 1s infinite;-moz-animation:heartbeat 1s infinite;animation:heartbeat 1s infinite;}-webkit-keyframesheartbeat{/* ... */}-moz-keyframesheartbeat{/* ... */}keyframesheartbeat{/* ... */}不过现代浏览器都支持标准写法了除非你是在给博物馆里的IE做维护。几个骚操作让你的心更带感基础版本玩腻了来整点花的。骚操作一渐变色填充纯色太单调咱们搞个骚粉渐变.heart, .heart::before, .heart::after{background:linear-gradient(45deg,#ff6b6b,#feca57);/* 注意三个部分都要设置不然只有身体是渐变两个心房还是纯色 */}但这里有个坑伪元素继承的是父元素的背景如果是渐变角度可能会乱。稳妥点的方法是分别设置或者用一个全局的CSS变量控制颜色。骚操作二hover加速鼠标放上去心跳加速模拟心动的感觉.heart{animation:heartbeat 1.5s ease-in-out infinite;transition:animation-duration 0.3s;/* 注意这行其实没用动画duration不能用transition过渡 */}/* 正确做法是用不同的animation */.heart:hover{animation:heartbeat-fast 0.8s ease-in-out infinite;}keyframesheartbeat-fast{0%{transform:rotate(-45deg)scale(1);}15%{transform:rotate(-45deg)scale(1.3);}30%{transform:rotate(-45deg)scale(1);}45%{transform:rotate(-45deg)scale(1.15);}60%{transform:rotate(-45deg)scale(1);}100%{transform:rotate(-45deg)scale(1);}}看到没hover的时候换个动画名称时间缩短到0.8秒立马就有那种看到喜欢的人心跳加速的感觉了。细节这就是细节。骚操作三多层叠加做出立体感一个心太单薄咱们叠三层每层错开一点时间和透明度divclassheart-containerdivclassheart heart-1/divdivclassheart heart-2/divdivclassheart heart-3/div/div.heart-container{position:relative;width:100px;height:100px;}.heart-1, .heart-2, .heart-3{position:absolute;width:50px;height:50px;background-color:#ff4757;transform:rotate(-45deg);left:25px;top:25px;opacity:0.3;}.heart-1{animation:heartbeat 1.5s ease-in-out infinite;opacity:0.3;transform:rotate(-45deg)scale(1.2);/* 大一点 */}.heart-2{animation:heartbeat 1.5s ease-in-out 0.2s infinite;/* 延迟0.2秒 */opacity:0.6;transform:rotate(-45deg)scale(1.1);}.heart-3{animation:heartbeat 1.5s ease-in-out 0.4s infinite;/* 延迟0.4秒 */opacity:1;transform:rotate(-45deg)scale(1);}/* 伪元素的样式也要分别设置这里省略了和基础版一样 */这个效果贼帅三层心形依次跳动像回声一样视觉冲击力拉满。用在 Loading 页面上用户等得不耐烦的时候至少能看个酷炫的动画。骚操作四破碎的心点击交互虽然不能纯CSS做粒子效果但可以做个简单的破碎模拟.heart{cursor:pointer;transition:all 0.3s;}.heart:active{transform:rotate(-45deg)scale(0.8)skew(10deg,10deg);opacity:0.5;/* 点击时缩小、扭曲、变透明模拟被捏碎的感觉 */}配合JS监听click事件还能加点音效或者弹出个对话框啥的。虽然简单但比静态页面好玩多了。骚操作五心跳心电图背景这个稍微复杂点在背景加个SVG path动画但CSS部分还是用咱们这个心body{background:linear-gradient(rgba(102,126,234,0.8),rgba(118,75,162,0.8)),url(data:image/svgxml,svg xmlnshttp://www.w3.org/2000/svg viewBox0 0 1200 120path dM0,60 L200,60 L250,10 L300,110 L350,60 L1200,60 fillnone strokergba(255,255,255,0.1) stroke-width2//svg);background-size:cover,50% auto;animation:ecg-move 2s linear infinite;}keyframesecg-move{0%{background-position:center,0 0;}100%{background-position:center,100px 0;}}这样背景会有种心电图在走的感觉中间放咱们的心跳红心整体氛围感直接拉满医疗类APP或者健康监测的Dashboard用这个超合适。写在最后代码有价真心无价说了这么多技术细节回到最开始的话题——这玩意儿真能让你脱单吗老实讲不能。除非你表白对象也是前端那你们可以一起研究这个心形的border-radius还有没有其他写法或者争论一下用SVG是不是更语义化技术含量直接变成共同话题。但对新手来说这个小项目确实是个很好的练手素材。它涉及到了CSS的定位、变形、动画、伪元素还有浏览器渲染的基本原理。你能把这个心跳效果调得丝般顺滑说明你对CSS的时间函数和变形矩阵已经有了直观理解这比看十遍文档都管用。而且更重要的是它让你看到前端不只是枯燥的表单验证和数据表格还能做出这种有温度的小东西。虽然土虽然 cheesy但当那个红心在你的浏览器里第一次跳动起来的时候那种成就感是真实的。所以别犹豫了把代码复制走改改颜色改改大小发到你的个人网站或者给暗恋对象发过去后果自负。反正技多不压身万一以后老板突然说咱们APP加个心跳动画吧你能淡定地回一句哦那个啊十分钟搞定这不比真去表白成功率高好了键盘给你该你动手了。要是调不出来检查下是不是把::before写成:before了——别笑这种错误我也常犯。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进