css
文章平均质量分 88
「零一」
公众号:「前端印象」,前端从0到1,因为热爱,没有意外
我是「零一」,非科班、三非学校,自学前端一年进入字节跳动担任前端开发。热爱写博客、记录成长过程中的点点滴滴,请大家见证我从0到1的过程吧
展开
-
CSS 穿墙术,太强了
大家好,我是零一,今天给大家分享 CSS 中一个神奇的属性:filter,为什么说它神奇?正如我标题所说的,我突然发现它能帮我们轻松实现 穿墙特效,类似这种的👇看起来就跟我们在科幻电影里看到的经过一个穿梭门时的效果一样,真的很酷!然而这个效果对于开发者来说毫无难度,因为只设置了两个属性从这个例子引出的 CSS 中超级牛逼的 filter 属性,到底还有哪些牛逼属性呢?一起来了解一下!filter 支持的属性借用了一下 MDN 上的例子,filter 一共支持以下这些属性:filter: blur原创 2022-05-24 08:57:27 · 2622 阅读 · 6 评论 -
CSS 中的简写到底有多少坑?以后不敢了...
大家好,我是零一,简写(语法糖)可能给我们编码带来了很多便利,但简写也会带来一些问题,今天来讨论一下 CSS 中的简写的"爱恨情仇"为什么说是爱恨情仇呢?因为简写给我们带来了很多的便利,但凡事都有好有坏,你不能说简写一点坏处都没有。所以我们就聊聊简写的 “好” 和 “坏”background这个 CSS 属性大家肯定是再熟悉不过了,给元素设置背景色是这样?.demo { background: #333;}还是这样?.demo { background-color: #333;原创 2022-05-07 08:50:44 · 1595 阅读 · 0 评论 -
仅用一个HTML标签,实现带动画的抖音LOGO
大家好,我是零一,今天给大家表演 仅用一个HTML标签实现带动画的抖音LOGO,涉及了很多知识点,欢迎交流讨论先上结果,最终实现效果如下:还原度应该还可以吧?抖音Logo结构想要用CSS来画抖音的Logo,前提要先了解它的构造,一定是一些几何图形的拼接组合,因为之前很多业界大佬已经扒过抖音的Logo的结构了,我就拿来借用一下:好的,有点复杂,简化一下,其实就是 4 个部分每个颜色划出来的区域代表一个部分,所以最后是:1/4圆环 + 半圆 + 长条矩形 + 半径略大一些的1/4圆环制作思路原创 2022-04-25 09:08:45 · 2685 阅读 · 4 评论 -
在CSS中写 when/else 是什么体验
大家都知道CSS已经有@media、@support 查询形式的条件,可以非常灵活地选择对应的样式,然而还有一个新的提议叫做 when/else,这语法似乎看起来更加明了方便在这篇文章完稿前,when 的提议已经被 CSSWG 通过了,而 else 是一个单独的提案,目前是一个4级规范让我们来看看 when/else 是如何使用的吧when/else 语法先来看看为了实现页面响应式是如何做的,这就要用到 CSS媒体查询@media (min-width: 800px) { /* 宽度大于800原创 2021-12-15 10:06:58 · 1701 阅读 · 0 评论 -
28个在线游戏编程学习网站
大家好,我是零一,经常有读者问我:自学怎么学,要学的知识那么多,根本记不住怎么办?我一般刚开始回答的时候都是说要多做笔记总结,更重要的就是要上手敲代码实践,如果抛开任何场景在那学习知识,不光记不住,说不定对知识应用的掌握程度也不够另外,学习也是需要靠兴趣的,希望你们在上手实践敲代码的过程中能感受到乐趣所以,今天我给大家推荐28个辅助你学习巩固知识的网站,让你边玩边学边记!本文大致的目录结构如下:CSS相关的学习网站1 xxxx2 xxxxn xxxxJavaScript相关的学习原创 2021-09-15 08:45:47 · 3581 阅读 · 1 评论 -
热议:CSS为什么这么难学?一定是你的方法不对
文章首发公众号:前端印象,如需转载请联系我开白!大家好,我是零一。前段时间我在知乎刷到这样一个提问:为什么CSS这么难学?看到这个问题以后,我仔细一想,CSS学习起来好像是挺困难的,它似乎没有像JavaScript那样非常系统的学习大纲,大家平时也不会用到所有的CSS,基本上用来用去就是那么几个常用的属性,甚至就连很多培训机构的入门教学视频都也只会教你一些常用的CSS(不然你以为一个几小时的教学视频怎么能让你快速入门CSS的呢?)一般别人回答你CSS很好学也是因为它只用那些常用的属性,他很有可能.原创 2021-08-23 10:51:43 · 2860 阅读 · 1 评论 -
【css炫酷动画】让面试官眼前一亮的故障风格文字动画
今天分享一个用 css3 来实现一个最近特别流行的故障风格的文字展示动画,我敢说,只要你在你的项目中用到这个动画,面试官看到了一定会眼前一亮。下面先来看一下成品图该动画效果就比较复杂了,用到的知识比较多,例如 css伪元素 、元素自定义属性 、蒙版属性 、animation动画等等标签元素部分<body> <div class="txt" data-text="我是故障风格的文字"> 我是故障风格的文字 </div> <原创 2021-05-24 08:32:03 · 4513 阅读 · 23 评论 -
一个非常实用的CSS小技巧,帮你应对各种场景
问题背景在设计页面时,我们经常会遇到类似这样的页面布局:图中一个容器内有多个内容块,每块都有一个底部的下划线,但是一般为了美观,最后一个内容块儿的下划线是要去掉的接下来我们看看通常情况下,是如何处理这种样式的:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt原创 2021-05-19 09:02:17 · 3319 阅读 · 101 评论 -
CSS实现图片悬停文字叠加效果
引言在这篇文章中,我们将看到如何轻松创建一个漂亮的图像悬停文本覆盖效果。对于本教程,你必须具备充分的 HTML 和 CSS 基本知识。编写HTML我们的 html 代码非常简单,只有几行:<div class="image"> <img class="image__img" src="https://cdn.pixabay.com/photo/2017/12/15/13/51/polynesia-3021072__340.jpg" alt="Bricks"原创 2021-05-18 09:29:56 · 5173 阅读 · 123 评论 -
学习过CSS,那你知道BFC是什么吗?
BFC(Block Formatting Context):翻译成中文叫做块级格式化上下文,它决定了元素如何对其内容进行定位,以及与其它元素的关系和相互作用,当涉及到可视化布局时,其提供了一个环境,元素在这个环境中按照一定的规则进行布局排列换句话说,BFC就是为元素提供一个独立的容器,在该容器里按照一定的规则进行布局排列,该容器内的元素不会影响外部的元素,同理,外部的元素也不会影响内部的元素原创 2020-11-09 09:41:33 · 12777 阅读 · 22 评论 -
css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁
css 几种常用的简单容易记住的垂直水平居中方法前言正文第一种方法:第一种方法我强烈推荐,用到了我们熟悉的flex布局。前言我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用一下margin就可以完成,但是,如果不知道元素的宽高呢? 是不是就会在这上面用点心思了,接下来我给大家介绍两种我设计网页时常用的两种不定宽高的元素水平居中方法吧,放心绝对...原创 2020-05-06 00:21:45 · 4107 阅读 · 1 评论 -
css3 属性 text-overflow 实现截取多余文字内容 以省略号来代替多余内容
css3 属性 text-overflow: ellipsis前言正文前言我们在设计网站的时候有时会遇到这样一个需求:因为页面空间大小的问题,需要将多余的文字隐藏起来,并以省略号代替,类似这样的效果:做到这样的效果,我们需要运用两个特殊的样式来实现 text-overflow 和 white-space正文让我们分别来看一下使用了这些样式,和不使用这些样式的区别吧1. 不使用特殊样...原创 2020-05-03 08:26:33 · 3741 阅读 · 0 评论 -
css3新属性position: sticky 一分钟实现 导航栏悬停功能
css3新属性position: sticky 一分钟实现 导航栏悬停功能前言前言想必很多前端小伙伴经常会在开发中遇到这样一个需求,就是在下划时,导航栏悬停在屏幕最上方,例如咱们的csdn:...原创 2020-05-02 23:00:31 · 4434 阅读 · 1 评论