聊聊CSS动画的监听

聊聊 CSS3 中的 object-fit 和 object-position

2016/11/22 · CSS ·
CSS3

本文作者: 伯乐在线 –
TGCode
。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

最近一直忙于将JavaScript学习的笔记整理成电子书,也没什么空闲时间写新的文章。趁着今天有点空闲,决定再来折腾一下CSS3中的两个属性:object-fitobject-position

这两个奇葩的属性是做什么的呢?其实它们是为了处理替换元素(replaced
elements)的自适应问题,简单的说,就是处理替换元素的变形(这里指长宽比例变形)问题。

等等,好像多了一个名词,啥叫替换元素?替换元素其实是:

  • 其内容不受CSS视觉格式化模型控制的元素,比如image,嵌入的文档(iframe之类)或者applet,叫做替换元素。比:img元素的内容通常会被其src属性指定的图像替换掉。替换元素通常有其固有的尺寸:一个固有的宽度,一个固有的高度和一个固有的比率。比如一幅位图有固有用绝对单位指定的宽度和高度,从而也有固有的宽高比率。另一方面,其他文档也可能没有固有的尺寸,比如一个空白的html文档。
  • CSS渲染模型不考虑替换元素内容的渲染。这些替换元素的展现独立于CSS。object,video,textarea,input也是替换元素,audio和canvas在某些特定情形下为替换元素。使用CSS的content属性插入的对象是匿名替换元素。

这个当然不是我头脑风暴来的,而是引用别人的解释:引用

常见的替换元素有<video>、<object>、<img>、<input
type=”image”>、<svg>、<svg:image>和<svg:video>等。

要是看的稀里糊涂的也没关系,接着往下看,我相信你会懂得!

1、object-fit

语法:

object-fit: fill | contian | cover | none | scale-down;

1
object-fit: fill | contian | cover | none | scale-down;
  • fill
    默认值。填充,可替换元素填满整个内容区域,可能会改变长宽比,导致拉伸。
  • contain
    包含,保持原始的尺寸比例,保证可替换元素完整显示,宽度或高度至少有一个和内容区域的宽度或高度一致,部分内容会空白。
  • cover
    覆盖,保持原始的尺寸比例,保证内容区域被填满。因此,可替换元素可能会被切掉一部分,从而不能完整展示。
  • none : 保持可替换元素原尺寸和比例。
  • scale-down : 等比缩小。就好像依次设置了none或contain,
    最终呈现的是尺寸比较小的那个。

不好意思,我又要摆妹子来诱惑你们了,看效果图:

图片 1

上面的五个例子的代码:

<style> .box{ position:relative; float:left; margin:0 10px 40px
10px; width:150px; height:150px; } .box>img{ width:100%; height:100%;
background-color:#000; } .fill{ object-fit:fill; } .contain{
object-fit:contain; } .cover{ object-fit:cover; } .none{
object-fit:none; } .scale{ object-fit:scale-down; } </style>
<div class=”box”> <img src=”example-girl.jpg” class=”fill”
alt=””> </div> <div class=”box”> <img
src=”example-girl.jpg” class=”contain” alt=””> </div> <div
class=”box”> <img src=”example-girl.jpg” class=”cover” alt=””>
</div> <div class=”box”> <img src=”example-girl.jpg”
class=”none” alt=””> </div> <div class=”box”> <img
src=”example-girl.jpg” class=”scale” alt=””> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<style>
.box{  
  position:relative;  
  float:left;  
  margin:0 10px 40px 10px;  
  width:150px;  
  height:150px;  
}  
.box>img{  
  width:100%;  
  height:100%;  
  background-color:#000;  
}  
.fill{  
  object-fit:fill;  
}  
.contain{  
  object-fit:contain;  
}  
.cover{    
  object-fit:cover;  
}  
.none{  
  object-fit:none;  
}  
.scale{  
  object-fit:scale-down;  
}  
</style>
 
<div class="box">  
  <img src="example-girl.jpg" class="fill" alt="">  
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="contain" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="cover" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="none" alt="">
</div>  
<div class="box">  
  <img src="example-girl.jpg" class="scale" alt="">
</div>

看到这些效果,我想同志们最关心的的应该是兼容性,点这里点这里

2、object-position

object-position属性决定了它的盒子里面替换元素的对齐方式。

语法:

object-position: <position>

1
object-position: <position>

默认值是50% 50%,也就是居中效果,其取值和CSS中background-position属性取值一样。(如果不熟悉background-position,可以瞄瞄这里《CSS3
Background》)

例如:替换元素位于内容区域的左上角

img{ object-fit: contain; object-position: 0 0; }

1
2
3
4
img{
  object-fit: contain;
  object-position: 0 0;
}

效果图:

图片 2

例如:替换元素相对于左下角10px 10px地方定位

img{   object-fit: contain;   object-position: bottom 10px left 10px; }

1
2
3
4
img{
  object-fit: contain;
  object-position: bottom 10px left 10px;
}

效果图:

图片 3

当然,你也可以使用calc()来定位:

img{   object-fit: contain;   object-position: calc(100% – 10px)
calc(100% – 10px); }

1
2
3
4
img{
  object-fit: contain;
  object-position: calc(100% – 10px) calc(100% – 10px);
}

效果图:

图片 4

它还支持负数:

img{   object-fit: contain;   object-position: -10px calc(100% – 10px);
}

1
2
3
4
img{
  object-fit: contain;
  object-position: -10px calc(100% – 10px);
}

效果图:

图片 5

总之,object-position的特性表现与backgound-position一样一样的。

兼容性:点这里

到这里,这两个属性算是讲完了,就是这么简单。

打赏支持我写出更多好文章,谢谢!

打赏作者

1、CSS是什么

CSS全称为Cascading Style
Sheets,中文翻译为“层叠样式表”,简称CSS样式表,所以称之为层叠样式表(Cascading
Stylesheet)简称CSS。

在网页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

Part 1 :盒模型(box model)

“every element in web design is a rectangular box.”

在一个文档中,每个元素都被表示为一个矩形的盒子。在CSS中,使用标准盒模型(也可叫做框模型)描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。

每个盒子有四个边:外边距边(margin), 边框边(border), 内填充边(padding) 与
内容边(content)。

图片 6

  声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢!

还记得许多年前,我们为一个元素添加有一个动画class之后,你还在用settimeout来延迟下一个动作,这么做过时啦。
哪怎么做呢。
不是添加了一个类么,哪动画结束以后来执行这个动作呗。
哪么动画有两种,还是要区别对待的。
1.animation
2.transition

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

图片 7
图片 8

1 赞 收藏
评论

2、CSS作用

CSS具有对网页的布局、颜色、背景、宽度、高度、字体进行控制,让网页按您的美工设计布局的更加美观漂亮。

1-设置外边距边(margin)

外边距区域 margin
area
用空白区域扩展边框区域,以分开相邻的元素。它的大小为 margin-box
的高宽。外边距区域大小由 margin-top, margin-right, margin-bottom,
margin-left及简写属性 margin控制。

属性名称 属性用途
margin-top 设置元素的顶部外边距
margin-right 设置与元素相关联的盒子模型的右外边距
margin-bottom 用于设置元素的底部外边距
margin-left 设置与元素相关联的盒子模型的左外边距

上面属性均允许使用负值

注意:这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:
即:margin: top right bottom left

margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
margin 可以设置为
auto。也可为外边距设置长度值或百分比(百分数是相对于父元素的 width
计算的).

单边外边距属性

可以使用单边外边距属性为元素单边上的外边距设置值。
假设需要把 p 元素的左外边距设置为
20px。可以采用以下方法:p {margin-left: 20px;}

值复制
若有值相同的边距值,则不用将四个属性值全部写出
CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:

  • 如果缺少左外边距的值,则使用右外边距的值。
  • 如果缺少下外边距的值,则使用上外边距的值。
  • 如果缺少右外边距的值,则使用上外边距的值。

图片 9

例子 要设置上 下 右 左边距值为0.25em 1em 0.5em
0.5em.也就是说右边和下边的值相同。

h1 {margin: 0.25em 1em 0.5em;}

  虽然现在很多浏览器都还不支持css3的3D转换,不过估计也已经有很多人都有玩css3的3D了。。。。。。所以我这篇也就相当于水一下了,哈哈。

animation动画监听

-webkit-animation动画其实有三个事件:
开始事件 webkitAnimationStart
结束事件 webkitAnimationEnd
重复运动事件 webkitAnimationIteration

document.addEventListener("webkitAnimationStart", function(){ //动画开始时事件
        console.log("start");
    }, false);
    document.addEventListener("webkitAnimationEnd", function(){ //动画结束时事件
        console.log("end");
    }, false);
    document.addEventListener("webkitAnimationIteration", function(){ //动画重复运动时的事件
        console.log("next"); //第一遍动画完成输出end
    }, false);

关于作者:TGCode

图片 10

路途虽远,无所畏
个人主页 ·
我的文章 ·
9 ·
   

图片 11

3、基本样式

  • font-size 字体大小
  • font-size:12px对象文字大小为12px
  • float 浮动
    *Float:left靠左浮动
  • Float:right靠右浮动
  • width 宽度
  • Width:20px 对象宽度20px
  • height 高度
    • Height:20px 对象高度20px
  • margin外边距
  • Margin:1px 2px 3px 4px 对象上距离1px;右为2px;下为3px;左为4px
  • padding内补距
  • Padding:1px 2px 3px 4px
    对象内距离边上为1px;右为2px;下为3px;左为4px
  • border边框
  • Border:1px solid #111 对象边框为1px宽黑实线
  • font-family 字体
  • font-family“黑体”; 对象文字字体为黑体
  • font-weight 文字加粗
  • font-weight:bold对象文字被加粗
  • line-height 行高
  • line-height:20px
    对象内上下2排文字行高为20px(包括文字自身占用高度)
  • text-decoration 文字装饰(下划线、删除线)
  • text-decoration:underline 对象文字加下划线
  • background 背景属性
  • background:#FFF url(bg.png) repeat-x 0 0对象背景色为白色、背景图片为bg.png按X轴分析重复显示并距离顶部和左为0像素
  • text-align内容左中右对齐

更多样式请
查看CSS手册

2-设置边框边(border)

边框 (border) 是围绕元素内容和内边距的一条或多条线,CSS border
属性允许你规定元素边框的样式(border-style)、宽度(border-style)和颜色(border-color)。

属性名称 属性用途 使用方法
border-width 为边框指定宽度 指定长度值(px, em)或使用 3 个关键字之一 (thin 、medium(默认值) 和 thick)
border-style 设置边框样式 10 个不同的非 inherit 样式
border-color 设置边框颜色 使用border-color属性

同样,border属性的值也采用了 top-right-bottom-left 的顺序

  用css3写3D立方体用到的属性不多,就那么几个:perspective,transform-style,以及transform。目前来说能完美支持3D的好像就只有chrome以及safari,也就是webkit引擎。所以本文的css3代码都只加了webkit前缀,因为产生3D的关键属性perspective其他浏览器都不支持,所以其他浏览器是应该是看不了3D的,所以看本文的例子请用chrome或者safari来看哦。

transition动画监听
document.addEventListener("webkitTransitionEnd", function(){
    console.log("end");
}, false);

嗯 对 就是这么简单 后面的实际用例我会附上
待更新中。。。
这篇文章写出来以后,朋友反馈过来有兼容性问题。
iOS9一下和安卓4.4一下是不支持的。
因为现在大多数项目技术栈是vue,这里我就推荐使用vue的过渡钩子函数beforeLeave来解决这个问题,关于vue过渡常见的用法和解惑我会单独开一篇文章去写这个东西。
其他比较好的解决方案还是使用setTimeout去解决这个问题。

4、基本选择器

CSS是一种用于屏幕上渲染htmlxml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应的元素,此时就需要我们所说的选择器。选择器主要是用来确定html的树形结构中的DOM元素节点。

  • 元素选择器—如果设置 HTML 的样式,选择器通常将是某个html
    元素,比如 <p><h1><em><a>,甚至可以是 html 本身:

h1 {color:blue;}
p {color:silver;}
  • 类选择器—为了将类选择器的样式与元素关联,必须将
    class指定为一个适当的值

<h1 class="important">This heading is very important.</h1>

.important {color:red;}
  • ** id选择器**—选择器可以为标有特定 id 的 HTML
    元素指定特定的样式,选择器以 “#” 来定义

<p id="red">这个段落是红色。</p>

#red {color:red;}

3-设置内填充边(padding)

CSS padding 属性定义元素边框与元素内容之间的空白区域,padding
属性接受长度值或百分比值,但不允许使用负值。

可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位(em/
ex / px)或百分比.

属性名称 属性用途
padding-top 设置元素的上内边距
padding-right 设置与元素右内边距
padding-bottom 用于设置元素的下内边距
padding-left 设置元素的左内边距

  好吧,废话不多说,进入主题:先上DEMO:图片 12 
链接:3Dhouses 
 (不要吐槽图片,因为找不到合适的素材,楼主只能自己画了,不过画是次要的哈,别介意)

5、伪元素

伪元素用于创建一些不在文档树中的元素,并为其添加样式。比如说,我们可以通过:before来在一个元素前增加一些文本,并为这些文本添加样式。虽然用户可以看到这些文本,但是这些文本实际上不在文档树中。

  • 伪元素包括这些

  • ::after—可以在元素的内容之后插入新内容

  • ::before—可以在元素的内容前面插入新内容

  • ::first-letter—用于向文本的首字母设置特殊样式

  • ::first-line—用于向文本的首行设置特殊样式

  • ::selection—定义用户鼠标已选择内容的样式

  • ::backdrop—用于改变全屏模式下的背景颜色,全屏模式的默认颜色为黑色

  • 举个栗子

HTML:
<p>Hello World, and wish you have a good day!</p>

CSS:
p:first-letter {
    font-size: 5em;
}

如果不创建一个元素,我们可以通过设置`<p>`的`:first-letter`伪元素来为其添加样式。这个时候,看起来好像是创建了一个虚拟的元素并添加了样式,但实际上文档树中并不存在这个“元素

4-设置内容边(content)

内容区域content area
是包含元素真实内容的区域。它通常包含背景、颜色或者图片等,位于内容边界的内部,它的大小为内容宽度
或 content-box宽及内容高度或content-box高。

content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

关于伪元素:”CSS introduces the concepts of pseudo-elements and
pseudo-classes to permit formatting based on information that lies
outside the document tree.”
即伪元素用于创建一些不在文档树中的元素,并为其添加样式。更多详情以后会专门整理~

A-content与:before 伪元素配合使用:
该伪元素允许创作人员在元素内容的最前面插入生成内容
B-content与:after伪元素配合使用,在元素之后添加内容

例如:如何使用 :before 在元素内容之前插入图像

<!DOCTYPE html >
<html>
<head>
<style type="text/css">
h1:before {content:url(/logo_white.gif)}
</style>
</head>

<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
</body>
</html>

  【html的布局】

6、完成一个需求

用CSS实现这个效果

用到了一些基本样式,实现代码可访问我的Github

CSS3中新增的盒模型计算方式:box-sizing

box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。

语法:box-sizing: content-box|border-box|inherit;

描述
content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit 规定应从父元素继承 box-sizing 属性的值。

  先说html该如何来布局:

7、更多资源与工具

  • CSS在线验证:
    http://codebeautify.org/cssvalidate
    (该网站上还有很多别的工具)
  • 学习CSS布局:http://learnlayout.com/
  • CSS基础教程:http://www.w3school.com.cn/css/index.asp
  • CSS3新特性(了解即可):http://www.w3school.com.cn/css3/
  • CodeForDream上提供的CSS课程:http://www.codefordream.com/courses/css\_basic/sections

**我是半生不熟 喜欢照自己的怪念头行事
喜欢一切意外 想把生活过成诗的样子
若哪天有幸相遇 请别诧异 其实我并不是个乖孩子 **

CSS3中新增的边框属性
  • border-radius:创建圆角边框
  • box-shadow:向矩形添加阴影
  • border-image:使用图片来绘制边框

<div class="cube">          <div class="ant">              <div class="face face-right"><img src="image/face-right.png" alt="图片 13"></div>              <div class="face face-left"><img src="image/face-left.png" alt="图片 14"></div>              <div class="face face-in"><img src="image/face-in.png" alt="图片 15"></div>              <div class="face face-out"><img src="image/face-out.png" alt="图片 16"></div>              <div class="face face-bottom"><img src="image/face-bottom.png" alt="图片 17"></div>              <div class="face face-top"><img src="image/face-bottom.png" alt="图片 18"></div>                <div class="face nohidden face-right"></div>              <div class="face nohidden face-left"></div>              <div class="face nohidden face-in"></div>              <div class="face nohidden face-out"></div>                <div class="house tv"><img src="image/tv.png" alt="图片 19"></div>              <div class="house bed"><img src="image/bed.png" alt="图片 20"></div>          </div>      </div>

Part2:选择器(Selectors)

CSS选择器用于选择你想要的元素的样式的模式。

选择器的类别:
类选择器,id选择器,属性选择器 ,派生选择器
,后代(包含)选择器,子元素选择器,相邻兄弟选择器

1-类选择器:允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使用.
语法: * 选择器名称{样式}

用法:

  • 独立使用
  • 多类选择器:通过把多个类选择器链接在一起,仅可以选择同时包含这些类名的元素(类名的顺序不限)。
  • 结合元素选择器来使用。
    eg.若希望只有段落显示为红色文本:
    p.important {color:red;}

eg.假设 class 为 important 的所有元素都是粗体,而 class 为 warning
的所有元素为斜体,class 中同时包含 important 和 warning
的所有元素还有一个银色的背景 。就可以写作:

.important.warning {background:silver;}

2-id选择器:可以为标有特定 id 的 HTML 元素指定特定的样式。
语法:# 选择器名称 {样式}

用法:

  • 独立使用
  • 与派生选择器一起使用:
    eg.

#sidebar p {
    font-style: italic;
    text-align: right;
    margin-top: 0.5em;
    }

3-属性选择器 :可以为拥有指定属性的 HTML 元素设置样式
语法 :元素名称[指定属性]{样式}
用法:

  • 单个属性值
    eg:把包含标题(title)的所有元素变为红色
    *[title] {color:red;}

  • 根据具体属性值选择
    eg.将指向 Web 服务器上某个指定文档的超链接变成红色
    a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}

  • 子串匹配属性选择器

类型 描述
[abc^="def"] 选择 abc 属性值以 "def" 开头的所有元素
[abc$="def"] 选择 abc 属性值以 "def" 结尾的所有元素
[abc*="def"] 选择 abc 属性值中包含子串 "def" 的所有元素

eg.

  • 特定属性选择类型
    eg.选择 lang 属性等于 en 或以 en- 开头的所有元素
    *[lang|="en"] {color: red;}
  • 根据部分属性值选择
    eg.选择 class 属性中包含 important 的元素
    p[class~="important"] {color: red;}

4-派生选择器:依据元素在其位置的上下文关系来定义样式
语法:元素名{样式}

5-后代(包含)选择器:可以定义后代选择器来创建一些规则,使这些规则在某些文档结构中起作用,而在另外一些结构中不起作用。

语法:在后代选择器中,规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符(combinator)。每个空格结合符可以解释为“…
在 … 找到”、“… 作为 … 的一部分”、“… 作为 …
的后代”,但是要求必须从右向左读选择器。

eg.希望只对 h1 元素中的 em 元素应用样式
h1 em {color:red;}

上面这个规则会把作为 h1 元素后代的 em 元素的文本变为 红色。其他 em
文本(如段落或块引用中的 em)则不会被这个规则选中.

6-子元素选择器:缩小范围,只选择某个元素的子元素

eg.选择只作为 h1 元素子元素的 strong 元素
h1 > strong {color:red;}
语法解释:子选择器使用了大于号(子结合符)。
子结合符两边可以有空白符,这是可选的。

7-相邻兄弟选择器:可选择紧接在另一元素后的元素,且二者有相同父元素
语法:相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling
combinator)。与子结合符一样,相邻兄弟结合符旁边可以有空白符。

eg.要增加紧接在 h1 元素后出现的段落的上边距
h1 + p {margin-top:50px;}

  一个立方体总共有六个面,所以,我们首先需要六个div:上面的faceout这些就是六个面。下面的nohidden类的div是我为了产生边,提升立体感加上去的,因为上面的那几个面有加backface-visibility:
hidden属性,所以当div背对我们的时候是看不见的(当然,连border也是看不见咯,具体你可以自己测试一下),加了下面那些div就是为了营造更强的空间感吧,楼主表达能力有限,如果不是很懂,待会我会把所有代码贴出,可以拷贝回去自己测试一下,还是挺好玩的。

选择器分组

可以将任意多个选择器分组在一起,对此没有任何限制。

例如,如果想把很多元素显示为灰色,可以使用类似如下的规则:
body, h2, p, table, th, td, pre, strong, em {color:gray;}
提示:通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。

  好吧,回归主题,立方体是六个面,同时他还需要一个外壳,如果你想让整个立方体动起来,就需要一个外壳,让六个面的位置定好后,然后让那个外壳动起来,里面的六个面位置也就跟着变了,这其中涉及一个很关键的属性:transform-style,这个属性是使被转换的子元素保留其
3D
转换,意思就是如果没有这个属性,当你的外壳转动起来的时候,内部的六个面的3D效果就会消失了,所以一定要在外壳上加上:transform-style:
preserve-3d。

选择器的优先级

浏览器通过优先级来判断哪一些属性值与一个元素最为相关,从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

优先级是如何计算的?

优先级就是分配给指定的CSS声明的一个权重,它由 匹配的选择器中的
每一种选择器类型的 数值 决定。
而当优先级与多个CSS声明中任意一个声明的优先级相等的时候,CSS中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的CSS规则总是会接管/覆盖(take
over)该元素从祖先元素继承而来的规则。

1、无条件优先的属性只需要在属性后面使用 !important
。它会覆盖页面内任何位置定义的元素样式。当然,IE
6不支持这个属性,于是它也成为一种hack被很多人所熟知,真正使命被人淡忘。

2、第二高位的优先属性是在html中给元素标签加style。由于该方法会造成CSS的难以管理,所以不推荐使用。

3、第三级优先的属性是由一个或多个id选择器来定义的。例如 #id{margin:0;}
会覆盖 .classname{margin:3px;}。

4、第四级的属性由一个或多个 类选择器、属性选择器、伪类选择器定义。如
.classname{margin:3px;} 会覆盖 div{margin:6px;}

5、第五级由一个或多个 类型选择器定义。如 div{margin:6px;} 覆盖
*{margin:10px;} 。

  除了外壳外,还需要一个3D区域,也就是上面的cube类div。在cube里加上perspective属性就可以让cube里面产生3D效果,上面也有说过perspective是设置元素被查看位置的视图,他能让里面的元素产生透视效果,也就是3D。这个属性如今只有webkit引擎支持。。

  【CSS】

  html写好后,就开始写css:

.cube{              width: 800px;              height: 400px;              -webkit-perspective: 1000px;              margin:200px auto 0 auto;          }            .ant{              width: 100%;              height: 100%;              -webkit-transform-style: preserve-3d;              -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);              -webkit-animation:xuanzhuan 10s infinite linear;          }            .face{              width: 100%;              height: 100%;              position: absolute;              border:1px solid;              -webkit-backface-visibility: hidden;              /*background-color: #FFF;*/              overflow: hidden;              z-index: 10;          }                    .nohidden{              -webkit-backface-visibility: visible;          }          .face img{              width: 100%;              height: 100%;            }            .face-right{              -webkit-transform: translate3d(400px , 0 , 0px) rotateY(-90deg);          }          .face-left{              -webkit-transform: translate3d(-400px , 0 , 0px) rotateY(90deg);          }          .face-in{              -webkit-transform: translate3d(0px , 0 , -400px) rotateY(0deg);          }          .face-out{              -webkit-transform: translate3d(0px , 0 , 400px) rotateY(180deg);          }          .face-bottom{              height: 800px;              -webkit-transform: translate3d(0px , 0px , 0px) rotateX(90deg);          }          .face-top{              height: 800px;              -webkit-transform: translate3d(0px , -400px , 0px) rotateX(-90deg);          }                    .house{              position: absolute;              height: 200px;              z-index: 100;          }          .tv{              -webkit-transform: translate3d(200px , 230px , 300px) rotateY(180deg);          }          .bed{              height: 100px;              -webkit-transform: translate3d(550px , 310px , 0px) rotateY(-90deg);          }            .house img{              height: 100%;          }            @-webkit-keyframes xuanzhuan{              from{                  -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);              }              to{                  -webkit-transform: translate3d(0,0,-200px) rotateY(360deg);              }          }

  perspective和transform-style都说过了,就不说了,说一下六个面的布置,就用到了transform方法了,其实也很容易理解:就是通过transform里的translate3d以及rotate旋转来调整六个面的位置和角度,同时提醒一下,写transform时,先写translate再写rotate和先写rotate再写translate出来的效果是不一样的,虽然两个都可以做出3D效果,但是参数是不一样的,前者可能更容易理解。先平移再旋转。而后者是旋转了之后,不能用xy平移,而是通过z轴才行了。

  当CSS也写好后,就可以加个动画效果看看了,这个就不多说了,就是通过animation很容易做的。

  下面贴出完整代码

图片 21图片 22

<!DOCTYPE html>  <html>  <head>      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">      <meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">      <style>          body{              margin:0;              padding:0;          }          .cube{              width: 800px;              height: 400px;              -webkit-perspective: 1000px;              margin:200px auto 0 auto;          }            .ant{              width: 100%;              height: 100%;              -webkit-transform-style: preserve-3d;              -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);              -webkit-animation:xuanzhuan 10s infinite linear;          }            .face{              width: 100%;              height: 100%;              position: absolute;              border:1px solid;              -webkit-backface-visibility: hidden;              /*background-color: #FFF;*/              overflow: hidden;              z-index: 10;          }                    .nohidden{              -webkit-backface-visibility: visible;          }          .face img{              width: 100%;              height: 100%;            }            .face-right{              -webkit-transform: translate3d(400px , 0 , 0px) rotateY(-90deg);          }          .face-left{              -webkit-transform: translate3d(-400px , 0 , 0px) rotateY(90deg);          }          .face-in{              -webkit-transform: translate3d(0px , 0 , -400px) rotateY(0deg);          }          .face-out{              -webkit-transform: translate3d(0px , 0 , 400px) rotateY(180deg);          }          .face-bottom{              height: 800px;              -webkit-transform: translate3d(0px , 0px , 0px) rotateX(90deg);          }          .face-top{              height: 800px;              -webkit-transform: translate3d(0px , -400px , 0px) rotateX(-90deg);          }                    .house{              position: absolute;              height: 200px;              z-index: 100;          }          .tv{              -webkit-transform: translate3d(200px , 230px , 300px) rotateY(180deg);          }          .bed{              height: 100px;              -webkit-transform: translate3d(550px , 310px , 0px) rotateY(-90deg);          }            .house img{              height: 100%;          }            @-webkit-keyframes xuanzhuan{              from{                  -webkit-transform: translate3d(0,0,-200px) rotateY(0deg);              }              to{                  -webkit-transform: translate3d(0,0,-200px) rotateY(360deg);              }          }      </style>      <title>Document</title>  </head>  <body>      <div class="cube">          <div class="ant">              <div class="face face-right"><img src="image/face-right.png" alt="图片 23"></div>              <div class="face face-left"><img src="image/face-left.png" alt="图片 24"></div>              <div class="face face-in"><img src="image/face-in.png" alt="图片 25"></div>              <div class="face face-out"><img src="image/face-out.png" alt="图片 26"></div>              <div class="face face-bottom"><img src="image/face-bottom.png" alt="图片 27"></div>              <div class="face face-top"><img src="image/face-bottom.png" alt="图片 28"></div>                <div class="face nohidden face-right"></div>              <div class="face nohidden face-left"></div>              <div class="face nohidden face-in"></div>              <div class="face nohidden face-out"></div>                <div class="house tv"><img src="image/tv.png" alt="图片 29"></div>              <div class="house bed"><img src="image/bed.png" alt="图片 30"></div>          </div>      </div>  </body>  </html>

View Code

  如果能做出上面那个立方体的时候,网上那些看似很炫的css3的3D轮播图也就很容易做出来了图片 31 3D轮播图

 

  这个的原理就不解释了,自己看代码吧,都一个样的,每一块就是一个3D模型,我这个只是做出了效果,没去做轮播了,做轮播也很容易,用js控制更换图片的src就行了。对了,还有一点就是注意一下每个块的排序,我之前以为用z-index可以,但是好像不行,就只能通过排序来调整各个块的层级关系了。

  下面贴出3D轮播的代码:

图片 32图片 33

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  <head>      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">      <title>3D轮播图</title>      <style>          body{margin:0;padding:0;}          .cube{              width: 800px;              height: 600px;              -webkit-perspective: 1000px;              margin:150px auto 0 auto;              position: relative;          }          .ant{              width: 200px;              height: 100%;              display: block;              -webkit-transform-style: preserve-3d;              -webkit-transform: translate3d(0,0,-400px);              position:absolute;          }            .ant-1{left: 0px;}          .ant-2{left: 200px;}          .ant-3{left: 400px;}          .ant-4{left: 600px;}          .ant-1 img{left: 0px;}          .ant-2 img{left: -200px;}          .ant-3 img{left: -400px;}          .ant-4 img{left: -600px;}            .face{              width: 100%;              height: 100%;              overflow: hidden;              position: absolute;              border:1px solid;          }          .face img{              display: block;              width: 800px;              height: 100%;              position: absolute;          }          .face-top{              -webkit-transform: translate3d(0,-300px,0px) rotateX(90deg);          }          .face-bottom{              -webkit-transform: translate3d(0,300px,0px) rotateX(-90deg);          }          .face-in{              -webkit-transform: translate3d(0,0,-300px) rotateX(180deg);          }          .face-out{              -webkit-transform: translate3d(0,0,300px) rotateX(0deg);          }          .face-left{              background-color: #999;              width: 600px;              -webkit-transform: translate3d(-300px,0,0px) rotateY(90deg);          }          .face-right{              background-color: #999;              width: 600px;              -webkit-transform: translate3d(-100px,0,0px) rotateY(-90deg);          }                .Animate{              -webkit-animation:xuanzhuan 10s infinite linear;          }            @-webkit-keyframes xuanzhuan{              0%{                  -webkit-transform: translate3d(0,0,-400px) rotateX(0deg);              }              50%{                  -webkit-transform: translate3d(0,0,-400px) rotateX(-360deg);              }              100%{                  -webkit-transform: translate3d(0,0,-400px) rotateX(0deg);              }          }      </style>      <script>          var PIC_NUM = 5; //图片分成的块数          window.onload = function(){              var index = 1;              document.querySelector(".ant-"+index).className += " Animate";              setTimeout(function(){                  index++;                  document.querySelector(".ant-"+index).className += " Animate";                  setTimeout(function(){                      index++;                      document.querySelector(".ant-"+index).className += " Animate";                      setTimeout(function(){                          index++;                          document.querySelector(".ant-"+index).className += " Animate";                      },600)                  },600)              } , 600);          }      </script>  </head>  <body>      <ul class="cube">          <li class="ant ant-1">              <div class="face face-top">                  <img src="image/face-in.png" alt="图片 34" />              </div>              <div class="face face-bottom">                  <img src="image/face-in.png" alt="图片 35" />              </div>              <div class="face face-left"></div>              <div class="face face-right"></div>              <div class="face face-in">                  <img src="image/face-in.png" alt="图片 36" />              </div>              <div class="face face-out">                  <img src="image/face-in.png" alt="图片 37" />              </div>          </li>          <li class="ant ant-2">              <div class="face face-top">                  <img src="image/face-in.png" alt="图片 38" />              </div>              <div class="face face-bottom">                  <img src="image/face-in.png" alt="图片 39" />              </div>              <div class="face face-left"></div>              <div class="face face-right"></div>              <div class="face face-in">                  <img src="image/face-in.png" alt="图片 40" />              </div>              <div class="face face-out">                  <img src="image/face-in.png" alt="图片 41" />              </div>          </li>          <li class="ant ant-4">              <div class="face face-top">                  <img src="image/face-in.png" alt="图片 42" />              </div>              <div class="face face-bottom">                  <img src="image/face-in.png" alt="图片 43" />              </div>              <div class="face face-left"></div>              <div class="face face-right"></div>              <div class="face face-in">                  <img src="image/face-in.png" alt="图片 44" />              </div>              <div class="face face-out">                  <img src="image/face-in.png" alt="图片 45" />              </div>          </li>          <li class="ant ant-3">              <div class="face face-top">                  <img src="image/face-in.png" alt="图片 46" />              </div>              <div class="face face-bottom">                  <img src="image/face-in.png" alt="图片 47" />              </div>              <div class="face face-left"></div>              <div class="face face-right"></div>              <div class="face face-in">                  <img src="image/face-in.png" alt="图片 48" />              </div>              <div class="face face-out">                  <img src="image/face-in.png" alt="图片 49" />              </div>          </li>      </ul>  </body>  </html>

View Code

  没有用js封装成轮播图模块也是为了让代码更清晰易懂吧。。。。水完收工=。=|||

 


发表评论

电子邮件地址不会被公开。 必填项已用*标注