头图

SegmentFault 思否技术周刊 -- Amazing!CSS 也能实现炫酷特效

Beverly
北京市
English

CSS 的全称是 Cascading Style Sheets,即层叠样式表, 是一种样式表语言,用来描述 HTML 或 XML(包括如 SVG、XHTML 之类的 XML 分支语言)元素所呈现的样式。

小编整理了思否社区关于 CSS 的优质技术文章,欢迎大家阅读 ~

📖 文章推荐

超酷炫的转场动画?CSS 轻松拿下!

借助强大的 CSS 以及一些有意思的技巧,我们利用纯 CSS 实现了这两个看似非常复杂的转场动画效果,并且,这在之前,是完全不可能使用纯 CSS 实现的。

CSS color-scheme 和夜间模式

normal:表示元素未指定任何配色方案,因此应使用浏览器的默认配色方案呈现。
light:表示可以使用操作系统亮色配色方案渲染元素。
dark:表示可以使用操作系统深色配色方案渲染元素。

基于 CSS mask-image 实现炫酷图片过渡效果之星球大战

在给公司开发官网的过程中,会有涉及到一些图片的鼠标悬停效果,鼠标悬停后会改变原图,单纯的渐隐渐现,放大缩小,左右平移已经满足不了产品经理期望了,总觉得不够惊艳,创意不够。其实作为一个开发者,也不会满足这普通日常的动画交互效果,在寻找新的 idea 时发现基于 CSS mask-image 可以实现很多不错的效果,本文将基于此属性实现四种图片过渡动画效果。

动画合成小技巧!CSS 实现动感的倒计时效果

这是一个非常“动感”的倒计时效果,通常在一些活动开场中比较常见,分析一下整个动画过程,不难发现,有以下几类动画

  1. 数字的变化
  2. 缩小和放大
  3. 透明度变化

不知道小伙伴能否观察出来呢?下面来一起来看看具体实现吧

使用纯 CSS 实现超酷炫的粘性气泡效果

其中,要想灵活运用 SVG 中的 feGaussianBlur 滤镜还是需要有非常强大的 SVG 知识储备的。那么,仅仅使用 CSS 能否实现该效果呢?
嘿嘿,强大的 CSS 当然是可以的。本文,就将带领大家一步步使用纯 CSS,完成上述效果。

使用 CSS background实现炫酷悬停效果

日常开发过程中,会遇到不少按钮鼠标悬停的效果,实现这类悬停效果的方式有很多,借助伪元素,CSS3 变换及过渡等都可以实现。今天的文章将使用背景色实现类似的效果,当我们遇到一个问题时,你的脑海中的方案不止一种时,我想这肯定是极好的,使用不同的方法达到同一的效果,或者某天所遇到的问题就迎刃而解了。

CSS 如何把元素固定在容器底部?(四种方式)

如果是页面底部,我们可以直接 position: fixed;bottom: 0; 基于浏览器定位直接实现。
但是他要的效果是基于父级容器,那么我们必须要使用其他手段来定位了
relative 来限制 absolute,然后 bottom: 0,但是在内容过长的时候会导致显示异常。所以我们需要做内部滚动。
如果做内部滚动,那么我们只要可以撑开盒子即可。不需要绝对定位了

📖 问答推荐

👇课程推荐

《简明 CSS 教程》
课程链接:https://ke.segmentfault.com/c...

课程收获
  1. CSS 作为 Web 前端开发中必备的技能之一,由于其知识点多,内容杂,使用起来又非常的灵活,如果没有经过系统地学习,非常容易产生挫败感。本系列课程依据讲师自身的经验,系统地编排了 CSS 当中的知识点,由浅入深,从基础到复杂,从理论到实践,手把手地介绍 CSS 当中最核心的知识点。
  2. 在实际的工作中,异常灵活的 CSS 会给团队开发带来不必要的麻烦。本系列课程除了介绍知识点之外,更注重实际工作的意义,让同学们不仅能够掌握 CSS 的知识,更能掌握实际工作中应该注意的点,让理论和实际得以结合,无缝衔接学习和工作。

PS:大家想看哪些方面的技术内容,可以在评论区留言喔 ~

如有问题可以添加小姐姐微信~

image.png

阅读 2.2k

SegmentFault_社区周刊
主题技术周刊,每周分享新鲜有趣的技术干货。
avatar
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑。加油💪🏻,小鸣酱~

568 声望
2.1k 粉丝
0 条评论
avatar
Beverly
SegmentFault 思否社区打工人

怂人面前全是坑,努力填坑。加油💪🏻,小鸣酱~

568 声望
2.1k 粉丝
文章目录
宣传栏