分享到微信朋友圈

打开微信,“扫一扫”功能,
即可将网页分享至好友/朋友圈。

文章索引

返回顶部
  / 学习笔记 / H5 CSS3 / 关于@规则(at-rule)的那点小事儿

关于@规则(at-rule)的那点小事儿

本文为秃头大叔 小虎的个人博客 原创内容,转载请注明出处,有问题可联系本人!
本文地址:http://www.wuxiaohu.com/2017/05/04/886.html

首先,@ 到底是个什么东西 :

称为 at 符号(邮箱总还是用过吧);

一个以@开头,后跟一个标识符的语句就是一个 at-rule(@规则);

一个 at-rule是一个标准的CSS 语句。

@规则按其用法属性我们可把它们分为:条件规则普通规则

条件规则即所指的条件总等效于 true 或者 false,如果为 true 那么它们里面的语句生效;普通规则即为其他;

以下分类列出所有个人已知的@规则:

条件规则(2):

@media

CSS3修改;

指定媒体查询,针对不同的媒体类型定义不同的样式,可以针对不同的屏幕尺寸设置不同的样式;

@supports

CSS3新增;

可以根据浏览器对CSS特性的支持情况来定义不同的样式;

普通规则(6):

@charset

通用;

在外部样式表文件内使用,指定该样式表使用的字符编码;

@import

CSS3修改;

指定媒体查询,针对不同的媒体类型导入特定的外部样式表及目标媒体;

@font-face

CSS2.1删除,CSS3新增;

自定义嵌入HTML文档的字体,允许网页开发者为其网页指定在线字体;

@keyframes

CSS3新增;

通过逐步改变从一个CSS样式设定到另一个(可设定设定多次)实现动画;

@namespace

CSS3新增;

用来定义使用在 CSS 样式表 中的 XML命名空间;可以定义默认命名空间,也可以用于定义命名空间前缀;

H5 中,<svg>、<math>元素将被自动加上命名空间;

@page

通用;

用于在打印文档时修改某些CSS属性,只能修改margin,orphans,widow 和 page breaks of the document;

以上几个规则中,CSS3中用得最多的就是媒体查询(@media)和动画制作(@keyframes)了,虽然相关的文档网上一搜一大堆,但我还是要在这里总结一下:

(说到这儿我不得不说,在国内网搜索一个技术知识点,90%的搜索结果都一样,TM全是连标点符号都不改的copy啊有木有;前两天就 wordpress 某个自带函数的用法,搜到的就全是错误的信息,一毛一样啊,最后还得去官网求证了一遍才得以解决,哎 !)

-------手动滑稽--------

@media 媒体查询

最新版本CSS针对三种媒体查询,定义了四种类型:

all :所有设备,默认值

print :打印机和打印预览

speech :屏幕阅读器等发声设备

screen :彩色的电脑屏幕,包括平板电脑、智能手机等

用的最多的类型就是screen,而用到的功能“值”主要有:min-widthmax-width、min-height、max-height:

常用的写法格式:

1:针对屏幕宽度<1000px

@media (max-width: 999px){
    /*这里要求是 “<”,不包含 1000px,所以最大应该是 999px*/
    /*针对屏幕宽度<1000px的设备;因为没有指定媒体设备,所以对打印设备、电脑、手机都有效*/
}
@media screen and (max-width: 999px){
    /*针对屏幕宽度<1000px的设备;指定了媒体设备为 screen,则仅对对应的设备生效*/
}
@media only and screen and (max-width: 999px){
    /* 针对屏幕宽度<1000px的设备;指定了媒体设备为 screen;多一个关键词only,其实在现在各大浏览器的兼容情况下,only关键词是多余的,效果和上面是一样的,另外拥有类似效果的关键字还有 not(排除)*/
}

2:针对1000px<=屏幕<1400px

@media screen and (min-width: 1000px) and (max-width: 1399px){
    /*“>=” 最小值应该是 1000px ,“<” 最大值应该是 1399px*/
    /*针对屏幕>1000px且<1400px;指定媒体设备screen*/
}

3:针对屏幕宽度>=1400px

@media screen and (min-width: 1400px){
    /* 最小值为 1400px*/
    /*针对屏幕宽度>1000px的设备;指定媒体设备screen*/
}

@keyframes 关键帧实现动画

@keyframes 自身并不能设置动画实现效果,它只是用来设置、也必须设置包含0%(或from)和100%(或to)的动画帧——即动画的开头帧结束帧,并命名的一个动画规则;后续需要用 animation-name 来指定改名称实现该规则的动画。

几点规则定义的细节:

1 :不要忘了命名,且是唯一的,重复命名?当然是后者生效了

2 :必须定义开头帧结束帧;需要的属性,必须同时存在于开头帧和结束帧

3 :同一帧重复定义,即使有不同属性,也只有最后定义帧的属性生效

4 :!important 关键词是无效的,@keyframes 会认为那是错误的书写,不会生效

写法格式示例:

@keyframes myFrames { /*必须命名唯一*/
    0% { top: 0; left: 0px}
    50% { top: 30px; left: 20px; }
    50% { top: 10px; left: 20px !important;}/*同一帧重复定义,所以只有这一条生效;且 !important 使 left 属性也白搭了*/
    100% { top: 0; left: 30px; padding: 10px;} /*开始帧中并没有 padding 属性,所以它是无效的*/
}

定义好了帧规则,需要用到的时候,用 animation 调用:

animation 属性是一个简写属性形式,其完整的属性书写格式为:

animation :

animation-name(规则名,默认为空),

animation-duration(持续时间,默认为 "0"),

animation-timing-function(缓动函数,默认为 "ease"),

animation-delay(延迟,默认为 "0"),

animation-iteration-count(动画次数,默认为 "1"),

animation-direction(反向运动,默认为 "normal"),

animation-fill-mode(开始/结束状态,默认为 "none");

然后再来看看其中某些有固定取值的几个属性:

animation-timing-function :指定动画将如何完成一个周期,可取值有:

linear :匀速运动

ease :以低速(速度不是0)开始,然后加快,在结束前变慢,开始的速度比结束的速度要快

ease-in :动画以低速(速度近似0)开始,慢慢加速

ease-out :动画以低速(速度近似0)结束

ease-in-out :动画以低速(速度近似0)开始和结束,两者速度相同

steps(num, start/end) :第一个参数num为间隔数量,必须为正整数;第二个参数可选,指定周期的阶跃时机,默认为 "end",它的作用说起来可能有点懵;于是我拿它和 linear 运动做了个对比:

下面那个 div 固定设置为:animation-timing-function:linear; 匀速运动

当上面 div 设置 nimation-timing-function: steps(4,end);时:在周期结束进行阶跃,所以之前的运动相对“规则”:

当设置 nimation-timing-function: steps(4,start);时:在周期开始进行阶跃,但之后的运动相对“规则”:

cubic-bezier(n,n,n,n) : 贝塞尔曲线,四个取值都在[0,1];具体怎么效果,这个嘛、、、

animation-iteration-count :动画运行的次数;可取值 infinite(无限循环)、数字,包括小数

animation-direction :是否反向播放;可取值:

normal :正常运动

reverse :反向运动;从结束帧开始运动,到开始帧结束

alternate :以正常运动开始第一周期,再以反向运动开始第二周期,循环反复;奇数次(1、3、5...)正向播放,偶数次(2、4、6...)反向播放

alternate-reverse :以反向运动开始第一周期,再以正常运动第二周期,循环反复;奇数次(1、3、5...)正向播放,偶数次(2、4、6...)反向播放

animation-fill-mode :指定在动画执行之前和之后的样式;可取值:

none :不应用任何样式

forwards :动画结束后(animation-iteration-count 执行次数全部完成),应用最后周期结束时样式

backwards :动画开始前(animation-delay 期间),应用第一周期开始时的样式

both :同时应用 forwardsbackwards 两种样式

终于还是被你发现了

o(* ̄▽ ̄*)ブ  大叔的卖萌!  o(* ̄▽ ̄*)ブ

评论(10)

小周
回复

commit bug:分享到微信朋友圈的窗口关不掉。
2017年 6月26日 星期一 13时31分09秒 CST

大虎
回复

更了一篇看不懂的,诶,溜了溜了

直销
回复

好几年没用过博客了,支持下!

1 2

发表评论