fbpx
CSS技巧

CSS技巧:高级CSS技巧的终极指南

如果您曾经考虑学习一些高级CSS技巧,那么本指南将是一个不错的起点。 它涵盖以下CSS主题;

  • CSS动画
  • 重构CSS代码
  • CSS3原生动画
  • 在CSS3中使用颜色渐变
  • CSS定位概述
  • CSS选择器概述
  • 了解CSS的特异性
  • 使用WOW.js和Animate.css进行滚动触发的动画
  • CSS flexbox和高级CSS选择器简介

什么是Animate.CSS [教程]

什么是Animate.CSS [教程] 本节说明Animate.css入门如何通过简单,有效的编程更好地支持Web开发人员创建创意和功能动画设计。 要升级Web内容并改善应用程序设计,Animate.css入门[教程]是制作独特内容的好方法。 当在整个数字环境中共享网站内容时,开发人员比其他竞争网站更具优势,它们具有创意和不同功能,更快,更好质量的内容以及更好的跨浏览器兼容性。 Animate.CSS库扩展为所有Web和Web提供了工具,简单性和灵活性。 移动应用开发服务.

CSS动画是具有不同动画功能的层叠样式表(CSS)的扩展。 该模块为网站嵌入了一个设计库,为用户提供了便利,创意和专业的Web应用程序。 Web开发人员Animate.css入门[教程]通过级联样式表扩展名应用动画设计,编辑CSS序列并改善网站设计。 该扩展程序通过对特定HTML元素进行直接配置来实现动画设计时简化了开发人员的交互,这些HTML元素需要较少的Flash和JavaScript处理和内存使用。

优势

毫无疑问,Animate.CSS出于简单性和兼容性而受到开发人员的欢迎。 首先,Animate.CSS具有简单易用的样式表脚本,该脚本可复制并粘贴到开发人员网站文档中,以提高开发人员的便利性。 此外,该模块的构建还可以防止用户选择通用的GIFS或Flash映像,从而限制了开发人员的创造力,并需要采取其他步骤来减慢项目开发的完成时间。 此外,使用Animate.css入门时,还有许多用于动画属性的速记动画设计样式脚本。 重要的是,级联样式表(CSS)Animate.CSS程序包括高级关键帧扩展,可以更好地为开发人员配备创意和功能性动画设计所需的设计定制开发人员工具。 除了易于使用的模块之外,Animate还被证明与Javascript的其他升级或改进兼容。

动画如何在Animate.CSS中工作

CSS animate是一个独特的库模块,它是通过简单的 有效的设计。 为了说明,Animate.CSS包括两个用于设计网站样式的主要组件。 第一个组件设置样式并存储CSS动画的信息。 但是,第二个组件使用“关键帧”来向Web开发人员发出动画设计序列的开始和结束的信号。 另外,此组件使用高级过渡点来实现更好的动画配置。

Animate.css入门[教程]

制作动画

CSS动画包括主要和次要属性组件。 通常,Web开发人员使用Animate.CSS特定于样式的脚本元素来开始使用Animate.css,并包括动画属性的其他设计样式。 更具体地说,属性在不同的功能之间起作用,以使网站具有功能简单的动画。 动画属性包括样式元素的广泛标准,例如动画名称,持续时间,时间和延迟。 其他形式包括动画计数,方向,填充和播放。 幸运的是,库模块使 响应式网页设计师 将这些属性应用于具有简单文本序列的网站动画,而不是格式化和测试功能不确定的众多代码。

关键帧

通过.CSS Animate扩展,用户可以使用“关键帧”来创建具有组件元素的动画。 为了用户的利益,通过级联样式表设置“关键帧”,以向用户提供CSS样式集的逐步编辑功能,同时允许Web开发人员专注于重要的动画功能。 详细说来,“基石”可以帮助用户在不同的设计顺序中的时间,持续时间和深度详图元素内进行配置。

关键帧规则

此外,动画的显示要求用户操作“规则的关键帧”以更好地与组件元素连接。 对于更具体的属性配置,此扩展程序可校正设计“关键帧”之间的动画值。 为了进行标识,Web开发人员将“关键帧规则”作为值来编辑序列中的多个名称,并查找对CSS样式集没有价值的元素。 此外,“关键帧规则”通过有用的动画代码指示器扩展了Web开发人员的编辑功能,从而可以在设计样式期间更好地呈现元素。

动画CSS转换

同样重要的是,层叠样式表(CSS)的Animate.CSS功能提供了“转换”属性,可以更好地进行元素编辑。 与CSS设计不兼容的元素会随着变换工具而改变。 有益的是,使用缩放,旋转,倾斜和平移等转换工具的开发人员将配置元素,以更好地在Web应用程序上进行设计。 2d或3d转换属性在创建网站时为用户提供了额外的设计创意和功能。

鳞片

通过缩放,Animate.CSS的用户可以调整设计的尺寸以更好地适合Web内容。 特定的CSS转换功能可校正元素的宽度和高度,以更好地缩放Web应用程序上的内容。 默认情况下,缩放值以属性XNUMX开头,该属性将调整为大于或小于XNUMX的值,从而形成或多或少的元素可伸缩性。 简而言之,当处理针对元素和内容设计的缩放配置时,CSS上的属性可按比例进行校正。

歪斜

接下来,Animate.CSS上的转换工具包含一个面向Web开发人员的偏斜函数。 元素属性的设计与可能倾斜的Web应用程序上的水平轴和垂直轴对齐。 通常,偏斜函数包含“ x”和“ y”值,以帮助开发人员使轴上的元素变形。

翻译

另一个转换功能是CSS转换。 同样,转换功能还共享“ x”和“ y”值,以帮助开发人员更好地设计功能。 与CSS倾斜功能不同,它们的转换工具允许用户在水平轴和垂直轴上定位特定元素。

轮流

此外,使用Animate.css的开发人员使用转换工具还包括元素的旋转功能。 用户可以轻松地在任何方向上调整元素的角度。 顺时针旋转内容时,旋转值为正;逆时针调整元素时,旋转值为负。

矩阵

最后,CSS转换功能包括元素的矩阵函数。 矩阵工具对开发人员特别有用,它可以将2d配置结合到单个元素上,以用于通用编辑应用程序。

Animate.css入门[教程]
加水CSS动画

Animate.CSS系统称为“ Just-Add-Water”。 该模块被归类为“跨浏览器”动画源,表明其对新手或已建立的Web开发人员的用户友好性和简单设计。

装置

首先,管理员需要安装“仅添加水级联样式表动画”程序。 首先,通过NPM进行安装。 为了进行定义,Node Package Manager与 JavaScript的 脚本,它共享Animate.CSS的设计。 默认情况下,该编程语言与Node.JS一起运行,作为Web开发的稳定前提。 接下来,用户使用此代码“ $ Node Package Manager安装animate.css –save”来安装程序。

或者,该序列遵循“ $ yarn add animate.css”。 为了进一步说明,纱线安装还可以帮助管理员进行项目安装。 通常,“纱线”将安装与使用代码或安装其他规范的依赖项相关联。 与Node Packaging Manager(npm)安装方法不同,“ yarn”替代方法在添加新程序时不应用“ -save”或“ -sav-dev”。 深入地讲,除非有另一个更出色的程序的支持,依赖项才能运行。 模块和安装扩展的组合与创新的新库模型协作。

使用Animate.CSS [教程]

在Animate.CSS网站上,开放源代码可供Web开发人员使用。 用户可以选择 下载Animate.css 访问不同的层叠样式表动画文本。 该列表包括多种设计样式,并且可以直接应用于用户网站。 此外, 下载 代码是Animate.Css入门的另一种方法。

网站上的Animate.CSS入门

将层叠样式表(CSS)样式表应用到开发人员网站上非常容易,快速和有效。 但是,文本实现需要用户注意细节。 首先,级联样式表(CSS)动画。CSS样式表必须正确放置在开发人员的文档中,“ 。” 接下来,管理员将“动画”样式表类应用于Web应用程序文档中的元素。 同样,动画脚本遵循CSS名称以执行元素的特定动画功能。 或者,用户可以切换到其他版本,例如CDNJS,作为Annimate.CSS元素配置的另一台主机。 格式如下所示:

Animate.css入门[教程]

Animate.CSS上的动画

Web设计师从Animate.css入门开始重视简单而高质量的动画,该动画可以区分Web应用程序上的内容。 Animate.CSS上提供的动画样式表包括大量可自定义文档元素的级联样式表(CSS)动画样式。 此外,要为元素创建动画设计,开发人员必须输入“动画”标签。 该类嵌入在文档元素中,并且需要其他指令才能更好地定义内容属性。 通常,开发人员依靠功能设置为“无限”的活动元素来在网站内启用动画设计的多个周期。 同样受到高度重视的是,Animate.CSS样式表列表中提供了动画的持续时间约束以及延迟和用户动画交互。

下面显示的是动画类,可供Web开发人员使用Animate.css [Tutorial]实施,以实现到Web应用程序文档中。

开始定时动画

在大多数情况下,Web开发人员会从Annimate.CSS入手,寻求动画设计来改善网站上的内容。 合理地讲,动画应具有作为吸引网站访问者访问网站上特定信息的方法的能力。 因此,开发人员应了解如何配置有关动画延迟,速度和时序的元素。

延迟

目前,Animate.CSS通过特定的样式表为开发人员提供延迟功能。 例如,带有延迟功能的样式表可能如下所示: 例。” 在这种情况下,附加了反弹动画类的元素将发生两秒钟的延迟。 延迟类别标识为“延迟”,可以将延迟功能从一秒更改为五秒。 如果用户添加级联样式表(CSS)文本,尤其是代码,则可以接受进一步的延迟时间。

速度

此外,Annimate.CSS上的元素设计具有速度时间值。 开发人员可以使用该类的特定样式表来校正动画的速度。 例如,动画时间序列可能如下所示: 例。” 此外,开发人员可以使动画元素反弹并创建“更快”的速度功能。 此外,类名称可能称为“慢”,“慢”,“快”和“更快”。 除类名外,诸如“ 2秒”,“ 3秒”,“ 800毫秒”和“ 500毫秒”的速度时间也说明了元素功能的速率。 默认情况下,元素速率设置为一秒的标准值。 具有附加扩展名的用户可以通过级联样式表(CSS)Annimate.CSS样式表中的手动文本编辑来更改计时。

开始自定义构建

如前所述,开发人员可以手动调整Animate.CSS样式表,以开发与标准默认值分开的新动画。 另一个来源,例如“gulp.js”是Animate.CSS兼容的,并提供了易于设置的自定义动画版本。 更具体地说,跨浏览器平台是用于任务开发的自动化程序。 对于Web开发人员和程序员,Gulp扩展程序分析并组织了各种管道驱动的文件,以支持用户服务器上的插件。 在这种情况下,Gulp与依赖项进行交互以创建个性化的动画构建和功能。

例如,初始阶段要求开发人员输入样式表脚本“ $ cd path / to / animate.css /”。 管理员再次使用“ $ npm install”解决该文档。 之后,Web开发人员将把构建版本加入“ NPX Gulp”打包程序中。 另外,Gulp内的包装可调节,以包含动画设计样式以适合Web内容。 用户可以使用“ animate-config.json”脚本编辑该软件包,以选择并选择适当的版本。 选择值为“ true”和“ false”的构建选项,确定从NPX Gulp列表中添加或删除的构建。

带有Java动画的CSS

借助Javascript,Animate.CSS库模块使用户能够使用其他功能来设计Web应用程序。 这些功能包括具有特定方向指令的更具体的动画功能,动画定时信号,添加和删除动画关键点以及后期动画效果。 也, Javascript提供更好的跨浏览器功能 用于Animate.CSS扩展,并为用户提供了更大的灵活性,使减速对用户软件的效果最佳。

总结

总之,Animate.css是一个跨浏览器库模块,具有简单有效的层叠样式表(CSS)编程。 该设计鼓励开发人员发挥创造力,并具有与其他依赖项兼容的功能,并包括许多动画设计功能。 随着设计样式表的不同版本,动画行为也通过程序员文本交互而改变。 Web应用程序开发人员在Annimate.CSS的支持下创建了更多内容 响应式网站 带有易于维护的高质量动画,并提供独特的网站互动。

重构CSS代码

重构CSS代码

编写好的代码不仅仅可以在网页上获得所需的结果。 好的代码应该尽可能高效和简洁。 尽管通常有很多方法可以达到相同的结果,但最简洁,最简单的方法是理想的选择,除少数例外。

编写好的,干净的代码有两个主要好处。 首先,它可以显着 提高网站速度和性能。 文件越小(发送的外部请求越少),网站在浏览器中加载所需的时间就越少。 其次,编写好的代码具有使维护更容易的宝贵好处。 无论您是自己编写项目还是与其他开发人员一起编写代码,代码越精简(理想情况下具有良好的文档编制),对于必须重新访问代码库的人来说,头痛就越小。

编写良好代码的最佳实践通常适用于所有编程语言,尽管本文将专门针对改进您网站上的CSS进行定制。

删除不必要的HTTP请求

在开发网站的过程中,很多时候,您最终可能会遇到多个外部文件以及从HTML文档或CSS文件链接到的依赖项。 您可以尝试在外部CDN上托管的多种不同的字体或CSS框架。 这些依赖关系中的每一个都代表您的站点每次在浏览器中加载时发出的HTTP请求。 这给站点加载时间带来了很大的压力,所有这些请求加起来很快。

如果您在项目中添加了一堆外部字体文件,但当前仅在CSS文件中引用1或2,请仔细阅读并从 <head> HTML文档。

您是否仅使用CSS框架编写了几行代码? 考虑将这些行复制并粘贴到主行中 .css 样式表,然后删除指向原始CSS框架代码的链接。

简化和整合CSS规则

在编写CSS时,您可能最终会反复为各种不同的元素和选择器编写相同的规则。 在计算机编程中,经常重复使用的“ DRY”(不要自己重复)的概念也适用于CSS。 只要您发现自己为不同的选择器编写相同的CSS规则,就可以找到一种合并它们的方法。

例如,代替编写:

p {font-size:14px; 保证金:0自动; 显示:inline-block; } h1 {margin:0 auto; } img {display:inline-block; 保证金:0自动; }

 

考虑写:

p,h1,img {margin:0 auto; } p {font-size:14px; } p,img {display:inline-block; }

 

甚至更好:

/ *应用于p,h1和img元素* / .def-margin {margin:0 auto; } / *应用于p元素* / .def-fs {font-size:14px; } / *应用于p和img元素* / .d-ib {display:inline-block; }

 

尽管这看起来似乎没有很大的区别(至少在代码行方面),但是字符的总数已大大减少,这将对页面加载时间产生影响。 此外,它合并了使用相同样式的元素和选择器,从而使您更清楚地了解将哪些常见样式应用于不同的元素。

重构CSS代码

 重新评估您的ID和类别值

将样式表示的一个方面分配为类或ID值通常很诱人,但这远非理想。 例如,对于错误消息,使用它通常似乎很有意义 red 作为类或ID值,例如:

这是一条错误消息

 

但是,如果您更改此类的颜色或其他样式,会发生什么? 此类将不再与其内容或演示文稿有直接关系,并且极有可能引起混乱。 在这种情况下,更好的选择是使用一个解释其功能的类值,而不是其样式表示形式:

这是一条错误消息

 

使用类和ID值来描述该元素的内容或功能,而不是使用任何样式描述,总是一个好主意。 在创建网站的整个过程中,样式可以更改很多次,但是对函数使用描述符将使代码更易读和易于维护。

重新评估选择器的选择

选择元素通常有很多不同的方法,但是通常有比其他更有效的方法。 虽然可以将选择器相互嵌套以获取特定元素,但是如果您发现自己必须进入过多的层次,则最好重新评估类或ID值是否可以更好地工作。

检查冗余

在设置网页样式的过程中,您可以尝试使用各种不同的颜色,例如,多种相同颜色的阴影。 将这些不同的规则集保留在代码中很容易,而无需确定确定的单一颜色。 用于检查这些类型的冗余的一个很好的工具是 cssstats.com.

这不仅可以简化您的代码,还可以使总体设计更加一致,而不是在站点上使用40种不同的颜色阴影。

缩小CSS文件

一旦您的CSS文件完全准备好用于生产并部署到实时服务器中,则最好将它们最小化以实现最佳性能。 压缩程序将从源代码中删除所有空格,从而大大减小了文件大小。 由于源代码的功能(仅可读性)并不依赖空白,因此不会对您的网站运行产生负面影响。

有许多免费工具可用于缩小CSS(和JS文件)。 一种选择是 cssminifier.com 

整合您的CSS文件

正如上一篇文章中简要提到的那样,最好尽可能地整合资源。 尽管有很好的论据在开发阶段保持CSS模块化(例如将布局规则保留在一个CSS文件中,将颜色选项保留在另一个CSS文件中),但最终您还是希望将所有这些CSS规则合并到一个文件中,以用于最棒的表演。

CSS3原生动画

CSS3原生动画

虽然像 Animate.css 可以很容易地将CSS动画添加到您的项目中,它们主要由常见的动作组成,例如“弹跳”,“摇动”以及其他股票动作,这些动作在过度使用时会感觉很陈旧。 通过利用CSS内置的动画属性,您可以创建远远不只是运动的更加复杂和自定义的动画。 CSS动画可以影响元素的颜色,大小,位置或CSS3规范中可用的任何其他属性。 这篇文章将介绍原生CSS3属性的入门知识,以及一些可能的用法示例。

将动画添加到元素

要给HTML元素动画,前两个步骤是为动画声明名称和持续时间。 这是通过 animation-nameanimation-duration 特性:

#我的动画 {
    动画名称: 颜色变化;
    动画时间: 5s;
}

 

animation-duration 可以接受以秒或毫秒为单位的任何值(使用 s or ms 在整数之后)。

制作动画

声明名称和持续时间后,就可以制作动画了。 这是通过使用 @keyframes 规则,后跟动画名称:

@关键帧 颜色变化 {
    
}

 

在里面 @keyframes 规则将是动画的每个“帧”的规则,由 0%100%. 0% 是动画的开始, 100% 作为结束,中间可以有任何百分比值。 可以将其想象为视频或翻书,其中书的每一页都是一个独特的框架,当组合时会产生运动:

@关键帧 颜色变化 {
    0% {
        背景色: 黑色;
    }  
    50% {
        背景色: 灰色;
    }
    100% {
        背景色: 白色;
    }
}

 

在上面的示例中, color-change 动画会改变 background-color#myAnimation 来自的元素 black at 0%, 至 gray at 50% 然后终于 white at 100%.

但是,使用自定义动画的力量在于,您可以绝对更改任何CSS属性,并且可以在帧中进行任何级别的增量更改。 一个很好的例子是 :hover 伪类。 的CSS :hover 当用鼠标悬停元素时,状态通常用于应用颜色或较小的样式更改,但是动画可以使这些更改更加详细。

按键:徘徊 {
    动画名称: 按钮动画;
    动画时间: 5s;
    动画填充模式: 前锋;
}
@关键帧 按钮动画 {
    0% {
        背景色: 蓝色;
    }
    50% {
        改造: 规模(2.1);
        背景色: 道奇蓝;
    }
    75% {
        改造: 规模(2.5);
        背景色: 白色;
    }
    100% {
        改造: 规模(1.5);
        背景色: 蓝色;
    }
}

 

在上面的示例中 button-anim 动画效果任何 button 元素悬停时。 它的 background-color 在5秒钟的时间内以四个相等的步长进行更改,元素本身的大小也以不重复的独特步长进行更改(原始尺寸更改为原始尺寸的2.1x,2.5x和1.5x)。

上例中包含的另一个属性是 animation-fill-mode 属性。 此属性可用于指示在动画持续时间之前(和之后)应如何应用样式。 使用 animation-fill-mode: forwards 表示动画最后一帧中的样式( 100% 规则)将保持适用。 不加 animation-fill-mode 属性,样式 button 动画完成后将恢复为原始状态。

总结

CSS动画可能非常复杂和详细,最多可以指定100个不同的帧。 考虑到该功能可在原始CSS中原生使用,因此,这是增加Web应用程序视觉趣味性和复杂性的好方法,所有现代浏览器都很好地支持该功能。

在CSS3中使用颜色渐变

在CSS3中使用颜色渐变

自 CSS3 引入以来,可以使用颜色渐变作为背景,两种或多种颜色逐渐淡入彼此。 以前,创建渐变必须使用 Photoshop 或其他 图像编辑 软件。 有效使用,这是一种为网页设计增添趣味甚至纹理的好方法,而不仅仅是静态背景颜色。 虽然 Internet Explorer 的旧版本不支持此功能,但您可以安全地将它们添加到项目中,因为所有现代浏览器都支持它。 这篇文章将看看使用渐变背景,以及可用的自定义选项。

基本线性渐变

设置元素的背景(是否为 body,以 div或其他元素), background 使用属性,通常使用颜色值:

身体{背景:#fffbed; }

 

要使用线性渐变而不是纯色,请在内部至少包含两种颜色(使用十六进制,rgb,hsl或命名的颜色值),并用逗号分隔。 linear-gradient() 值:

正文{背景:linear-gradient(#fffbed,#45add3); }

基本线性渐变

供应商前缀

由于不同的浏览器会处理 linear-gradient 值不同,强烈建议与供应商前缀一起使用。 这将确保Safari,Firefox,Chrome和Opera可以理解该值。 要使用供应商前缀,只需添加两个额外的前缀 background 与规则 linear-gradient 前缀为 -webkit--moz-。 它们也应出现在常规规则之前,且不带任何供应商前缀:

正文{背景:-webkit-linear-gradient(#fffbed,#45add3); 背景:-moz-linear-gradient(#fffbed,#45add3); 背景:线性渐变(#fffbed,#45add3); }

 

这是一种额外的输入,但是可以确保所有主要浏览器都支持您的渐变。

控制方向

默认情况下,渐变会从上到下过渡,第一个颜色包含在 linear-gradient 值是顶部颜色。

不过,您可以通过在颜色之前添加一些方向关键字来更改渐变的方向(即 to top, to bottom, to right, to left, to right top等)

身体{背景:线性渐变(右下,#fffbed,#45add3); }

 

将方向设置为转角时,可以先声明x轴或y轴(即 to right bottomto bottom right 是相同的)。

多种颜色

您可以简单地通过逗号将它们分开来使用渐变中的两种以上颜色:

身体{背景:线性渐变(#eaecee,#abebc6,#45add3); }

or

身体{背景:线性渐变(#eaecee,#ebdef0,#f4f6f7,#abebc6,#4eb39d,#45add3); }

 

颜色停止

有时,您将需要控制某种颜色的开始位置,从而允许某些颜色占用更多空间或具有更大的过渡空间。 要添加这些“色标”,只需在给定颜色之后添加一个百分比值,以指定该颜色应从何处开始:

body {background:linear-gradient(#eaecee,#abebc6 30%,#45add3%80); }

 

这对于更好地控制过渡非常有用,并且可以用于产生有趣的效果。

径向渐变

线性渐变的一种可用变化是径向渐变。 径向渐变将从元素的中心过渡,像圆一样向外过渡。 他们使用与线性渐变几乎完全相同的语法,只是 radial-gradient 取而代之的是:

body {背景:radial-gradient(#eaecee,#45add3); }

CSS3颜色渐变

 

CSS定位概述

CSS中最重要的属性之一是 position 属性。 虽然可以在不显式更改页面值的情况下对页面上的元素进行布局很多 position 财产,大多数 高级布局问题 将需要知道此属性可用的不同值。 这篇博客文章将探讨以下四个主要价值 position,以及您可能会在其中使用它们的实例。

位置静态

static 是的默认值 position,这意味着您无需为任何元素明确设置任何值 position, 这将是 static 默认。 带一个元素 position of static 将不接受任何框偏移属性,例如 margin or padding .

在下面的示例中,每个 div 由于每个都是块级元素,因此它们将彼此堆叠:

单元1 单元1 第三单元单元2

 

身体{font-family:Helvetica; 白颜色; } .container {background-color:#fffbed; } .unit {background-color:#337e7e; 高度:80px; 宽度:80px; 文本对齐:居中; 行高:80px; 边框:#696969 2px实心; }

 

CSS定位

相对位置

带一个元素 position of relative 与...的价值非常相似 static,尽管有一个主要区别:它们可以接受的框偏移属性 top, right, bottomleft.

如果元素带有 position of relative,这些偏移属性设置了距元素正常位置的距离。 换句话说,如果您要使用 position of relative 有一个 top 价值 10px,该元素将出现 10px 低于其正常显示的位置 positionstatic.

带一个元素 position of relative 保持在元素的正常“流动”范围内,框偏移量属性只是将元素从其正常流动中移位:

单元1 单元1 第三单元单元2

 

身体{font-family:Helvetica; 白颜色; } .container {background-color:#fffbed; } .unit {background-color:#337e7e; 高度:80px; 宽度:80px; 文本对齐:居中; 行高:80px; 边框:#696969 2px实心; 职位:相对} .unit-1 {顶部:10像素; } .unit-2 {右:30px; } .unit-3 {左:20px; } .unit-4 {底部:-30px; 右:40px; }

 

CSS定位概述

绝对位置

带一个元素 position of absolute 尽管它们已从常规元素流中删除,但它们也接受框偏移属性。 在上使用框偏移属性 absolute 被定位的元素将使该元素与其父元素直接相关。

采用与CSS完全相同的CSS position: relative; 上面的示例,但只需更改 positionabsolute 将导致各个元素的定位完全不同:

单元1 单元1 第三单元单元2

 

身体{font-family:Helvetica; 白颜色; } .container {background-color:#fffbed; } .unit {background-color:#337e7e; 高度:80px; 宽度:80px; 文本对齐:居中; 行高:80px; 边框:#696969 2px实心; 位置:绝对; } .unit-1 {顶部:10像素; } .unit-2 {右:30px; } .unit-3 {左:20px; } .unit-4 {底部:-30px; 右:40px; }

 

CSS定位

固定位置

一个带有 position of fixed 非常相似 position: relative;,尽管该位置是相对于浏览器视口,而不是相对于任何父元素。 此外,无论用户在页面上的什么位置,该元素都不会随页面滚动,保持“固定”并且始终可见。 这通常用于将页眉和页脚“固定”在页面上,以便始终可见。

CSS选择器概述

CSS选择器概述

在Web开发中,通常有很多方法可以达到相同的结果。 编写出色代码(无论使用哪种语言)的关键是使用尽可能高效的方法,编写尽可能少的代码并将代码库保持在最低限度。 这将缩短页面加载时间,并为您自己和其他开发人员提供清晰的源代码。 在编写CSS时,重要的是要知道如何选择要定位的元素以及最佳方法。 本节将介绍一些最常见的CSS选择器,以及使用它们的最佳实例。

类型选择器

对于每个HTML元素,都有一个对应于该元素类型的选择器。 不管是 div, p, img 或任何其他HTML元素,则相应的CSS选择器是完全相同的,减去标记中使用的尖括号:

p {颜色:黑色; } div {display:inline:block; } img {宽度:200px; }

 

类型选择器是您想要定位的理想选择 每周 给定元素类型的实例,并对所有元素应用相同的样式。

类选择器

类选择器利用与特定元素关联的类名称。 当您想要将某些样式应用于各种不同的元素时,无论元素类型如何,此选择器都是理想的选择。 例如,您可能有一个 .responsive 应用于 p, divimg 元件:

这一段是有反应的响应式 div

 

以下CSS代码块将使用同一类定位所有这些元素:

响应{宽度:80%; 保证金:0自动; }

 

类选择器始终在样式表中使用句点(.)之前的班级名称。

ID选择器

ID选择器类似于类选择器,尽管它们只能应用于给定HTML文档中的单个元素。 当您 仅由 想要定位单个元素:

这是一段风格独特的段落
#myParagraph {颜色:绿色:宽度:200像素; 向左飘浮; 显示:inline-block; }

 

ID选择器始终在样式表中使用井号或井号(#)放在ID名称之前。

通用选择器

通用选择器将定位HTML文档中的每个单个元素。 这通常用于CSS重置,例如从所有元素中删除默认边距,填充和其他样式:

* {边距:0; 填充:0; }

 

通用选择器使用星号(*).

:hover

另一个常见的选择器(也是许多CSS“伪类”之一)是 :hover。 将此伪类添加到任何选择器将以元素的悬停状态为目标。 这意味着这些样式将 仅由 当用户将鼠标悬停在该元素上时应用:

a:hover {文本装饰:下划线; 颜色:紫色; }

 

:hover 通常用于链接或用户将鼠标悬停在其上时要突出显示的任何元素。 该伪类对笔记本电脑和台式机用户非常有效,尽管由于缺少鼠标光标而无法用于移动设备。

了解CSS的特异性

了解CSS的特异性

在编写CSS代码的过程中,您总是会遇到这样的情况,即您刚编写的代码在页面上似乎根本没有任何作用。 如果没有类似的帮助,这可能会令人沮丧,混乱并且难以解决 Chrome开发者工具。 但是,对CSS的特异性和级联的工作方式有更好的了解可以完全缓解这些问题。 本节旨在指出一些主要问题,这些问题通常在试图确定哪些代码阻止了您要执行的操作时出现。

众所周知,CSS(代表层叠样式表)从上至下起作用。 通常,这意味着文档中排在最后的代码优先于文档中排在后面的其他代码。 一个简单的例子是有两个针对相同元素的声明:

 

p {color:blue; } p {颜色:绿色; }

 

在此示例中,段落元素的颜色将始终为绿色,因为它出现在将蓝色分配给段落的声明之后。

问题在于,不仅元素选择器之外的选择器具有不同的特异性级别,并且组合选择器会提高其特异性,从而覆盖其他规则。

元素和伪元素

元素和伪元素具有最低的特异性。 既然他们瞄准了 所有 给定元素的实例,仅当您确实希望将这些样式应用于以下元素时,才应使用元素选择器 所有 段落,div,标题等的实例。例如,以下代码将1px的纯黑色边框应用于文档中的所有段落元素。

 

p {border:1px纯黑色; }

 

类,属性和伪类

类,属性和伪类具有更高的特异性,并且仅适用于与它们关联的元素。 它们是可重用的,也就是说,只要您希望它们共享相同的样式,就可以将它们应用于多个不同的元素。 这些样式还将覆盖与元素级别的样式冲突的样式。 在下面的示例中,所有段落元素均为绿色,但类别为 alert,它将为红色:

 

p {颜色:绿色; } p.alert {颜色:红色; }

 

标识

ID具有最高的特异性之一,并且将覆盖几乎所有内容。 与可以重复使用多次的类不同,ID仅应应用于 页面上的元素。

 

p#myParagraph {颜色:黑色; } p.alert {颜色:红色; } p {颜色:绿色; }

 

即使在下面有两个针对段落的声明 p#myParagraph 声明,ID #myParagraph 永远是黑色的。

内联样式

内联样式比ID具有更高的特异性。 通常,内联应用任何样式都是很不满意的,因为很难找到和管理应用于元素的样式,但在某些情况下可以证明其合理性。

我的红色款

 

无论其他位置应用了哪种样式,上述内联样式将始终为红色。*

!important

上面提到的一个警告,甚至包括内联样式,都是使用 !important。 每当 !important 被添加到CSS规则后,无论如何,该规则始终优先于所有其他规则:

 

p {color:blue!important; }

 

!important 当您无法找出阻止CSS的原因时,它可以成为救生员,但是它也很容易被滥用,只会使您的代码更加混乱。 作为一般规则,使用 !important 仅当所有其他方法都失败时。

为了更好地理解和检查特异性,非常方便的工具是 Keegan Street的特异性计算器。 如有疑问,在此处检查选择器会非常有用。

使用WOW.js和Animate.css进行滚动触发的动画

WOW.js和Animate.css

动画是一种为您的网站增添视觉刺激和动感的好方法, animate.css 库提供了一种将基于CSS的动画添加到任何网站的简便方法。 但是,如果您只想在用户滚动到网站的特定部分后才触发这些动画,该怎么办?

这当然可以通过 jQuery 来完成,但是单独使用 JavaScript 库来实现该功能会增加不必要的功能,否则可以通过简单的脚本来完成。 WOW.js 解决了这个问题,提供了一个易于使用的库,用于添加滚动触发的动画,不需要 jQuery,大小仅为 3kB。

这篇文章将提供有关在您的Web项目中使用WOW.js和animate.css的指南,包括可用于安装它的各种选项。点击鸣叫

如果您对滚动效果以外的其他动画感兴趣,请访问本博客的最后一节,以获得其他CSS和Javascript动画库的列表。

关于animate.css

使用WOW.js和Animate.css进行滚动触发的动画2019更新

使用CSS动画是向任何HTML网站添加醒目的视觉效果的简单明了的方法。 animate.css是CSS动画最受欢迎的库之一。 尽管该库可能很小,但对于希望在不复杂使用键框的情况下向其网站中添加更多垃圾邮件的新手Web开发人员而言,它是一个理想的工具。 尽管此博客文章将主要讨论如何使用WOW.js,但animate.css文件非常灵活,也可以与其他文件一起使用。

您可以添加到网站元素中的许多动画包括:

  • 静态动画:当您加载并打开网页时,这些类型的动画会正确显示。 换句话说,不涉及滚动(WOW.js)!
  • 滚动动画:当用户滚动到网页上元素的视图时,将显示这些类型的动画。 这是我们将通过WOW.js关注的动画类型。 该动画也可以使用jQuery创建。
  • 点击动画:结合jQuery和Javascript编程,您可以在网站上创建动画,这些动画在用户单击某个元素时运行。
  • “特殊”动画:当您确实想通过引人注目的动画立即捕捉用户的注意力时,可以在元素上使用这些更奇怪的动画。

关于WOW.js

WOW.js是一个Javascript文件,当将其添加到HTML文档中时,可以在网站上创建引人注目的动态效果。 这种滚动效果是Web设计人员最受欢迎的选项之一,因为它过去曾被MIT许可为开源代码。 当您访问实现WOW.js的网站时,向下滚动该网站时,动画元素将神奇地出现。 有关此效果的示例,请访问官方网站以获取 哇.js。 它是与animate.css一起使用的出色设计工具。

与使用Javascript的其他动画选项相比,WOW.js因其简单,无大量代码而非常受欢迎。 请注意,您可以使用其他CSS动画库来激活WOW.js。 WOW.js只是将animate.css视为其默认库。 这包括CSShake或DynCSS之类的库。 WOW.js可免费用于开放源代码项目,尽管需要为任何商业项目购买许可证。

将animate.css和WOW.js添加到您的项目

为了开始对网站进行动画处理,第一步是将animate.css和WOW.js添加到HTML文档中。 您可以通过几种方法将文件添加到HTML项目中。 您可以从各自的官方网站下载animate.css和WOW.js的发行版,也可以直接链接到以下网站提供的文件: 。 CDN拥有大量的Javascript和CSS库。

在您的网站上使用animate.css的主要好处是CSS代码仅保存在一个文件中,从而简化了项目 非常。 将CSS文件添加到项目后,只需将其链接到文档顶部的HTML即可。 或者,您可以简单地将CDN文件链接到HTML文档。 根据是直接添加animate.css文件还是直接链接到CDN文件,只有href会略有不同:

安装animate.css和WOW.js

单击下面的链接以查看CDN上的animate.css和WOW.js文件:

(注意:“最小化”代码是指删除空格和较短的字符,以便保留功能,但创建更紧凑的文件大小。这对于想要自定义或更改代码的人来说,使代码更难以阅读和编辑。代码。)

使用npm安装animate.css和WOW.js

另外,您可以使用软件包管理器(例如npm(Javascript软件包管理器))安装animate.css和WOW.js,只需在命令行中键入一些关键字即可。 在项目目录的根目录中,从命令行运行以下命令:

npm安装wowjs

通过npm安装WOW.js的一个好处是,它还会自动将animate.css安装为依赖项。 这样,您无需担心按照上面讨论的选项之一下载animate.css的说明。 类似于直接添加文件或使用CDN,animate.css将链接到您的文档中(href路径将根据文件位置而有所不同):

对于脚本,您可以通过在HTML文档的底部,即结束标记下方进行链接,将WOW.js添加到您的网站。 这之后必须跟一个 标记以激活WOW.js,如下所示:

新的WOW()。init();

向元素添加动画

将两个文件都添加到项目后,就该选择要在滚动时进行动画处理的HTML元素了。 任何具有.wow类的元素都将保持隐藏状态,直到用户在页面上找到它为止。 您可以将此类应用于标题,文本,图像,甚至包含在网站的较大部分(包括在标签。

将.wow类添加到要与WOW.js关联的任何HTML元素(例如h1元素):

欢迎来到我的网站!

Animate.css有75种不同的动画样式可供选择,所有这些样式都可以在官方网站上进行演示(请参见上文)。 选择要使用的动画后,将其名称作为CSS类添加到要进行动画处理的元素上,并添加类“哇”。 这是在HTML文档上运行的animate.css和WOW.js的一些示例:

欢迎来到我的网站!

现在,一旦用户在页面上滚动到h1元素,它就会向右淡入。

点击这里

随附的内容现在,一旦用户在页面上滚动到网站上,它就会在网站上产生脉冲效果。

对WOW.js动画的更改

通过对HTML文档进行一些内联​​编辑,可以对CSS动画进行一些细微的调整。 您可以在之后添加这四个属性 class =“哇” 甚至将它们合并到任何HTML标签中。 本质上,这些简单的属性是用户向滚动动画添加多功能性的一种简便的方法。 以下是使用WOW.js为HTML元素设置动画时可以更改的四个属性的描述:

  • data-wow-delay =“ _ s”:通常,元素会在用户滚动到其位置时自动显示。 使用此属性,您可以将动画延迟_秒。
  • data-wow-duration =“ _ s”:您可以使动画持续_秒,这对于加快或减慢元素的外观很有用。
  • data-wow-iteration =“ _”:使用此属性,您可以使动画重复或迭代_次,直到动画在页面上变为静态。
  • data-wow-offset =“ _”:此属性允许动画在动画之前从浏览器边缘开始_像素。

animate.css和WOW.js的替代动画库

Bounce.js

Bounce.js是一个易于使用的工具,可以创建出色的CSS3和Javascript动画Bounce.js是一个易于使用的工具,可在短短几分钟内为您的网站创建出色的CSS3和Javascript动画。 开发人员可以在Bounce.js Web工具上尝试各种动画列表,以生成静态关键帧,甚至可以直接在Web浏览器中自定义动画。 当动画满足您的标准时,您可以直接从站点导出CSS代码并将其粘贴到您的项目中。 然后,您可以使用在Web浏览器中创建的动画,并将其直接应用于HTML文档中的元素。 该网络工具甚至生成一个唯一的,缩短的URL,以便您随时可以对其进行编辑时使用它在新的Web浏览器上访问动画。

要了解有关使用JavaScript创建动画并将Bounce.js库安装到项目中的更多信息,可以按照说明在其上安装Bounce.js库的说明。 Github网站.

动漫.js

Anime.js,利用CSS属性,Javascript对象,SVG和DOM属性创建令人印象深刻的动画另一个流行的动画库是Anime.js,它利用CSS属性,Javascript对象,SVG和DOM属性来创建令人印象深刻的动画。 朱利安·加尼尔(Julian Garnier)的收藏集中包含数十种无缝动画,您可以将它们直接添加到自己的网站中。 您可以在Anime.js Codepen集合上查看用Anime.js创建的各种动画。 与WOW.js不同,此动画库不一定用于在网站上设置HTML元素的动画。 而是,Anime.js用于为您的网站创建单独的动画“插图”,以增加其视觉吸引力。 我最喜欢的一些包括卡尼尔(Garnier)的 线条画动画分层动画演示。 要将Anime.js库添加到您的项目中,可以通过npm安装。

在上查看有关使用Anime.js的说明和文档。 Github网站.

Hover.css

Hover.css只需将鼠标悬停在动画元素上,即可在您的网站上产生醒目的效果。Hover.css只需将鼠标悬停在动画元素上,即可在您的网站上产生醒目的效果。 您可以使用此动画库向普通的2D元素(例如按钮,徽标或图像)添加更多斑点。 在Hover.css网站上,您可以通过将鼠标悬停在每个按钮上来浏览和测试各种动画,例如背景,2D,阴影和轮廓过渡。 那些打算使用一个或几个Hover.css动画的人可以简单地下载文件并将特定的动画复制/粘贴到自己的样式表中。 但是,如果计划使用许多Hover.css动画,则基本上可以按照相同的过程进行安装,并将Hover.css样式表链接到HTML文档。 您将有权访问所有Hover.css效果以为网站上的任何适当HTML元素设置动画。

要查看有关安装和使用Hover.css的特定说明和文档,请转到官方 Github网站.

打字.js

使用WOW.js和Animate.css博客文章:Typed.js概述要创建标志性的打字机或打字效果,Web开发人员常用的选项是使用Typed.js。 许多网站都使用此动画库在页面上创建字符串效果,包括流行的组工作区平台Slack。 只需通过npm安装Hover.css库,或将CDN文件链接到您的HTML文档。 与本质上一个 标签,您可以使用打字机效果为HTML文本标签设置动画。 通过足够的调整,您可以在网站上创建更高级的打字效果,从而获得更出色的效果。 例如,您可以创建计算机键入时暂停的效果或删除单词中的字母的效果。

官方 Github网站 包括所有源代码和有关如何自定义键入动画以满足您的个人喜好的详细文档。

CSShake

CSS摇动是所有“摇动” HTML元素的动画的集合顾名思义,这个CSS库是动画的集合,这些动画会“震撼”您网站上的所有HTML元素。 如果您想吸引人们注意网站的特定图像或部分,则此古怪的动画非常完美。 它还使您的网站的元素更具交互性,这对于前端开发始终是一个加号。 您可以将鼠标悬停在页面上的不同元素上,自己在CSShake网站上尝试制作各种晃动动画。 CSShake Github上的源代码还包括详细的文档,这些文档描述了如何创建自己的自定义抖动动画。 您将必须阅读文档,以了解和学习调整jQuery属性。

当您准备将CSShake安装到自己的项目中时,请按照以下说明进行安装: Github网站.

CSS flexbox和高级CSS选择器简介

的CSS Flexbox (或灵活框式布局)是CSS3规范的最新添加,目的是解决网页的许多布局问题,尤其是在使用多种设备尺寸和响应式网页设计时。 而最近的CSS grid 属性能够创建复杂的基于网格的布局, flexbox 通常是在较大布局中布置少量组件的更好选择,通常,与使用时相比,使用更少的代码 grid。 这篇文章将简短介绍如何使用flexbox属性解决常见的布局问题。

display: flex

创建Flexbox的第一步是应用 display: flex 父元素的属性,该元素将充当其中所有flex项目的容器。

虽然大多数布局都需要使用其他属性。 单独使用此属性可以创建一个简单的2列布局。

例如,我们可以将一个包含2 div 元素彼此堆叠,并通过添加元素将其转换为2列布局 display: flex 属性:

原始码:

HTML


    
    

 

的CSS:

#容器 {
    高度:600px;
    宽度:800px;
}
#column1 {
    背景颜色:蓝色;
    高度:300px;
    宽度:400px;
}
#column2 {
    背景颜色:绿色;
    宽度:400px;
    高度:300px;
}

 

CSS Flexbox简介

CSS与flexbox:

#容器 {
    高度:600px;
    宽度:800px;
    显示:flex;
}
#column1 {
    背景颜色:蓝色;
    高度:300px;
    宽度:400px;
}
#column2 {
    背景颜色:绿色;
    宽度:400px;
    高度:300px;
}

 

CSS Flexbox简介

flex-direction

我们可以通过以下方式对Flex容器中的元素流添加其他控制: flex-direction 属性。 默认情况下,flex容器中的所有元素都会在 row 从左到右,尽管我们也可以将此属性设置为 column, row-reverse or column-reverse.

调整间距和对齐方式 justify-content

通常,容器中的空间会比容器中的元素占用的空间大,因此您可能希望以某种方式证明元素的间距合理。 默认情况下,flex容器中的所有元素都将与容器的最开始对齐(称为 flex-start),但还有其他多种选择。 请注意,实际位置会根据 flex-direction:如果方向设置为 row 然后 flex-start 会一直指示到容器的左侧,而 column 将指示容器的最顶部 flex-start.

返回原始代码示例,我们将增加 width 可以更好地显示容器的不同之处 justify-content 设置。

justify-content: center 将所有元素直接放置在列的中心:


    
    

 

#容器 {
    高度:600px;
    宽度:1000px;
    显示:flex;
    证明内容:中心;
}
#column1 {
    背景颜色:蓝色;
    高度:300px;
    宽度:400px;
}
#column2 {
    背景颜色:绿色;
    宽度:400px;
    高度:300px;
}

 

CSS Flexbox简介

justify-content: flex-end 与...相反 justify-content: flex-start,将元素放置在容器的最末端:

CSS Flexbox技巧

justify-content: space-between 将所有元素放置在容器的每一端,在容器中心以及内部任何其他元素周围保留任何空间(在具有3个或更多元素的容器实例中):

CSS Flexbox骇客

justify-content: space-around 就像 spae-between,尽管容器的最末端还有其他空间:

CSS Flexbox提示和技巧

高级CSS3选择器

但是,还有许多其他更高级的选择器,目的是针对具有更高特异性的元素。 熟悉适合该工作的正确选择器是学习CSS的最重要方面之一。 这篇文章将重点介绍定位元素的一些最有用的高级选择器。

儿童选择器

子选择器用于定位彼此嵌套的元素。 有两种不同的子选择器,后代和直接子选择器。

后代选择器

后代选择器用于定位给定元素(或元素组),而不管它们嵌套在其父元素中的什么位置。 例如:

.容器p

 

将同时针对 p 以下HTML中的元素:

这是一段这是另一段嵌套的段落。

 

直接子选择器

如果您只想定位从父元素向下一级的元素,则直接子选择器是要使用的选择器。

.container> p

 

只会选择第一个 p 以下HTML中的元素:

这是直接子选择器的目标段落这是另一段,“直接子级”选择器未定位

 

兄弟选择器

通用兄弟选择器

常规同级选择器将选择在第一个同级之后出现的同一嵌套级别上的任何元素。 例如:

h1〜格

 

将针对指定的2 div 出现在 h1,而不是之前的一个,或者可能嵌套在其他级别上的任何一个:

一个段落标题该div将定位另一段该div也将定位

 

相邻兄弟选择器

相邻兄弟选择器用于定位出现的元素 直接 在给定元素之后。 例如:

1+

 

只会针对 p 元素之后 h1:

... ... 本段将针对... ...

 

伪类

在之前的CSS选择器文章中,我们通过 :hover 选择器。 但是,还有许多其他伪类,例如 :link, :visited, :active 和更多。

造型 a 尚未访问的链接,请使用 :link 选择器:

a:link {颜色:绿色; }

 

st a 已访问的链接,请使用 :visited 选择器:

a:参观过的{颜色:蓝色; }

 

新的 :active 只要用户与元素互动(例如单击它),就可以使用选择器:

.click-me:active {border-radius:50%; }

 

:focus 在元素具有“焦点”的情况下使用,例如当用户通过鼠标或键盘单击输入表单元素时:

a:焦点{高度:120%; }

总结

您是否在这篇文章中找到有用的CSS技巧? 请在下面分享你的评论。

 

安吉洛·弗里西纳阳光媒体

作者介绍

Angelo Frisina 是一位经验丰富的作家和数字营销专家,在该领域拥有超过 XNUMX 年的经验。 他擅长网页设计、应用程序开发、SEO 和区块链技术。

Angelo 对这些领域的广泛了解导致创建了多个屡获殊荣的网站和移动应用程序,并为广泛的客户实施了有效的数字营销策略。

Angelo 还是一位受人尊敬的顾问,通过各种播客和在线数字营销资源分享他的见解和专业知识。

Angelo 热衷于紧跟数字世界的最新趋势和发展,对于任何希望在数字领域保持领先地位的组织来说都是一笔宝贵的财富。

一个 指南

  • Gabriele Russo 四月22,2022 2时:下午44

    Ottimo articolo, molto esaustivo!

    Ho letto con piacere ripassando qualche nozione che non uso da un po'。 Stavo cercando il modo di far ridtere un animazione ogni volta che l'utente scorre un punto specifico della pagina。 来potrei票价?

    Grazie anticipatamente per l'eventuale risposta。