2024-12-01 厉飞雨 阅读(244) 评论(0) 赞(17)

<p>英文:</p> <p>conditional statement for media query on tailwindcss</p> <h1>问题 {#heading}</h1> <p>如何在Tailwind中仅针对中等或大屏幕设置条件语句？ 英文:</p> <p>...

2024-12-01 厉飞雨 阅读(524) 评论(0) 赞(19)

需求 --- 在文本文字较多时，只展示两行，第二行文末省略号，并且有"查看更多"按钮，点击展开全部。具体如图所示： ![](http://static.51tbox.com/static/2024-11-29/col/6218e26d645296235e00d3fb7535242b/58431c426aa54cc08c92ede27be08443.png...

2024-12-01 厉飞雨 阅读(335) 评论(0) 赞(17)

<p>前端需求经常千变万化，有时需要用到如下图的圆弧背景，我们马上想到可以直接使用背景图，其实直接用 <code>css</code> 就可以实现类似效果。</p> <p><img src="http://static.51tbox.com/static/2024-11-29/col/3bd813ffc...

2024-12-01 厉飞雨 阅读(394) 评论(0) 赞(18)

<h2>背景</h2> <p>开发前端项目，特别是商城项目，难免会涉及优惠券的开发，而且产品和客户对优惠券样式的要求又千变万化。就比如今天产品和 UI 给了个设计图，需要实现如下图所示的左右镂空的挖孔且带阴影效果的优惠券。</p> <p><img src="http://static.51tbox.co...

2024-12-01 厉飞雨 阅读(277) 评论(0) 赞(22)

给大家分享一个简单的纯CSS毛玻璃特效，用毛玻璃背景以其独特的美学效果备受追捧。这种背景不仅赋予网站一种柔和、朦胧的感觉，还能提升用户的视觉体验。 效果展示 ---- ![IMG_5661.jpeg](http://static.51tbox.com/static/2024-11-29/col/a5149dc12ea9ad4b6e1a2b4e87feaddb/99abc79...

2024-12-01 厉飞雨 阅读(220) 评论(0) 赞(15)

<p>喜欢看网页上那些酷炫的效果吗？这就是CSS的功劳！我整理了一些很棒的CSS特效，让网页看起来更有趣、更生动。这些特效有的简单，有的复杂，但都用的是简单易懂的代码。比如，颜色会慢慢变化的背景，会动的小图标，还有跟着你的鼠标动来动去的效果。这篇文章里，我会和大家分享并展示这些让人看了还想看的CSS特效。</p> <p>接上次分享的<a...

2024-12-01 厉飞雨 阅读(369) 评论(0) 赞(15)

<p>喜欢看网页上那些酷炫的效果吗？这就是CSS的功劳！我整理了一些很棒的CSS特效，让网页看起来更有趣、更生动。这些特效有的简单，有的复杂，但都用的是简单易懂的代码。比如，颜色会慢慢变化的背景，会动的小图标，还有跟着你的鼠标动来动去的效果。这篇文章里，我会和大家分享并展示这些让人看了还想看的CSS特效。快来一起看看吧！</p> <p>相关文...

2024-11-24 厉飞雨 阅读(195) 评论(0) 赞(17)

<p>作为我担任Speckyboy首席技术官的新职位的一部分，我决定撰写一系列文章，以帮助您了解制作一个真正快速的网站所需要的内容。您可能已经注意到，Speckyboy最近刚出手，并且运行速度快得多。</p> <p>这是因为我将在&quot;网站速度&quot;系列中列出所有提示，其中重点是100％的加载时间。</p&g...

2024-11-24 厉飞雨 阅读(204) 评论(0) 赞(20)

 常见的水平垂直居中实现方案，可以介绍三种方案。 最简单的方案当然是[flex](/tags/flex/)布局： ``` .father {     display: flex;     justify-content: center;     align-items: cente...

2024-11-24 厉飞雨 阅读(269) 评论(0) 赞(16)

<p>滚动链接动画通常可以为网站增添一抹档次，但长期以来一直是 <a href="/JavaScript/">JavaScript</a> 的专利。现在，一个全新的规范正在实施，使我们能够使用 <a href="/Html4css/">CSS</a> 创建丰富的滚动驱动体验！&l...