CSS3

CSS3

CSS3

69 文章 话题 4101 浏览

案例研究:找到通往奥兹的路

  • 案例研究:找到通往奥兹的路
  • 案例研究:找到通往奥兹的路
  • 案例研究:找到通往奥兹的路
  • 案例研究:找到通往奥兹的路

Find Your Way to Oz 是迪士尼在网络上推出的一项新的 Google Chrome 实验。 它使您可以通过堪萨斯马戏团进行互动之旅,在您被一场大风暴席卷后,将带您前往奥兹国。 我们的目标是将电影的丰富性与浏览器的技术能力相结合,创造一种有趣的、身临其境的体验,用户可以与之建立紧密的联系。 这项工作有点太大,无法在本文中完整捕捉,因此我们深入研究并提取了一些我们认为有趣的技术故事章节…

月牙弯弯 2022-01-10 浏览 978 评论 0 收藏 0

浅谈 CSS3 timing-function:steps() 动画函数

一、不堪回首的过往 在应用 CSS3 渐变/动画时,有个控制时间的属性 <timing-function> 。它的取值中除了常用到的 三次贝塞尔曲线 以外,还有个让人比较困惑的 steps() 函数。在许多相关文章里,关于这个函数的解释都比较含糊其辞,比如: steps() 第一个参数 number 为指定的间隔数,即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步…

像你 2021-12-14 浏览 937 评论 0 收藏 0

CSS3 Flex 布局之 box-align 垂直居中

语法 box-align: start|end|center|baseline|stretch; box-align 默认值是 stretch:拉伸子元素以填充包含块; 例如 box-align: center,http://jsdm.com/Windancer/paint/En07V 不同的 box-align 属性对应盒子中不同的位置

屌丝范 2021-11-24 浏览 1098 评论 0 收藏 0

CSS3 box-sizing 最佳实践

/* apply a natural box layout model to all elements, but allowing components to change */ html{ box-sizing:border-box; } *, *:before, *:after{ box-sizing:inherit; } 组件需要重置时,只需在组件容器上重置即可: .component { …

居里长安 2021-11-06 浏览 932 评论 0 收藏 0

CSS3 Flexbox 布局

一个 Flexbox 布局是由一个伸缩容器(flex containers)和在这个容器里的伸缩项目(flex items)组成。 Flex 容器不是块容器,因此有些设计用来控制块布局的属片在Flexbox布局中不适用。特别是:多列组中所有column-*属性、float、clear属性和vertical-align属性在Flex容器上没有作用。 如果元素 display 的值指定为 inline…

半世蒼涼 2021-11-04 浏览 926 评论 0 收藏 0

你可能不知道的 Chrome 控制台:CSS3 动画的速度与激情

速度 为了看 css3 过渡动画和帧动画效果,你是不是需要把时间改成很长: div{ transition: all 10s; } 现在不需要啦,只要你打开 chrome 浏览器的控制台: 如上图,打开浏览器的控制台,点击图示按钮,拖动滑块即可。该动画速度将会影响 css3 中的过渡动画和帧动画。 1x 表示 1 倍速度,0.5x 表示 0.5 倍播放速度,如果你捣鼓过 VCD/DVD 播放器,那…

緦唸λ蓇 2021-11-04 浏览 996 评论 0 收藏 0

你可能还不知道 CSS3 的 rem 字体大小

在Web中使用什么 单位 来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说 PX 做为单位好,有人说 EM 优点多,还有人在说 百分比 方便,以至于出现了 CSS Font-Size: em vs. px vs. pt vs. percent 这样的PK大局。不幸的是,仍然有不同的利弊,使各种技术都不太理想,但又无法不去用。真是进也难,退也难呀。 最近在学习 em 的相关知识的时候,无意…

落墨 2021-11-03 浏览 1186 评论 0 收藏 0

CSS3 Flex 布局之 flex-flow

弹性布局是 CSS3 引入的强大的布局方式,用来替代以前 Web 开发人员使用的一些复杂而易错 hacks 方法(如使用 float 进行类似流式布局)。 CSS 语法 flex-flow: row | column |row wrap; 其中 flex-flow 是 flex-direction 和 flex-wrap 属性的简写方式,语法如下: flex-flow: <flex-dire…

一人独醉 2021-11-01 浏览 987 评论 0 收藏 0

CSS3 中 Rem 与 Px 的转换

rem 是 CSS3 中新增加的一个单位值,他和 em 单位一样,都是一个相对单位。不同的是 em 是相对于元素的父元素的 font-size 进行计算;rem是相对于根元素html的font-size进行计算。这样一来rem就绕开了复杂的层级关系,实现了类似于em单位的功能。 Rem 的使用 前面说了em是相对于其父元素来设置字体大小的,这样就会存在一个问题,进行任何元素设置,都有可能需要知道他…

泛泛之交 2021-10-30 浏览 929 评论 0 收藏 0

使用 CSS3 Gradients 创建图片占位符

  • 使用 CSS3 Gradients 创建图片占位符
  • 使用 CSS3 Gradients 创建图片占位符
  • 使用 CSS3 Gradients 创建图片占位符
  • 使用 CSS3 Gradients 创建图片占位符

最典型的问题是在画册制作中,没有显示出足够多图片: 解决方案有很多种,你可以在后面直接留空白区域;你也可以添加额外的html标签作为占位符。第一种方案觉得还可以,但第二种解决方案感觉会让你的代码不干净。或者给画册元素添加一个背景图像,但这样会增加http的请求数。 CSS3渐变就像是背景图像。只需要把他的起始色和终止色设置为相同颜色,这样就不会产生一个渐变的背景。然后通过与 background-…

浮生未歇 2021-10-27 浏览 1014 评论 0 收藏 0

Nib 基于 Stylus 的扩展用于跨浏览器 CSS3 兼容性

Nib 是一个小而精湛的 CSS3 预处理扩展,基于 Stylus CSS language, 而开发的,主要针对 CSS3 属性的跨浏览器兼容性。 body { background: linear-gradient(top, white, black); } body { background: -webkit-gradient(linear, left top, left bottom, c…

JSmiles 2020-10-17 浏览 1327 评论 0 收藏 0

CSS3 Animation Cheat Sheet 功能齐全的 CSS 动画库

CSS3 Animation Cheat Sheet 是一组预设的动画库,为您的 Web 项目添加各种很炫的动画。所有你需要做的是添加样式表到你的网站,为你想要添加动画效果的元素应用预制的 CSS 类就可以了。 使用方法 CSS3 Animation Cheat Sheet 是一套预置的,即插即用的动画库,您所需要做的就是将样式表添加到您的网站,并将预先制作好的CSS类应用到您想要动画的元素中。 …

JSmiles 2020-07-26 浏览 1278 评论 0 收藏 0

stroll.js 炫酷的 CSS3 列表滚动动画集合

CSS 列表滚动效果的集合。适用于支持 CSS3d 转换的浏览器,包括 iOS 和 android4.x 等特殊触控模式。 很酷的 CSS3 滚动效果 stroll.js 包括了多种滚动效果,用户很容易选择自己喜欢的效果,支持 Chrome/Safari/FF/iOS/Android 4.x。 使用方法 滚动效果的样式由列表上设置的类决定。一旦 Class 设置好,stroll.js 需要告知通过…

JSmiles 2020-07-25 浏览 2705 评论 0 收藏 0

Sticker.js 在网页实现便签贴纸效果

Sticker.js 是一个很小的 JavaScript 库,它允许您在网页中创建漂亮的贴纸效果。没有依赖关系(不需要 jQuery),可以在大多数支持 CSS3 的主流浏览器工作。下面有简单的使用示例,更多功能等着你去发现。 在一个 .className 或 #ID 元素上调用 init() 方法,它在目标元素中创建必要的 HTML 元素,并使用 CSS3 添加贴纸效果 HTML: <!-…

JSmiles 2020-07-23 浏览 1697 评论 0 收藏 0

Magic 一个比较魔性的 CSS3 动画库

Magic CSS3 Animations 动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中。只需简单的在页面上引入 CSS 文件 magic.css 或者压缩版本 magic.min.css 就可以使用了。 安装 GitHub Package Registry - Package url npm install @minimac/magic.css NPM - Package u…

JSmiles 2020-07-20 浏览 2006 评论 0 收藏 0

简介

CSS3是CSS(层叠样式表)技术的升级版本,于1999年开始制订,2001年5月23日W3C完成了CSS3的工作草案,主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

更多

推荐作者