CSS3的属性为什么要带前缀

CSS3的属性为什么要带前缀
CSS3的属性为什么要带前缀

使用过CSS3属性的同学都知道,CSS3属性都需要带各浏览器的前缀,甚至到现在,依然还有很多属性需要带前缀。这是为什么呢?

我的理解是,浏览器厂商以前就一直在实施CSS3,但它还未成为真正的标准。

为此,当一些CSS3样式语法还存在波动时,它们提供针对流星器的前缀。现在主要流行的浏览器内核主要有:

?Trident内核:主要代表为IE浏览器

?Gecko内核:主要代表为Firefox

?Presto内核:主要代表为Opera

?Webkit内核:产要代表为Chrome和Safari

而这些不同内核的浏览器,CSS3属性(部分需要添加前缀的属性)对应需要添加不同的前缀,也将其称之为浏览器的私有前缀,添加上私有前缀之后的CSS3属性可以说是对应浏览器的私有属性:

CSS3关键帧动画

CSS3关键帧动画 本文转载自创美优品,转载就保留此信息。我决定探索该地区的CSS3关键帧动画。的想法很简单-创造一种虚拟明信片。我住在巴黎,所以很明显我给你我的问候,从巴黎:)

下载源文件 (。psd文件) 明信片从巴黎的。zip 1.9MB CSS3的动画支持:Chrome浏览器2 +,Safari 4的+,火狐5 +,iOS的Safari浏览器3.2和 Android 2.1系统+(源碎杂志)。 我们将3个要素:云中的动画(有三个层次的云),旋转法尔灯和艾菲尔铁塔闪闪发光。 的HTML结构其实很简单: Greetings from Paris

Bonne Nuit PARIS !

by PeHaa, Paris 2011

我们将使用下面的图片(我将讨论一点点波光粼粼的效果),让我们先来完成的CSS样式表:

动画云

HTML5+CSS3从入门到精通自测练习

《HTML5+CSS3从入门到精通》自测练习(修 正版) 一、单选题(共44题,每题1分,共44分) 1.支持input类型的输入框的消息提示的属性是[] A.detail B.placeholder C.pattern D.required 标准答案:B 试题分析:P101 2.()方法用于绘制圆形,一般其中的第几个参数决定圆形的半径[] A.1 B.2 C.3 D.4 标准答案:C 试题分析:P114 3.下列哪项不是HTML5的新特性[] A.兼容性 B.合理性 C.安全性 D.有插件 标准答案:D 试题分析:p1-2 4.下列不是html5主要功能的是[] A.Cross-document B.Vector Scalable Graphics C.MathML D.Web Origin Concept 标准答案:B 试题分析:p4 5.在HTML5中可以省略全部标记的元素是________[] A.option B.body C.hr D.img 标准答案:B 试题分析:P39 6.不支持Web Storage的浏览器的是[] A.IE7以上版本 B.以上版本 C.Safari 以上版本 D.Opera 以上版本 标准答案:A

试题分析:P178 7.audio元素中src属性的作用是________。[] A.提供播放、暂停和音量控件 B.循环播放 C.制定要播放音频的URL D.插入一段替换内容 标准答案:C 试题分析:P160 8.以下哪项不属于Html5中input标签新增的输入类型________。[] A.email B.url C.number D.radio 标准答案:D 试题分析:P80-83 9.outline属性可以定义块元素的外轮廓线,以下错误的是———[] A.outline-color定义轮廓边框颜色 B.outline-style定义轮廓边框轮廓 C.outline-width定义轮廓边框宽度 D.outline-offset定义轮廓边框位置 标准答案:D 试题分析:50910.基本CSS代码书写规范不正确的是————[] A.尽量不缩写 B.全部小写,且每一项CSS定义写成一行 C.ID必须是唯一的,且用在结构的定义中 D.CSS可以尽量使用expression 标准答案:D 试题分析:288 11.1982年,()创造了HTML语言。[] A.爱因斯坦 B.蒂姆·伯纳斯·李 C.比尔·盖茨 D.埃隆·马斯克 标准答案:B 试题分析:P22 12.在XHTML文档中,()是一个必要的元素,他决定了网页文档的显示规则。[] A.body B.style C.header D.DOCTYPE 标准答案:D 试题分析:P35

web前端培训教程:CSS3 的动画效果

海文国际https://www.360docs.net/doc/289321225.html, web前端培训教程:CSS3 的动画效果 本章主要探讨HTML5 中CSS3 的动画效果,可以通过类似Flash 那样的关键帧模式控制运行。 一.动画简介 CSS3 提供了类似Flash 关键帧控制的动画效果,通过animation 属性实现。那么之前的transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果,有一定的局限性。 animation 实现动画效果主要由两个部分组成: 1.通过类似Flash 动画中的关键帧声明一个动画; 2.在animation 属性中调用关键帧声明的动画。 CSS3 提供的animation 是一个复合属性,它包含了很多子属性。如下表所示:

海文国际https://www.360docs.net/doc/289321225.html, 除了这9 个属性之外,动画效果还有一个重要的属性,就是关键帧属性: @keyframes。 它的作用是声明一个动画,然后在animation 调用关键帧声明的动画。 //基本格式,“name”可自定义 @keyframes name { /*...*/ } 二.属性详解 在讲解动画属性之前,先创建一个基本的样式。 //一个div 元素

我是HTML5

海文国际https://www.360docs.net/doc/289321225.html, //设置CSS div { width: 200px; height: 200px; background-color: white; border: 1px solid green; } 1.@keyframes //创建动画的第一步,先声明一个动画关键帧。 @keyframesmyani { 0% { background-color: white; margin-left:0px; } 50% { background-color: black; margin-left:100px; } 100% { background-color: white; margin-left:0px;

4.《HTML5+CSS3从入门到精通》自测练习(修正版)

《HTML5+CSS3 从入门到精通》自测练习 (修正版) 一、单选题(共44 题,每题 1 分,共44 分) 1. 支持input 类型的输入框的消息提示的属性是[1.0] A. detail B. placeholder C. pattern D. required 标准答案:B 试题分析:P101 2. context.arc()方法用于绘制圆形,一般其中的第几个参数决定圆形的半径[1.0] A. 1 B. 2 C. 3 D. 4 标准答案:C 试题分析:P114 B. body C. hr D. img 标准答案: B 试题分析:P39 6. 不支持Web Storage 的浏览器的是[1.0] A. IE7 以上版本 B. Firefox3.0 以上版本 C. Safari 4.0 以上版本 D. Opera 10.5 以上版本 标准答案: A 试题分析:P178 7. audio 元素中src 属性的作用是。[1.0] A. 提供播放、暂停和音量控件 B. 循环播放 C. 制定要播放音频的URL D. 插入一段替换内容 标准答案: C 试题分析:P160 3. 下列哪项不是HTML5 的新特性[1.0] 8.以下哪项不属于Html5 中input 标签新增的输入类型。[1.0] A. 兼容性 B. 合理性 C. 安全性 D. 有插件A. email B. url C. number D. radio 标准答案:D 试题分析:p1-2 4. 下列不是html5 主要功能的是[1.0] A. Cross-document B. Vector Scalable Graphics C. MathML D. Web Origin Concept 标准答案:B 试题分析:p4 5. 在HTML5 中可以省略全部标记的元素是[1.0] A. option 标准答案:D 试题分析:P80-83 9. outline 属性可以定义块元素的外轮廓线,以下错误的是———[1.0] A. outline-color 定义轮廓边框颜色 B. outline-style 定义轮廓边框轮廓 C. outline-width 定义轮廓边框宽度 D. outline-offset 定义轮廓边框位置 标准答案: D 试题分析:509 10. 基本CSS 代码书写规范不正确的是————[1.0] A. 尽量不缩写 ;.

10款让人惊叹的html5动画效果

10款让人惊叹的html5动画效果 这里介绍10款让人叹为观止的html5动画效果 1、15种html5+css3图片堆叠图片展示特效 这是一款html5和css3制作的图片堆叠图片展示特效,就像一幅扑克牌堆叠在一起,最开始只能看到一张,点击按钮后就会展开成几张,非常有意思。 2、html5 svg+css3制作图片边框运动动画效果

一款使用html5 svg技术制作的图片边框运动动画效果,鼠标移动到图片上时,便会有几条线绕着边框运动,共有4种不同的效果。建议使用Firefox或Chrome浏览器观看。 3、21种html5+css3鼠标悬停hover超链接导航条动画效果 利用css3 transition属性制作的21种不同的鼠标悬停效果。当鼠标hover或悬停在超链接上时,

会触发各种动画效果。每种动画效果都十分独特,可用于网站导航。 4、18种基于html5 svg和css3的神奇超链接动画效果 普通的超链接效果是鼠标放上去出现一条下划线,本插件异想天开的使用html5 svg和css3打造出18种很神奇的超链接动画效果。每种超链接动画效果都有它的独到之处。 5、html5+css3网格图片3d翻转Loading页面切换效果

这是一个图片html5和css3制作的3d翻转Loading页面切换效果。在页面上以网格的形式展示所有的页面缩略图,当点击了缩略图片后,图片进行3d翻转,然后加载相应的页面内容。 6、12种利用html5+css3打造的消息提示框效果 这是12种风格各异的弹出消息提示框效果,使用html5和css3 animation属性制作,有各种旋转、翻转、伸展特效。效果非常华丽。

HTML5CSS3实战笔记

HTML5+CSS3响应式布局笔记 第一章:HTML5,CSS3响应式布局入门 响应式布局:流式设计,弹性布局... 指针对任一设备对网页内容进行完美布局的一种显示机制。 视口:指浏览器窗口内的内容区域,不包含工具栏,标签栏等。 CSS3是在CSS2基础上按模块构建的,以CSS2.1标准为核心。 实现响应式设计的关键技术是CSS3—媒体查询。 响应式布局的条件:CSS3的媒体查询,流动布局。 原则:让设计在多平台多视口的情况下保留尽可能多的内容,而不是使用display:none隐藏它。 可以通过调整标签的先后顺序来显示大小屏内容顺序问题。 第二章:媒体查询,支持不同的视口 html4中的媒体查询: 加载CSS的四种方法:行内,内链,外链,import。其中import会增加css请求,影响速度。@import url(“phone.css”) screen and (max-width: 媒体查询可以检测到如下特性,但最常用的是视口宽度(width)和屏幕宽度(device-width): width:视口宽度。 height:视口高度。 device-width:屏幕宽度。 device-height:屏幕高度。 orientation:检查设备处于横向还是纵向。 aspect-ratio:基于视口宽度和高度的宽高比。如16:9写为aspect-ratio:16/9. device-aspect-ratio:设备屏幕的高宽比。 color:每种颜色的位数。例如min-color:16会检测设备是否拥有16位颜色。 color-index:设备的颜色索引表中的颜色数。值为非负整数。 monochrome:检测单色帧缓冲区中每像素所使用的位数。值为非负整数,比如 monochrome:2。 resolution:用来检测屏幕或打印机的分辨率。如min-resolution:300dpi或 min-resolution:300dpcm。 scan:电视机的扫描方式,值可设为progressive(逐行扫描)或interlace(隔行扫描)。 grid:用来检测输出设备是网格设备还是位图设备。 以上除了scan和grid都可以使用min,max创建一个查询范围。 Respond.js(https://https://www.360docs.net/doc/289321225.html,/scottjehl/Respond)是为Internet Explorer 8 及更低版本增加媒体查询支持的最快的JavaScript 工具,但它目前无法解析CSS 的@import

CSS3 选择器

我们会定期对W3School 的CSS 参考手册进行浏览器测试。 CSS3 选择器 在CSS 中,选择器是一种模式,用于选择需要添加样式的元素。 "CSS" 列指示该属性是在哪个CSS 版本中定义的。(CSS1、CSS2 还是CSS3。) 选择器例子例子描述C S S .class.intro 选择class="intro" 的所有元素。 1 #id#firstname 选择id="firstname" 的所有元素。 1 ** 选择所有元素。 2 element p 选择所有 元素。 1 element,element div,p 选择所有

元素和所有 元素。 1 element element div p 选择
元素内部的所有 元素。 1 element>element div>p 选择父元素为
元素的所有 元素。 2 element+element div+p 选择紧接在
元素之后的所有 元素。 2 [attribute][target] 选择带有target 属性所有元素。 2 [attribute=value][target=_blank] 选择target="_blank" 的所有元素。 2 [attribute~=value][title~=flower] 选择title 属性包含单词"flower" 的所有元素。 2 [attribute|=value][lang|=en] 选择lang 属性值以"en" 开头的所有元素。 2 :link a:link 选择所有未被访问的链接。 1 :visited a:visited 选择所有已被访问的链接。 1 :active a:active 选择活动链接。 1 :hover a:hover 选择鼠标指针位于其上的链接。 1 :focus input:focus 选择获得焦点的input 元素。 2 :first-letter p:first-letter 选择每个 元素的首字母。 1 :first-line p:first-line 选择每个 元素的首行。 1 :first-child p:first-child 选择属于父元素的第一个子元素的每个 元素。 2 :before p:before 在每个 元素的内容之前插入内容。 2 :after p:after 在每个 元素的内容之后插入内容。 2

html5教程:8个炫酷CSS动画及源码分享

html5教程:8个炫酷CSS动画及源码分享在现代网页中,我们已经越来越习惯使用大量的CSS3元素,而现在的浏览器也基本都支持CSS3,所以很多时候我们不妨思考一下是否可以用纯CSS3制作一些有趣或者实用的网页。本文要分享8个超炫酷的纯CSS3动画,有几个非常经典,比如大象走路的那个,如果你对CSS3感兴趣,赶紧来看看吧。 1、纯CSS3实现大象走路动画之前我们分享过一款纯CSS3人物行走动画,效果相当震撼。这一次要给大家介绍的是一款纯CSS3实现的大象走路动画,大象走路时的形态表现的十分逼真,你可能不会想到,这么给力的动画居然是用纯CSS3实现的,很可爱的大象,下载源码自己去研究吧。 2、纯CSS3实现苹果设备 iPhone iPad iMac及iWatch今天我们又要用CSS3来绘制一些有趣的东西,这次要绘制的是全套的苹果设备,包括iPhone、iPad、iMac及iWatch,配合各自的界面壁纸,显得非常逼真,同时跟现实中的设备一样,屏幕同样具有切换的效果,只不过这个是定时切换,并不能滑动切换,有兴趣的同学可以自行实现一下。 3、纯CSS3实现变形金刚组装动画特效今天要分享的依然是一款用纯CSS3实现的动画,是一个变形金刚组装动画特效,这种组装动画将人物的各部位按某种顺序组合起来,显得非常酷。 4、纯CSS3 3D按钮按钮酷似牛奶般剔透CSS3按钮一般都可以设计的非常漂亮,利用投影、渐变等CSS3属性特效可以把按钮渲染的十分动感。今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔透的牛奶,而且在点击按钮时出现3D效果的动画,按钮按下时,按钮会轻轻的弹动一下,非常逼真。 5、CSS3音量调节旋转按钮之前我们分享过很多可以调节音量的HTML5视频播放器,大部分音量调节按钮都比较普通,没有什么特色。今天要分享一款基于CSS3的音量调节旋转按钮,只要按住鼠标即可旋转按钮来调节音量。这是一款很有特色旋转按钮。

css3实现动画效果常用方法

css3实现动画效果常用方法 早期在web中要实现动画效果,都是依赖于JavaScript或flash来完成,但在css3中新增加了一个新的模块transition,它可以通过一些简单的css事件来触发元素的外观变化,让效果显得更加细腻。简单来说,就是通过鼠标的单击、获得焦点、被点击、或对元素任何改变中触发,并平滑地以动画效果改变css属性值 在css中创建简单的过渡效果可以从以下几个步骤来实现: (1)在默认样式中声明元素的初始状态样式 (2)声明过渡元素最终状态样式,比如悬浮状态 (3)在默认样式中通过添加过渡函数,添加一些不同的样式 1、css变形属性 transform属性的基本语法如下: translate(): 移动元素,可以根据X轴和Y轴坐标重新定位元素位置。在此基础上有两个扩展函数translateX()和translateY(); scale():缩小或方法元素,可以使用元素尺寸发生变化,在此基础上用两个扩展函数scaleX()和scaleY(); rotate(): 旋转元素,其参数值为旋转的角度值(360deg) skwe();让元素倾斜。在此基础上有两个扩展函数skewX()和skewY() matrix():定义矩阵变形,基于X轴和Y轴 2、过渡属性transition 过渡属性是一个复合属性,主要包括以下几个属性 transition-property:指定过渡或动态模拟的css属性(CSS属性名称) transition-duration:指定完成过渡所需的时间(持续时间) transition-timing-function:指定过渡函数(缓动函数) transition-delay:指定开始出现的延迟时间(改变元素属性值后多长时间开始执行) transition的优点在于简单易用,但是它有几个很大的局限。 (1)transition需要事件触发,所以没法在网页加载时自动发生。 (2)transition是一次性的,不能重复发生,除非一再触发。 (3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。 (4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。 3、animation动画 animation-name属性主要用来调用@keyframes定义好的动画

css3选择器 伪类伪元素

CSS3选择器 在css3中新增了很多选择器,大部分浏览器都支持了,但是要知道坑爹的IE还在拖后腿,希望不久的将来IE能赶上来。下面就介绍一下css3中都增加了哪些选择器。 1.属性选择器 E[attr] →有attr属性的E元素。 E[attr^=’value’] →寻找属性值以value开头的元素。 E[attr$=’value’] →寻找以属性值value结束的元素。 E[attr*=’value’] →寻找属性值包含value的元素。 灵活运用,可以组合使用,例如: a[href^=’http://’][href*=’/folder2/’][href$=’.pdf’]{ } E ~ F { } 相邻兄弟连接符,选择的是文档树的同一层级中,紧邻元素E之后的任意元素F。 E + F { } 普通兄弟连接符,选择的是文档树的同一层级中,位于元素E之后的任意元素F,不管它是否直接相邻。 以上选择器大部分浏览器都支持,包括坑爹的IE。 2.伪类 E:first-child{ } //在css2引入,css3中增加11个新的结构伪类。 E:nth-child(n/2n/3n-1/odd/even){ } E:nth-of-type(n/2n/3n-1/odd/even){ } E:nth-last-child( ){ }和E:nth-last-of-type( ){ }与上面参数相同,但是元素要从最后一个算。 first-child{ }和:first-of-type{ } //选择其父元素的第一个子元素和其父元素的某种指定类型的第一个子元素。 last-child{ }和:last-of-type{ } //选择父元素的最后一个子元素和属于某种类型的最后一个子元素。 only-child和only-of-type,选择的是该元素有一个父元素,但没有任何的兄弟元素或者没有相同类型的兄弟元素。 例:p:only-of-type{ } p:only-child{ } 3.其它伪类 target伪类,指向网页内部特定元素的链接。例:

Lorem ipsum

Lorem Target伪类能够在涉及的URI被使用的时候,把样式应用到元素上。 #my_id:target{ } 其它例子.comment:target{ } empty伪类,选择没有子元素(包括文本节点)的元素。 例: 我是 td:empty{ } //只会应用到第二个td元素,因为其它两个包含有文本节点 root伪类,选择文档树中的第一个元素,它的唯一真正作用就是发生在为XML文档添

css3动画效果总结

css3动画效果总结 scale(a); 元素x和y方向均缩放a倍transform: scale(a, b); 元素x方向缩放a倍,y方向缩放b倍transform: scaleX(a); 元素x方向缩放a倍,y方向不变transform: scaleY(b); 元素y方向缩放b倍,x方向不变translate设置元素的位移,用法为:transform: translate(a, b); 元素x方向 位移a,y方向位移btransform: translateX(a); 元素x方向位移a,y方向不变transform: translateY(b); 元素y方向位移b,x方向不变skew设置元素倾斜的角度,用法包括:transform: skew(a, b); 元素x方向逆时针倾斜角度a,y方向顺时针倾斜角度btransform: skewX(a); 元素x方向逆时针倾斜角度a,y方向不变transform: skewY(b); 元素y方向顺时针倾斜角度b,想方向不变以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。matrix设置元素的变形矩阵,因为矩阵变形过于复杂,暂略。origin设置元素的悬挂点,用法包括:transform-origin: a b; 元素的悬挂点为(a, b)元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。transitiontransition-property指定transition效果作用的CSS属性,其值是CSS属性名。transition-duration动画效果持续的时间,其值为以s结尾的秒数。transition-timing-function指定元素状态的变化速率

CSS3中的Transition属性详解

CSS3中的Transition 属性详解 W3C 标准中对CSS3的transition 这是样描述的:"CSS 的transition 允许CSS 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS 的属性值。" 下面我们从最简单的语法和属性值开始一步一步来学习transition 的具体使用: 语法: 1 2 3 transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* transition 主要包含四个属性值:执行变换的属性:transition-property ;变换延续的时间:transition- duration ;在延续时间段,变换的速率变化transition-timing-function ;变换延迟时间transition- delay 。下面分别来看这四个属性值: 一、transition-property : 语法:.transition-property : none | all | [ ] [ ',' ]* transition-property 是用来指定当元素其中一个属性改变时执行transition 效果,其主要有以下几个值:none(没有属 性改 变);all (所有属性改变)这个也是其默认值;indent (元素属性名);当其值为none 时,transition 马上停止执行,当指定为all 时,则元素产生任何属性值变化时都将执行transition 效果,ident 是可以指定元素的某一个属性值。其对应的类型如下: 1、color : 通过红、绿、蓝和透明度组件变换(每个数值单独处理),如:background-color ,border-color ,color ,outline-color 等CSS 属性; 2、length :真实的数字,如:word-spacing ,width ,vertical- align ,top ,right ,bottom ,left ,padding ,outline-width ,margin ,min-width ,min- height ,max-width ,max-height ,line-height ,height ,border-width ,border- spacing ,background-position 等属性; 3、percentage :真实的数字,如:word-spacing ,width ,vertical- align ,top ,right ,bottom ,left ,min-width ,min- height ,max-width ,max-height ,line-height ,height ,background-position 等属性; 4、integer 离散步骤(整个数字),在真实的数字空间,以及使用floor()转换为整数时发生,如:outline-offset ,z-index 等属性; 5、number 真实的(浮点型)数值,如:zoom ,opacity ,font-weight 等属性; 6、transform list :详情请参阅:《CSS3 Transform 》。 7、rectangle :通过x 、 y 、 width 和height (转为数值)变换,如:crop ;

CSS3 skew倾斜、rotate旋转动画

CSS3 skew倾斜、rotate旋转动画 css3出现之前,我们实现一个对象的一组连续动画需要通过JavaScript或Jquery编写,脚本代码较为复杂; 若需要实现倾斜、旋转之类的动画难度将更高(我还没试过用JavaScript或Jquery如何实现),而且即使能实现估计花的时间代价及维护难度是很大的,很多时候只能依靠画图工具制作此类动画文件; 有时候在想如果不用脚本语言,也不用画图工作制作动画文件,就能在网页上实现倾斜、旋转之类的动画效果多好。 最近挤出一些业余时间学习CSS3,其中就包含很多动画示例,花了点时间学习和整理 今天分享使用html+css3实现skew倾斜、rotate旋转动画,我们先看最终效果图(我这里为了演示效果,就用QQ屏幕截成多张图片,然后制作成gif动画给大家简单展示下,效果不好请大家多多包涵)

图1 具体步骤如下: 1、放置两个div,一个作为容器(图1中绿色背景部分id="warp"),另一个作为动画元素(图1中黄色背景部分 id="box") HTML代码: CSS代码(设置容器及动画元素默认样式):

注意:#box{position: relative;}是为该元素接下来做动画做准备,因为动画过程中需要改变其位置,故这里使用相对定位 上述代码为基本的html css,大家应该没问题吧 此时效果如下: 2、使用CSS3 @keyframes自定义动画 CSS代码:

height: 40px; } 20% { top: 0; left: 0; transform: skewX(50deg); width: 60px; height: 20px; background: red; } 22% { top: 0; left: 0; transform: skewX(0deg); width: 40px; height: 40px; } 30% { top: 0; left: 0; transform: skewX(0deg); width: 320px; height: 40px; } 40% { top: 0; left: 280px; transform: skewX(0deg); width: 40px; height: 40px; background: green; } 50% { top: 0; left: 280px; transform: skewX(0deg); width: 20px; height: 320px; } 55% { top: 280px; left: 280px; transform: skewX(0deg);

【最新】css3选择题使用方法详解-范文模板 (4页)

本文部分内容来自网络整理,本司不为其真实性负责,如有异议或侵权请及时联系,本司将立即删除! == 本文为word格式,下载后可方便编辑和修改! == css3选择题使用方法详解 一通用选择器 1 *{}通配选择符(CSS2):适合所有元素对象。 2 E类型(HTML)选择符(CSS1):以文档语言对象类型DOM作为选择符。 3 E#myid是id选择符(CSS1):以唯一标识符id属性等于myid的E对象作为选择符。 4 E.myclass是类class选择符(CSS1):以class属性包含myclass的E 对象作为选择符。 5 E F:包含选择符(CSS1):选择所有被E元素包含的F元素。 CSS3新增的通用选择器:同级元素通用选择器: 1 通用选择器E~F{}:匹配的是E元素之后的同级F元素匹配E后边所有的F,EF同级。只要F在E的后边,E只是作为一个参考。E~F { background:#ff0; } 2 临近(相邻)选择器(css2):E+F{}:EF元素相邻,即选择紧贴在E元素之后F元素。 3 包含(子)选择器(css2):E>F{}:EF不可以隔代,E只能匹配到下一个相邻辈F。 二属性选择器 1.E[att^="val"]:选择具有att属性且属性值为以val开头的字符串的E元素。 2.E[att$="val"]:选择具有att属性且属性值为以val结尾的字符串的E元素。 3.E[att*="val"]:选择具有att属性且属性值为包含val的字符串的E 元素。

4.E[att|="val"] 选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。 5.E[att] 选择具有att属性的E元素。 6.E[att="val"]选择具有att属性且属性值等于val的E元素。 7.E[att~="val"]选择具有att属性且属性值为一用空格分隔的字词列表,其中一个等于val的E元素。 注:4~7是CSS2特有的属性。 input最常用属性选择器。 三伪类选择器 1 与用户界面有关的伪类: (1) E:enabled:匹配表单中激活的元素,表单中可操作的元素。 (2) E:disabled(常用):常用匹配表单中禁用的元素 disabled="disabled" 。 eg:input[type="text"]:disabled { background:#ddd;} 只可以看不可操作。 (3) E:checked:匹配表单中被选中的radio(单选框)或checkbox(复选框)元素 是整体伪类(匹配整个DOM文档): (4) ::selection 匹配用户当前选中的元素,即设置对象被选择时的颜 色。 ::selection。 2 结构性伪类 1) :root 匹配文档的根元素,对于HTML文档,就是只能匹配HTML根元素。 2) E:nth-child(n) 匹配其当前元素 E :nth-child(n):匹配其父元素E的第n个子元素,第一个编号为1 E F:nth-child(n):匹配其父元素E的第n个F元素,第一个编号为1(貌 似只对ul 可用) 3) E:nth-last-child(n):匹配其父元素的倒数第n个子元素,第一个编 号为1。 E:last-child:匹配父元素的最后一个子元素,等同于:nth-last- child(1)。

html-css及html5-css3面试常考

ps操作 1、Ctrl+r 调出标尺的快捷键 2、按住空格键鼠标单机拖动画布 3、切片工具 1)网页的结构划分-逐级划分原则 4、画布的缩放,alt加滑轮 5、切片的选择工具,按住ctrl键+鼠标左键 6、选择工具移动标尺线 一、HTML标签(留4面,2页) 1、html 超文本标记语言–所有网页标签的一个容器 2、head 网页的头部信息,(去放用户看不到的东西。) 3、body 网页的主体区域(游览器窗口中显示的内 容) 4、meta网页的元信息(声明网页的编码类型) 5、title网页的标题 6、div 俗称为盒子(指搭建网页结构) 1)默认宽度是100%; 2)高度默认为0,会根据内容自适应 3)默认独立成行(垂直分布) 7、img标签:图片标记(单闭合标记)

title=”我是鼠标划上去显示出来的字” alt=”我是当服务器路径地址发生错误的时候显示” 特点:前景图是占位的,不会平铺,位置是放在结构中的,行级元素 8、br 换行标签–单闭合标签 9、h1~h6 标题标签级别是由高到低的 特征:自带加粗,字体大小,外间距,且是块级 元素,独立成行,具有div的全部特征 10、p 段落标签 特征:具有div的全部特征,自带外间距。 11、ul 无序列表 li 列表项 语法格式:

特点:ul,li具有div的全部特征,自带列表符,外间距,内填充。 Ol 有序列表 语法格式:
去掉默认的列表符,ul{ list-style:none; } 12、span 万能标签(行级元素) 13、a标签–超链接标签 格式:文字或者图片 特征:自带蓝色,下划线,访问过后变为紫色,如果为空链接,用#来占位。 注意:标签自带的属性特征无法在父级上改变(例如颜色与下划线) 14、dl 定义列表
标题
子项
dt和dd可以在dl里面拥有多个。属于块级元素,拥有div的全部特征。 15、 锚点技术 1、下锚(终点)跳转的目标位置 2、跳转链接 直接使用id选择器的方式下锚。 新窗口打开:

CSS系列:CSS3新增选择器

CSS系列:CSS3新增选择器 Index

结构伪类利用DOM实现元素过滤,通过DOM的相互关系来匹配特定的元素,减少文档内对class属性和ID属性的定义,使得文档更加简洁。

HTML5动画特效

超级惊艳 10款HTML5动画特效推荐 2014-07-04 09:52 超人 html5tricks 字号:T | T 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些 HTML5 动画和 jQuery 应用。 AD:2014WOT全球软件技术峰会北京站课程视频发布 11月21日-22日与WOT技术大会相约深圳现在抢票 今天我们要来推荐 10 款超级惊艳的 HTML5 动画特效,有一些是基于 CSS3 和 jQuery 的,比较实用,特别是前几个 HTML5 动画,简直酷毙了,现在将它们分享给大家,也许你能用到这些 HTML5 动画和 jQuery 应用。 1、HTML5 Canvas 发光 Loading 动画 之前我们分享过很多基于 CSS3 的 Loading 动画效果,相信大家都很喜欢。今天我们要来分享一款基于 HTML5 Canvas 的发光Loading 加载动画特效。Loading 旋转图标是在 canvas 画布上绘制的,整个 loading 动画是发光 3D 的视觉效果,HTML5 非常强大。 在线演示源码下载 2、jQuery 球状放大镜特效插件

今天我们要来分享一款基于 jQuery 的放大镜特效插件,和其他放大镜不同的是,这款 jQuery 放大镜插件是球状的,看上去有 3D 的视觉效果。当你把鼠标滑过页面上的文字时,即会出现很酷的球状放大镜,来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小,这就产生了立体感。 在线演示源码下载 3、HTML5 Canvas 粒子模拟效果 这是一款利用 HTML5 Canvas 模拟出来的 30000 个粒子动画,当你用鼠标在 canvas 画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案,就像你在玩沙画一样,效果非常不错。这里,我们应用了一些 HTML5 的特性,让这个粒子动画显得相当动感。

CSS3动画属性Transition

今天我们接着一起来看CSS3动画属性中的一个属性Transition 。 W3C 标准中对css3的transition 这是样描述的:“css 的transition 允许css 的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS 的属性值。” 下面我们同样从其最语法和属性值开始一步一步来学习transition 的具体使用 语法: 1 transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* transition 主要包含四个属性值:执行变换的属性:transition-property,变换延续的时间:transition-duration,在延续时间 段,变换的速率变化 transition-timing-function,变换延迟时间transition-delay 。下面分别来看这四个属性值 一、transition-property: 语法: 1 t ransition-property : none | all | [ ] [ ',' ]* transition- property 是用来指定当元素其中一个属性改变时执行transition 效果,其主要有以下几个值:none(没有属性改变);all (所有属性改 变)这个也是其默认值;indent (元素属性名)。当其值为none 时,transition 马上停止执行,当指定为all 时,则元素产生任何属性值变 化时都将执行transition 效果,ident 是可以指定元素的某一个属性值。其对应的类型如下: 1、color: 通过红、绿、蓝和透明度组件变换(每个数值处理)如: background-color,border-color,color,outline-color 等css 属性; 2、 length: 真实的数字 如:word-spacing,width,vertical- align,top,right,bottom,left,padding,outline-width,margin,min-width,mi n- height,max-width,max-height,line-height,height,border-width,border- spacing,background-position 等属性; 3、percentage:真实的数字 如: word-spacing,width,vertical-align,top,right,bottom,left,min-width,min - height,max-width,max-height,line-height,height,background-position 等属性;

相关主题