css高阶技巧 - web秀

#css高阶技巧#

共找到 css高阶技巧相关内容 4 条

1年前

现代 CSS 之高阶图片渐隐消失术

现代 CSS 之高阶图片渐隐消失术

在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样：<divclass="img"></div>div{width:300px;height:300px;background:url(image.jpg);transition:.4s;}.img:hover{opacity:0;}但是，CSS的功能如此强大的今天。我们可以利用CSS实现的渐隐效果已经不再是如此的简单。想想看，下面这样一个效果，是CSS能够实现的么？答案是肯定的！本文就将一步一步，从零开

518553 2196 0

1年前

现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！

现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！

在上一篇文章中--现代CSS之高阶图片渐隐消失术，我们借助了CSS@Property及CSSMask属性，成功的实现了这样一种图片渐变消失的效果：CodePenDemo--基于@property和mask的文本渐隐消失术但是，这个效果的缺陷也非常明显，虽然借助了SCSS简化了非常多的代码，但是，如果我们查看编译后的CSS文件，会发现，在利用SCSS只有80的代码的情况下，编译后的CSS文件行数高达2400+行，实在是太夸张了。究其原因在于，我们利用原生的CSS去控制400个小块的过渡动画，控制了400个C

520166 2148 0

1年前

现代 CSS 高阶技巧，完美的波浪进度条效果！

现代 CSS 高阶技巧，完美的波浪进度条效果！

本文是CSSHoudini之CSSPaintingAPI系列第三篇。现代CSS之高阶图片渐隐消失术现代CSS高阶技巧，像Canvas一样自由绘图构建样式！在上两篇中，我们详细介绍了CSSPaintingAPI是如何一步一步，实现自定义图案甚至实现动画效果的！在这一篇中，我们将继续探索，尝试使用CSSPaintingAPI，去实现一些过往纯CSS无法实现的效果。CSSPaintingAPI再简单快速的过一下，什么是CSSPaintingAPI。CSSPaintingAPI是CSSHoudini的一部分。而H

519943 2202 0

1年前

现代 CSS 高阶技巧，不规则边框解决方案

现代 CSS 高阶技巧，不规则边框解决方案

在这一篇中，我们将继续探索，尝试使用CSSPaintingAPI，去实现过往CSS中非常难以实现的一个点，那就是如何绘制不规则图形的边框。CSSPaintingAPI再简单快速的过一下，什么是CSSPainti

538146 3004 0

下拉加载更多