纯 CSS 实现圆弧
<p>前端需求经常千变万化,有时需要用到如下图的圆弧背景,我们马上想到可以直接使用背景图,其实直接用 <code>css</code> 就可以实现类似效果。</p> <p><img src="http://static.51tbox.com/static/2024-11-29/col/3bd813ffc...
51工具盒子
<p>前端需求经常千变万化,有时需要用到如下图的圆弧背景,我们马上想到可以直接使用背景图,其实直接用 <code>css</code> 就可以实现类似效果。</p> <p><img src="http://static.51tbox.com/static/2024-11-29/col/3bd813ffc...
<h2>背景</h2> <p>开发前端项目,特别是商城项目,难免会涉及优惠券的开发,而且产品和客户对优惠券样式的要求又千变万化。就比如今天产品和 UI 给了个设计图,需要实现如下图所示的左右镂空的挖孔且带阴影效果的优惠券。</p> <p><img src="http://static.51tbox.co...
给大家分享一个简单的纯CSS毛玻璃特效,用毛玻璃背景以其独特的美学效果备受追捧。这种背景不仅赋予网站一种柔和、朦胧的感觉,还能提升用户的视觉体验。 效果展示 ----  常见的水平垂直居中实现方案,可以介绍三种方案。 最简单的方案当然是[flex](/tags/flex/)布局: ``` .father { display: flex; justify-content: center; align-items: cente...
<p>滚动链接动画通常可以为网站增添一抹档次,但长期以来一直是 <a href="/JavaScript/">JavaScript</a> 的专利。现在,一个全新的规范正在实施,使我们能够使用 <a href="/Html4css/">CSS</a> 创建丰富的滚动驱动体验!&l...
<p><img src="/images/tt/html.jpg" alt="" /></p> <p><a href="/Html4css/">CSS 选择器</a>允许您按类型、属性或在 <a href="/Html4css/&q...
<p>我们可能会想"好吧,这是一个简单的任务!在你制作动画的图像上方添加一个额外的元素,它就完成了。" 没错,但我们不会使用任何额外的元素或伪元素。我们将只使用元素来工作<code><img></code>。而已!</p> <p>这听起来可能是不可能的,因...