Transition

Transition全局过渡动画在Web开发中，动画是晋升用户体验的重要元素之一。Vue.js提供了Transition组件，使咱们能够轻松地实现全局的过渡动画成果。本文将具体介绍如何应用Transition组件来创立全局过渡动画。 Transition组件的作用Transition组件是Vue.js提供的一个内置组件，它容许咱们在元素插入、更新或移除时增加过渡成果。通过应用Transition组件，咱们能够为整个应用程序的各种操作增加对立的过渡动画，例如路由切换、模态框呈现和隐没等。 实现办法以下是应用Transition组件实现全局过渡动画的步骤： 导入和注册：首先，须要确保在Vue组件中导入Transition组件，并在组件中进行注册。定义过渡成果：接下来，咱们能够应用<transition>标签将心愿增加过渡成果的元素包裹起来。能够自定义过渡成果的名称，例如<transition name="fade">。定义过渡类名：通过增加CSS类名，咱们能够为不同的过渡阶段（进入、来到等）定义相应的款式。例如，咱们能够应用.fade-enter和.fade-leave-active来定义进入和来到过渡的款式。增加过渡成果：持续应用CSS，咱们能够为过渡类名增加过渡成果，例如应用transition属性设置过渡的持续时间、缓动函数等。过渡类名Transition组件在不同的过渡阶段会主动为元素增加相应的类名。以下是罕用的过渡类名： 进入阶段：.enter、.enter-active、.enter-to来到阶段：.leave、.leave-active、.leave-to咱们能够应用这些类名来定义相应过渡阶段的款式。 自定义过渡成果除了默认的淡入淡出过渡成果，Transition组件还提供了更多的自定义选项。能够通过设置属性，如type、duration和timing-function来管制过渡成果的类型、持续时间和缓动函数。 同时，还能够应用JavaScript钩子函数，在过渡的特定阶段执行自定义操作。例如，在进入过渡开始时，咱们能够在before-enter钩子函数中执行一些操作，如扭转元素的初始状态。 总结Transition组件是Vue.js提供的内置组件，用于实现全局的过渡动画成果。通过导入和注册Transition组件，并在须要的中央包裹元素，能够为整个应用程序增加对立的过渡成果。应用过渡类名和自定义过渡成果的选项，咱们能够依据须要定义不同的过渡款式和动画类型。通过Transition组件，咱们能够晋升用户体验，为用户提供晦涩且统一的界面转换和交互成果。

简介动画这个概念十分宽泛，波及各个领域，这里咱们把范畴放大到前端网页利用层面上，不必讲游戏畛域的Animate，所有从最简略的开始。 目前大部分网页利用都是基于框架开发的，比方Vue，React等，它们都是基于数据驱动视图的，那么让咱们来比照一下，还没有这些框架的时候咱们如何实现动画或者过渡成果，而后应用数据驱动又是如何实现的。 传统过渡动画动画成果对体验有着十分重要的成果，然而对于很多开发者来讲，可能是个十分单薄的环节。在css3呈现之后，很多初学者最罕用的动画过渡可能就是css3的能力了。 css过渡动画css启动过渡动画非常简单，书写transition属性就能够了，上面写一个demo <div id="app" class="normal"></div>.normal { width: 100px; height: 100px; background-color: red; transition: all 0.3s;}.normal:hover { background-color: yellow; width: 200px; height: 200px;}成果还是很赞的，css3的transition根本满足了大部分动画需要，如果不满足还有真正的css3 animation。animate-css赫赫有名的css动画库，谁用谁晓得。 不论是css3 transition 还是 css3 animation，咱们简略应用都是通过切换class类名，如果要做回调解决，浏览器也提供了 ontransitionend ， onanimationend等动画帧事件，通过js接口进行监听即可。 var el = document.querySelector('#app')el.addEventListener('transitionstart', () => { console.log('transition start')})el.addEventListener('transitionend', () => { console.log('transition end')})ok，这就是css动画的根底了，通过js封装也能够实现大部分的动画过渡需要，然而局限性在与只能管制css反对的属性动画，相对来说控制力还是稍强劲一点。 js动画js毕竟是自定义编码程序，对于动画的控制力就很弱小了，而且能实现各种css不反对的成果。 那么 js 实现动画的根底是什么？简略来讲，所谓动画就是在 时间轴上不断更新某个元素的属性，而后交给浏览器从新绘制，在视觉上就成了动画。废话少说，还是先来个栗子： <div id="app" class="normal"></div>#app { width: 100px; height: 100px; background-color: red; border-radius: 50%;}// Tween仅仅是个缓动函数var el = document.querySelector('#app')var time = 0, begin = 0, change = 500, duration = 1000, fps = 1000 / 60;function startSport() { var val = Tween.Elastic.easeInOut(time, begin, change, duration); el.style.transform = 'translateX(' + val + 'px)'; if (time <= duration) { time += fps } else { console.log('动画完结从新开始') time = 0; } setTimeout(() => { startSport() }, fps)}startSport()在时间轴上不断更新属性，能够通过setTimeout或者requestAnimation来实现。至于Tween缓动函数，就是相似于插值的概念，给定一系列变量，而后在区间段上能够获取任意时刻的值，纯数学公式，简直所有的动画框架都会应用，想理解的能够参考张鑫旭的Tween.js ...

Vue transition 过渡动画使用钩子函数钩子函数将钩子函数绑定在transition标签上之后 <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition>在Vue实例中的methods定义钩子函数的方法 在这里踩到了一个坑after-enter函数一直没有触发，花了很久时间才得到解决，这里用了Vue官方推荐的插件Velocity.js,现在就让我们聊聊这个问题 原来有问题的代码 enter(el, done){ Velocity(el, { translateX: '150px',translateY : '450px' }, { duration: 1000 }) Velocity(el,{opacity: 1},{ duration: 1000 }, { complete: done }) // setTimeout(() => { // el.offsetWidth // el.style.transform = "translate(150px,450px)"; // el.style.transition = "all 2s easy"; // done() // }, 20) },上面代码的动画效果没有问题，但是after-enter方法却一直没有触发后面通过调试后发现 Velocity(el,{opacity: 1},{ duration: 1000 }, { complete: done })改为 ...

1：基本概念在一定时间内平滑的过渡，也就是圆滑的以动画效果改变css的属性值。它的过渡可以由鼠标点击、焦点获取或者失去、被点击事件或对元素的改变中触发；不能主动触发，只能被动触发。 常用的基本属性有：Transition-duration（过渡时间）、Transition-property （过渡 CSS 属性名称）、Transition-delay（过渡开始时间）、贝塞尔曲线、Transition-timing-function（过渡效果时间曲线）和Transition（简写设置四个属性）。 2：浏览器兼容 3：Transition-duration必须搭配transition-property同时使用，因为要指定一个过渡的一个属性才能使用；默认值是0。 transition-duration: s | ms;4：Transition-property必须搭配transition-duration同时使用；默认值是all（所有属性都获取过渡效果）；除此之外Transition-duration的值还可以是none（没有过渡效果）、property（特定属性获得过渡效果，多个属性用逗号隔开；）。 不是所有的CSS属性都支持transition-property：all；支持的都有一个明确的临界： background-color、background-positionborder-color、border-width、border-spacingclipcolorcropfont-size、font-weightheight、width、line-heightright、left、bottom、topmargin、paddingmax-height、max-width、min-height、min-widthoutline-color、outline-offset、outline-widthtext-indent、text-shadow、vertical-align、word-spacing、letter-spacingvisibilityopacityz-index5：Transition-delay（延迟多长时间才然后才去执行转换的过程）transition-delay: s | ms;6：贝塞尔曲线应用于二维图形应用程序的数学曲线绘制贝塞尔曲线函数形式的贝塞尔曲线 一阶贝塞尔曲线二阶贝塞尔曲线三阶贝塞尔曲线cubic-bezier(n1, n2, n3, n4) P0 (0, 0)P1 (1, 1)P2 (n1, n2)P3 (n3, n4)曲线上点的切线的斜率对应的运动速度http://cubic-bezier.com/ - 可视化cubic-bezier编辑7：Transition-timing-function（时间过渡曲线）transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n1, n2, n3, n4);默认easen1、n2、n3、n4取值，官方推荐（0-1）linear - 以相同速度过渡 - cubic-bezier（0, 0, 1, 1） / cubic-bezier（1, 1, 0, 0）ease - 慢速开始 -> 变快 -> 慢速结束 - cubic-bezier（0.25, 0.1, 0.25, 1）ease-in - 慢速开始 - cubic-bezier（0.42, 0, 1, 1）ease-out - 慢速结束 - cubic-bezier（0, 0, 0.58, 1）ease-in-out - 慢速开始、慢速结束、幅度比ease大 - cubic-bezier（0.42, 0, 0.58, 1）cubic-bezier(n, n, n, n) - 自定义速度函数 （n介于0和1）8：局限性与优势优点：简单易用 ； ...

css 动画：transition（过渡）因为有些属性动画无意义，所以可动画属性集是一个有限集合其属性为如下几部分：transition-property：指定哪个或哪些 CSS 属性用于过渡transition-duration：指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长transition-timing-function：指定一个函数(根据四个点确定一个bezier曲线)，定义属性值怎么变化，值；也可以从 Easing Functions Cheat Sheet 选择缓动效果bezier 曲线定义可以具体看MDN上的timing functions cubic-bezier 又称三次贝塞尔，主要是为 animation 生成速度曲线的函数，规定是 cubic-bezier(<x1>, <y1>, <x2>, <y2>)。P0：默认值 (0, 0)P1：动态取值 (x1, y1)P2：动态取值 (x2, y2)P3：默认值 (1, 1)大概效果图–p3的坐标本应该为（1，1），这是css默认的（tips：偷不到图，自己又不想画）横坐标（abscissas）范围必须是[0, 1]，纵坐标（ordinate）范围如果超出[0, 1]，会有弹跳效果–由于兼容性的问题，这个效果还是别考虑了transition-delay: 指定延迟，即属性开始变化时与过渡开始发生时之间的时长在使用过程中简写：transition: <property> <duration> <timing-function> <delay>;/* 分开写，可以不一一对应，如4个property对应一个duration /.transition { position: absolute; top: 20px; left: 20px; width: 40px; height: 40px; border-radius: 50%; background-color: red; / transition-property: left color width height; transition-duration: 1.2s; transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-delay: 80ms; */ transition: all 1.2s cubic-bezier(0.23, 1, 0.32, 1) 80ms; &–move { left: 400px; background-color: cornflowerblue; width: 100px; height: 100px; transform: translateY(100px) }}检测过渡是否完成，这样就可以将css过渡和js动画结合起来el.addEventListener(“transitionend”, updateTransition, true);所以，所有property指定的属性，在值发生改变的的时候，都会遵循duration、timing-function、delay等定义的过度效果达到最后一帧的状态，并保持下来，至于transform，和width等一样，只是一个改变时可以触发transition过渡效果的可动画属性集合中的一个属性，transition，transform基本兼容到ie10。css 动画：animation（动画）属性描述animation-name动画名称animation-duration一个周期的时间(ms \s)animation-timing-function缓冲效果函数animation-delay动画执行前延迟时间(ms \s)animation-iteration-count动画执行的次数animation-direction动画是否反向播放animation-fill-mode动画执行之前和之后如何给动画的目标应用样式（停留在哪一帧）animation-play-state动画暂停/播放(用于js控制动画object.style.animationPlayState=“paused”，default: running)注：以上顺序是简写顺序@keyframes animationname {keyframes-selector {css-styles;}}值描述animationname动画名称keyframes-selector定义帧css-styles该帧的样式一个可控的动画<button @click=“animationMove”>stopAnimation</button><div class=“animation” ref=“animation”></div>animationMove (): void { let stateg = ‘paused’ if (this.$refs.animation.style.animationPlayState === ‘paused’) { state = ‘running’ } this.$refs.animation.style.animationPlayState = state}.animation { position: absolute; border-radius: 50%; top: 120px; animation: move 1.2s ease-in 80ms infinite alternate;}@keyframes move { 0% { left: 20px; background-color: red; width: 40px; height: 40px; transform: translateY(0) } 100% { left: 400px; background-color: rgb(169, 185, 214); width: 100px; height: 100px; transform: translateY(100px) }}动画和过渡的相同之处应该就是缓冲函数不可变，不同之处就是动画可以定义多个关键帧，过渡只能定义两个关键帧（起始帧和结束帧）动画修改一个元素的 width 和 height 会改变它的形状，而且可能引起页面上其它元素的移动和形状改变，这个过程称为布局。基于 CSS 的动画和原生支持的 Web 动画通常在称为合成器线程的线程上处理，transforms 和 opacity 都可以在合成器线程中处理；它与浏览器的主线程不同，在该主线程中执行样式，布局，绘制和 JavaScript。这意味着如果浏览器在主线程上运行一些耗时的任务，这些动画可以继续运行而不会中断；如果任何动画出发了绘制，布局，或者两者，那么主线程会来完成该工作。这个对基于 CSS 还是 JavaScript 实现的动画都一样，布局或者绘制的开销巨大，让与之关联的 CSS 或 JavaScript 执行工作、渲染都变得毫无意义；避免使用触发布局或绘制的属性动画。对于大多数现代浏览器，这意味着将动画（修改的属性）限制为 opacity 和 transform；参考：How JavaScript works: Under the hood of CSS and JS animations + how to optimize their performanceMDN:transitionMDN:animation ...

前言在几年前 jQuery 流行的时候大家都通过js去操作dom元素的css来实现以及监听动画，甚至出现了很多通过js去监听动画的动画库。前端时间在写 vue 的时候发现 vue 中实现动画效果，并没有通过 js 去不停的操作css样式，那么在css中是怎么去监听dom元素的动画效果呢？纯js动画监听示例实现下图中的动画效果监听：#demo { width: 200px; height: 200px; background: red; opacity: 1; margin-bottom: 20px; transition: opacity 1s;}#demo.hide { opacity: 0;}#demo.show { opacity: 1;}<div id=“demo”>opacity</div><button onclick=“runAction();">togglether</button>(function() { var $target = document.getElementById(‘demo’); var transitions = { ’transition’: ’transitionend’, ‘OTransition’: ‘oTransitionEnd’, ‘MozTransition’: ’transitionend’, ‘WebkitTransition’: ‘webkitTransitionEnd’ } var eventName = undefined; for(t in transitions){ if( $target.style[t] !== undefined ){ eventName = transitions[t]; break; } } eventName && $target.addEventListener(eventName, function() { alert(‘Transition end!’); }); runAction = function() { if (eventName) { var className = $target.className; $target.className = className.indexOf(‘hide’) == -1 ? ‘hide’ : ‘show’; } else { console.warn(‘您的浏览器不支持transitionend事件’); } }})();代码很简单，就是通过js中的 transitionend 来监听动画执行效果，如果是帧动画的话，需要使用 animationend。万变不离其宗，vue中实现动画监听也是基于 transitionend 来进行操作的。效果传送门：https://codepen.io/pyrinelaw/pen/pqRgOe实现效果公共样式长这样.demo { height: 120px; position: relative; div { position: absolute; background: red; width: 100px; height: 100px; left: 0; top: 0; }}vue transitionend<div class=“demo demo-1”> <div v-bind:class="{anim: needAnim}” @transitionend=“actionEnd”></div></div>export default { data() { return { needAnim: false, }; }, mounted() { setTimeout(() => { this.needAnim = true; }, 0); }, methods: { actionEnd() { alert(‘demo-1 action end’); }, },};同样的道理，帧动画需要使用 animationend， 后面不再说明。我们来看一下vue中是如何做到的（代码太多，部分代码用“…”省略）。关键代码： src/core/instance/state.jsfunction initMethods (vm: Component, methods: Object) { for (const key in methods) { // 将事件绑定到虚拟Dom上 vm[key] = methods[key] == null ? noop : bind(methods[key], vm) // … }}与click事件的绑定无异，初始化的时候就把“transitionend”绑定到“VDom”上，以达到动画监听效果。transition有两种用法，一种是通过css控制动画效果.demo-3 { div { top: 20px; } /* 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除 / .anim-enter { left: 0px; } / 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用 / / 在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数 / .anim-enter-active { transition: left 2s; } / 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除 / .anim-enter-to { left: 200px; } / 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除 / .anim-leave { left: 200px; } / 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用 / / 在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数 / .anim-leave-active { transition: left 2s; } / 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除 */ .anim-leave-to { left: 0px; }}<div class=“demo demo-3”> <button v-on:click=“anim = !anim”>{{anim}}</button> <transition name=“anim”> <div v-if=“anim”>demo-3</div> </transition></div>export default { data() { return { anim: false }; },};用 vue 官方文档上有一张图说明整个生命周期另一种是通过脚本控制动画效果.demo-3, .demo-4 { div { top: 20px; }}<div class=“demo demo-4”> <button v-on:click=“anim = !anim”>{{anim}}</button> <transition v-on:before-enter=“beforeEnter” v-on:enter=“enter” v-on:after-enter=“afterEnter” v-on:enter-cancelled=“enterCancelled” v-on:before-leave=“beforeLeave” v-on:leave=“leave” v-on:after-leave=“afterLeave” v-on:leave-cancelled=“leaveCancelled” > <div v-if=“anim”>demo-4</div> </transition></div>export default { data() { return { anim: false }; }, methods: { beforeEnter(el) { console.warn(‘beforeEnter’); el.style = ’transition: left 2s;’; }, // 当与 CSS 结合使用时,回调函数 done 是可选的 enter(el, done) { console.warn(’enter’); setTimeout(() => { el.style = ’transition: left 2s; left: 200px’; }); setTimeout(() => done(), 2000); }, afterEnter(el) { console.warn(‘afterEnter’); el.style = ’left: 200px;’; }, enterCancelled(el) { console.warn(’enterCancelled’); }, beforeLeave(el) { console.warn(‘beforeLeave’); el.style = ’left: 200px;’; }, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 leave(el, done) { console.warn(’leave’); el.style = ’transition: left 2s;’; setTimeout(() => done(), 2000); }, afterLeave(el) { console.warn(‘afterLeave’); el.style = ’left: 0px;’; }, // leaveCancelled 只用于 v-show 中 leaveCancelled(el) { console.warn(’leaveCancelled’); }, },};这种做法通过我们在 transition 元素上绑定不同的事件，通过控制回调中提供的 done方法 达到监听效果。transition 元素transition 元素在vue中并不会生成 div 元素 有点像 template。关键代码： src/platforms/web/runtime/components/transition.jsexport default { name: ’transition’, props: transitionProps, abstract: true, render (h: Function) { // … 省略很多代码 const rawChild = children[0] // … 省略很多代码 return rawChild }}在 render 中直接返回了第一个子元素来渲染，具体的 patch 逻辑这里不做说明。transition 动画控制源码上面我们展示了 transition 的两种监听动画的方法，下面看几段关键代码src/platforms/web/runtime/modules/transition.jsconst autoCssTransition: (name: string) => Object = cached(name => { return { enterClass: ${name}-enter, leaveClass: ${name}-leave, appearClass: ${name}-enter, enterToClass: ${name}-enter-to, leaveToClass: ${name}-leave-to, appearToClass: ${name}-enter-to, enterActiveClass: ${name}-enter-active, leaveActiveClass: ${name}-leave-active, appearActiveClass: ${name}-enter-active }})function resolveTransition (def?: string | Object): ?Object { // … 省略很多代码 extend(res, autoCssTransition(def.name || ‘v’))}拼装 class 类名，以我们传入的 name 属性 或者 v 开头，并且 name 与 v 后面的类名是固定的。export function enter (vnode: VNodeWithData, toggleDisplay: ?() => void) { const el = vnode.elm // … 省略很多代码 const startClass = isAppear ? appearClass : enterClass const activeClass = isAppear ? appearActiveClass : enterActiveClass const toClass = isAppear ? appearToClass : enterToClass const beforeEnterHook = isAppear ? (beforeAppear || beforeEnter) : beforeEnter const enterHook = isAppear ? (typeof appear === ‘function’ ? appear : enter) : enter // … 省略很多代码 // 标记是否使用自定义样式控制css const expectsCSS = css !== false && !isIE9 // 标记用户是是否需要自己控制动画监听，也就是enter事件是否存在 const userWantsControl = enterHook && (enterHook._length || enterHook.length) > 1 // done 回调，用来手动结束动画效果 const cb = el._enterCb = once(() => { if (expectsCSS) { removeTransitionClass(el, toClass) removeTransitionClass(el, activeClass) } if (cb.cancelled) { if (expectsCSS) { removeTransitionClass(el, startClass) } enterCancelledHook && enterCancelledHook(el) } else { afterEnterHook && afterEnterHook(el) } el._enterCb = null }) if (!vnode.data.show) { // 插入元素时通过注入插入钩子, 调用enter事件 mergeVNodeHook(vnode.data.hook || (vnode.data.hook = {}), ‘insert’, () => { // … 省略很多代码 // enterHook 调用的是在transition 传入的 enter 方法 enterHook && enterHook(el, cb) }, ’transition-insert’) } beforeEnterHook && beforeEnterHook(el) // 使用样式控制的时候把 v-before-enter 与 v-enter样式加到dom元素上 if (expectsCSS) { addTransitionClass(el, startClass) addTransitionClass(el, activeClass) nextFrame(() => { addTransitionClass(el, toClass) removeTransitionClass(el, startClass) if (!cb.cancelled && !userWantsControl) { // 在元素上添加 transitionend监听 // 方法位于 transition-util.js 中 whenTransitionEnds(el, type, cb) } }) } // … 省略很多代码}使用样式控制样式监听时通过添加和改变 dom 样式名以及 transitionend 达到监听效果。手动监听动画时在元素插入时添加钩子提供回调函数以达到监听效果。与 enter 对应的 leave 逻辑其实都差不多，这里不做过多讲解。其他以上篇幅只是一个初步简略分析，时间有限，很多细节并未深究。以上内容鉴于 vue 2.18 版本，其他版本可能会有所改动。参考资料https://developer.mozilla.org/zh-CN/docs/Web/Events/transitionendhttps://cn.vuejs.org/v2/guide/transitions.html ...

前言如同人类的的进化一样，CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性，弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。1.选择器CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。1.1 属性选择器属性选择器就是通过属性来选择元素。选择器含义[attr]存在attr属性即可[attr=val]属性值完全等于val[attr*=val]属性值里包含val字符并且在“任意”位置[attr^=val]属性值里包含val字符并且在“开始”位置[attr$=val]属性值里包含val字符并且在“结束”位置1、[attr]<style> /* 所有拥有class属性的标签，添加color样式 / [class]{ color: #333; }</style>2、[attr=val]<style> / 所有拥有class属性全等于“one”的标签，添加color样式 / [class = “one”]{ color: #333; }</style>3、[attr=val]<style> /* class属性的值里面包含“one”的标签，添加color样式 / [attr=“one”]{ color: #333; }</style>4、[attr^=val]<style> /* class属性的值以“one”开始的标签，添加color样式 / [attr ^= “one”]{ color: #333; }</style>5、[attr$=val]<style> / class属性的值以“one”结束的标签，添加color样式 / [attr $= “one”]{ color: #333; }</style>1.2 伪类选择器除了以前介绍的的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。1、结构（位置）伪类选择器含义:first-child其父元素的第1个子元素:last-child其父元素的最后1个子元素:nth-child(n)其父元素的第n个子元素:nth-last-child(n)其父元素的第n个子元素（倒着数）2、空伪类:empty选中没有任何子节点的元素<style> div:empty { / 没有子元素的div元素 / width: 100px; height: 100px; background-color: pink; }</style><!– css 样式不起作用 –><div class=“one”>阿斯蒂芬</div> <!– css样式不起作用 –><div> <p></p></div><!– css样式生效 –><div></div>3、目标伪类:target结合锚点进行使用，处于当前锚点的元素会被选中；<style type=“text/css”> / 使用锚链接指向当前标签的时候 / .one:target { background-color: pink; font-size: 30px; }</style><a href="#hh">找笑脸去</a><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p id=“hh” class=“one”>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p><p>阿斯顿发撒旦法撒打发放大法的撒双方都</p>4、排除伪类:not(selector)除selector（任意选择器）外的元素会被选中；<style> / 除了类名是“.not”的div元素 / div:not(.one) { width: 100px; height: 100px; background-color: pink; }</style><!– css样式不生效 –><div class=“one”></div><!– css样式生效 –><p></p><!– css样式生效 –><div></div>1.3 伪元素选择器1、::first-letter文本的第一个单词或字（如中文、日文、韩文等）2、::first-line 文本第一行；3、::selection 可改变选中文本的样式；4、::before和::after示例代码：伪元素实现横竖分割线<style type=“text/css”> * { margin: 0; padding: 0; list-style: none; } .box { width: 300px; height: 200px; background-color: pink; margin: 50px auto; } .box li { width: 100px; height: 100px; float: left; background-color: #555; position: relative; overflow: hidden; } li:before { content: “”; display: block; width: 90px; height: 1px; background-color: #ccc; position: absolute; top: 97px; left: 5px; } li:after { content: “”; display: block; width: 1px; height: 90px; background-color: #ccc; position: absolute; left: 0px; top: 4px; } li:nth-child(1):after,li:nth-child(4):after { display: none; } li:nth-last-child(-n+3):before { display: none; }</style><div class=“box”> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>效果图：:after、:before在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下:after、:before会被自动识别为::after、::before，这样做的目的是用来做兼容处理。2. 颜色新增了RGBA、HSLA模式，其中的A表示透明度，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。2.1 RGBARed、Green、Blue、Alpha即RGBA，R、G、B取值范围0255。<style> #box{ width:100px; height:100px; background: rgba(200,200,200,.5); }</style><div id=“box”></div>2.2 HSLAH 色调 取值范围0360，0/360表示红色、120表示绿色、240表示蓝色S 饱和度 取值范围0%100%L 亮度 取值范围0%100%A 透明度 取值范围01<style> #box{ width:100px; height:100px; background: hsla(200,50%,50%,.5); }</style><div id=“box”></div>2.3 关于 CSS 的透明度Alpha和opacity的区别主要就是，opacity具有继承性，父盒子设置该属性，下面所有的子元素都会继承该属性。transparent不可调节透明度，始终完全透明。3. 文本阴影text-shadow，可分别设置偏移量、模糊度、颜色（可设透明度）。如：text-shadow: 2px 2px 2px #CCC;1、水平偏移量 正值向右 负值向左；2、垂直偏移量 正值向下 负值向上；3、模糊度是不能为负值；4、阴影颜色。示例代码：文字浮雕<style> html,body { margin: 0; padding: 0; width: 100%; height: 100%; background-color: #999; font-size: 50px; text-align: center; line-height: 260px; color: #999; } .one { text-shadow: -1px -1px 1px #fff,1px 1px 1px #000; } .two { text-shadow: -1px -1px 1px #000,1px 1px 1px #fff; }</style><div class=“one”>我是凸起文字</div><div class=“two”>我是凹下去的文字</div>效果图：4. 盒模型CSS3中可以通过box-sizing来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。可以分成两种情况：1、box-sizing: border-box盒子大小为width2、box-sizing: content-box盒子大小为width + padding + border注：上面的标注的width指的是CSS属性里设置的width: length，content的值是会自动调整的。示例代码：<style type=“text/css”> .box { width: 316px; height: 170px; float: left; margin-left: 20px; box-sizing: border-box; } .box img { width: 100%; height: 100%; } .box:hover { border: 10px solid #00eeff; }</style><div class=“box”> <img src=“1.jpg” alt=""></div><div class=“box”> <img src=“1.jpg” alt=""></div>效果图：可以看出通过设置盒子模型后，虽然.box设置了边框，但是整个box的盒子大小没有改变。5. 边框边框中的边框圆角、边框阴影属性，应用十分广泛，兼容性也相对较好，具有符合渐进增强原则的特征。5.1 边框圆角通过border-radius属性，设置边框圆角，圆角处理时，脑中要形成圆、圆心、横轴、纵轴的概念，正圆是椭圆的一种特殊情况。为了方便表述，我们将四个角标记成1、2、3、4，如2代表右上角，CSS里提供了border-radius来设置这些角横纵轴半径值。分别设置横纵轴半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的14个用来设置横轴半径（分别对应横轴1、2、3、4位置），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）。<style type=“text/css”> .box { margin: 50px auto; width: 300px; height: 500px; border: 1px solid #ccc; border-radius: 10px 20px 50px 70px / 10px 20px 50px 70px; }</style><div class=“box”></div>效果图：一般情况下，我们用不到这么复杂的，除非特殊需求的时候。支持简写模式，具体如下：1、border-radius: 10px;表示四个角的横纵轴半径都为10px；2、border-radius: 10px 5px;表示1和3角横纵轴半径都为10px，2和4角横纵轴半径为5px；3、border-radius: 10px 5px 8px;表示1角模纵轴半径都为10px，2和4角横纵轴半径都为8px，3角的横纵轴半径都为8px；4、border-radius: 10px 8px 6px 4px;表示1角横纵轴半径都为10px，表示2角横纵轴半径都为8px，表示3角横纵轴半径都为6px，表示4角横纵轴半径都为6px；椭圆的画法：<style type=“text/css”> .box { margin: 50px auto; width: 300px; height: 500px; border: 1px solid #ccc; / 当盒子长宽不一致时，圆角属性 分别设置宽度的一半，以及长度的一半，即是椭圆 / / 或者直接 border-radius:50%; / border-radius: 150px 250px; }</style><div class=“box”></div>如果不想计算，直接设百分比：“50%”。正圆的画法：<style type=“text/css”> .box { margin: 50px auto; width: 200px; height: 200px; border: 1px solid #ccc; / 当盒子长宽相等时，圆角属性分别设置宽度的一半，以及长度的一半，即是正圆 / / 或者直接 border-radius:50%; / border-radius: 100px; }</style><div class=“box”></div>示例代码：边框圆角合集<style> * { margin: 0; padding: 0; list-style: none; background-color: wheat; overflow: hidden; } .box { width: 980px; height: 400px; background-color: #fff; margin: 50px auto; } .box li { float: left; width: 193px; height: 193px; background-color: #fff; margin:5px; box-shadow: 2px 3px 5px #aaa; } li:first-child:after { content: “”; height: 130px; width: 130px; margin: 30px auto; display: block; border: 1px solid orangered; border-radius: 50%; } li:nth-child(2):after { content: “”; display: block; height: 130px; width: 130px; border: 1px solid orangered; margin: 30px auto; border-radius: 65px 65px 0px 0px; } li:nth-child(3):after { content: “”; display: block; width: 130px; height: 65px; border: 1px solid orangered; margin: 50px auto; border-radius: 65px 65px 0px 0px; } li:nth-child(4):after { content: “”; display: block; width: 130px; height: 130px; border: 1px solid orangered; margin: 20px auto; border-radius: 65px 0px 0px 0px; } li:nth-child(5):after { content: “”; width: 130px; height: 65px; display: block; border: 1px solid orangered; border-radius: 50%; margin: 50px auto; } li:nth-child(6):after{ content: “”; height: 130px; width: 65px; display: block; border: 1px solid orangered; border-radius: 50%; margin: 20px auto; } li:nth-child(7):after { content: “”; height: 130px; width: 130px; display: block; border: 1px solid orangered; margin: 20px auto; border-radius: 135px 0px 0px 0px; } li:nth-child(8):after { content: “”; width: 135px; height: 30px; display: block; margin: 30px auto; border: 1px solid orangered; border-radius: 65px 65px 0px 0px / 30px 30px 0px 0px; }</style><div class=“box”> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>效果图：5.2 边框阴影box-shadow，与文字阴影类似，可分别设置盒子阴影偏移量、模糊度、颜色（可设透明度）。如：box-shadow: 5px 5px 5px #CCC1、水平偏移量 正值向右 负值向左；2、垂直偏移量 正值向下 负值向上；3、模糊度是不能为负值；4、inset可以设置内阴影；注：设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。可以设置多重边框阴影，实现更好的效果，增强立体感，符合渐进增强，实际开发中可以大胆使用。示例代码：<style> .box { width: 200px; height: 200px; margin: 50px auto; border: 1px dashed #000; box-shadow: 2px 3px 4px rgba(0, 247, 255, 0.452),inset 5px 6px 7px rgba(255, 0, 140, 0.562); }</style><div class=“box”></div>效果图：我们通过上图可以看到，虚线是盒子的位置，粉色阴影是inset属性设置的，所以是内阴影，浅蓝色是直接设置的外阴影，效果一目了然。6. 背景背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。6.1 background-size通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。其参数设置如下：可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。6.2 background-origin通过background-origin可以设置背景图片定位(background-position)的参照原点。其参数设置如下：border-box以边框做为参考原点；padding-box以内边距做为参考原点；content-box以内容区做为参考点；示例代码：<style type=“text/css”> .box1,.box2,.box3 { width: 200px; height: 200px; display: inline-block; margin: 50px 30px; border: 10px dashed aquamarine; padding: 10px; background-image: url(bg.jpg); background-repeat: no-repeat; } .box1{ background-origin: padding-box; } .box2{ background-origin: content-box; } .box3{ background-origin: border-box; }</style><div class=“box1”></div><div class=“box2”></div><div class=“box3”></div>效果图：6.3 background-clip通过background-clip，可以设置对背景区域进行裁切，即改变背景区域的大小。其参数设置如下：border-box裁切边框以内为背景区域；padding-box裁切内边距以内为背景区域；content-box裁切内容区做为背景区域；6.4 多背景以逗号分隔可以设置多背景，可用于自适应布局。在一个盒子里可以设置多个背景图片，通过背景定位的功能将两张图片组装起来。示例代码：<style type=“text/css”> .box { width: 320px; height: 410px; margin: 50px auto; background: url(head.jpg) no-repeat left top, url(foot.jpg) no-repeat left bottom; background-size: contain; background-color: #ccc; }</style><div class=“box”></div>效果图：从效果图中我们可以看到，在盒子里面设置了两张背景图，分别是上面一部分，下面一部分。这里故意给盒子高度拉长了一点，并且设置了一个灰色的背景，为的就是大家能够清楚的看到上下两部分的背景图。7. 渐变渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。7.1 线性渐变linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。1、必要的元素：借助Photoshop总结得出线性渐变的必要元素a、方向b、起始色c、终止色d、渐变距离2、关于方向通过具体的方位词指定to leftto rightto topto bottom通过角度改变渐变的方向0°，从下往上渐变90°，从左向右渐变示例代码：<style type=“text/css”> .box { width: 400px; height: 150px; margin: 100px auto; / 线性渐变 / background-image: linear-gradient( /渐变的方向/ 45deg, /渐变开始的颜色/ #88f5ea, /渐变结束的颜色/ #d36be7 ); }</style><div class=“box”></div>效果图：3、渐变范围如果不设置范围，默认渐变的范围是父盒子的宽度，如果通过background-size设置宽度的话，渐变范围即为设置的宽度。<style> .box { width: 500px; height: 100px; margin: 100px auto; background-image: linear-gradient( 135deg, yellow 20%, black 20%, black 40%, yellow 40%, yellow 60%, black 60%, black 80%, yellow 80%, yellow ); background-size: 66px 100px; }</style><div class=“box”></div>效果图：7.2 径向渐变radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果。1、必要的元素：a、辐射范围即圆半径b、中心点 即圆的中心c、渐变起始色d、渐变终止色e、渐变范围2、关于中心点中心位置参照的是盒子的左上角，例如：<style> #div{ width:200px; height:200px; background: radial-gradient( / 100px是渐变辐射的范围 0 0 指的是圆心在盒子的左上角 / 100px at 0 0, /渐变起始色/ orange, /渐变终止色/ #ff4500 ) }</style><div id=“box”></div>示例代码：镜像渐变画个球<style type=“text/css”> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; background-color: #ccc; } .box { width: 400px; height: 400px; background-color: #fff; margin: 50px auto; border-radius: 50%; background-image: radial-gradient( 300px at 100px 100px, rgba(0,0,0,.1), rgba(0,0,0,.8) ); }</style><div class=“box”></div>效果图：8. 过渡过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。8.1 帧动画通过一帧一帧的画面按照固定顺序和速度播放，如电影胶片。示例代码：<!– baidu.png这个背景图由64张图片横向组成，我们通过动态改变图片的位置，实现动画效果–><style> body { margin: 0; padding: 0; background-color: #F7F7F7; } .logo { width: 270px; height: 129px; margin: 100px auto; background-image: url(./baidu.png); background-position: 0 0; }</style><div class=“logo”></div><script> var logo = document.querySelector(’.logo’); var offset = -270; var n = 0; setInterval(function () { n++; logo.style.backgroundPosition = offset * n + ‘px 0px’; if(n >= 64) n = 0; },100);</script>效果图：这里不做详细了解，主要是为了区分与补间动画的区别。8.2 补间动画自动完成从起始状态到终止状态的的过渡。语法：transition当前元素只要有“属性”发生变化时，可以平滑的进行过渡，并不仅仅局限于hover状态。transition-property设置过渡属性/设置哪些属性要参加到动画效果中/transition-property: all;transition-duration设置动画过渡执行时间transition-duration: 2s;transition-timing-function设置过渡速度类型transition-timing-function:linear; / ease| ease-in | ease-out | ease-in-out | linear; /transition-delay设置过渡延时/1s后，过渡动画开始过渡/transition-delay: 1s;连写：/ 属性 执行时间 延时时间 过渡类型*/transition: all 2s 1s linear;示例代码：<style type=“text/css”> .box { width: 250px; height: 250px; background-color: pink; margin: 100px auto; transition: all 2s 1s linear; } .box:hover { width: 200px; height: 200px; border-radius:50%; background-color: rgb(25, 221, 247); }</style><div class=“box”></div>效果图：我们可以看到，触发hover事件的时候延迟1s后开始执行动画。示例代码：过渡的实际应用<style type=“text/css”> html,body { margin: 0; padding: 0; width: 100%; height: 100%; } .box { width: 100%; height: 100%; background-color: #eee; } .l_box { float: left; width: 234px; height: 300px; margin: 100px 50px; cursor: pointer; transition: all 0.5s linear; } .l_box:hover { box-shadow: -2px -2px 20px #777; margin-top: 90px; } .r_box { width: 234px; height: 300px; float: left; margin: 100px 0px; background-color: #fff; text-align: center; position: relative; } .cover { position: absolute; bottom: 0; height: 0px; width: 234px; background-color: orange; transition: all 1s linear; } .r_box:hover .cover { height: 100px; }</style><div class=“box”> <div class=“l_box”> <img src=“img/1.jpg” alt=""> </div> <div class=“r_box”> <img src=“img/2.jpg” alt=""> <div class=“cover”></div> </div></div>效果图：9. 2D转换转换（transform）是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。9.1 位移CSS3中，通过translate属性对元素进行位移。移动translate(x, y)可以改变元素的位置，x、y可为负值；a、移动位置相当于自身原来位置b、y轴正方向朝下c、除了可以像素值，也可以是百分比，相对于自身的宽度或高度transform: translate(100px, 30px);示例代码<style type=“text/css”> .line { height: 200px; background-color: pink; } .box { width: 100px; height: 100px; background-color: rgb(30, 230, 245); transition: all 1s linear; } .line:hover .box { /* 位移 / transform: translate(100px, 30px); }</style><div class=“line”> <div class=“box”></div></div>效果图：我们可以看到，鼠标移上去之后，蓝色盒子，分别向左和向下移动了一段距离。9.2 缩放缩放scale(x, y)可以对元素进行水平和垂直方向的缩放，x、y的取值可为小数；/宽和高都放大1倍/transform: scale(1.5);示例代码：<style type=“text/css”> .box { width: 200px; height: 200px; background-color: pink; margin: 50px auto; transition: all 2s linear; } .box:hover { / 缩放 / transform: scale(0.5); }</style><div class=“box”></div>效果图：9.3 旋转旋转rotate(deg)可以对元素进行旋转，正值为顺时针，负值为逆时针；a、当元素旋转以后，坐标轴也跟着发生的转变b、调整顺序可以解决，把旋转放到最后/ 顺时针旋转 90度 /transform: rotate(90deg);示例代码：<style type=“text/css”> .box { width: 200px; height: 200px; background-color: #0df3cd; margin: 100px auto; transition: all 2s linear; } .box:hover { transform: rotate(-90deg); }</style><div class=“box”></div>效果图：旋转原点：默认情况下，旋转是按照元素的中心点旋转的，但是我们可以手动设置元素旋转的中心点。transform-origin: 30px 40px;示例代码：<style type=“text/css”> .box { width: 150px; height: 150px; background-color: cyan; margin: 100px auto; transition: all 1s linear; / 设置旋转原点位置 / / transform-origin: left top; / transform-origin: 30px 40px; } .box:hover { transform: rotate(90deg); }</style><div class=“box”></div>效果图：示例代码：扑克牌<style type=“text/css”> * { margin: 0; padding: 0; } .box { width: 310px; height: 438px; border: 1px solid #ccc; margin: 50px auto; position: relative; } .box img { position: absolute; transform-origin:bottom; transition: all 2s linear; } .box:hover img:nth-child(1) { transform: rotate(10deg); } .box:hover img:nth-child(2) { transform: rotate(20deg); } .box:hover img:nth-child(3) { transform: rotate(30deg); } .box:hover img:nth-child(4) { transform: rotate(40deg); } .box:hover img:nth-child(5) { transform: rotate(50deg); } .box:hover img:nth-child(6) { transform: rotate(60deg); }</style><div class=“box”> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""> <img src=“img/pk1.png” alt=""></div>效果图：9.4 倾斜倾斜skew(deg, deg)可以使元素按一定的角度进行倾斜，可为负值，第二个参数不写默认为0。transform: skew(30deg,30deg);示例代码：<style type=“text/css”> .box { width: 150px; height: 150px; background-color: cyan; margin: 100px auto; transition: all 2s linear; } .box:hover { / 倾斜 / transform: skew(30deg, 30deg); }</style><div class=“box”></div>效果图：9.5 矩阵矩阵matrix()把所有的2D转换组合到一起，需要6个参数。transform-origin可以调整元素转换的原点，但是对于transform: translate(x，y)没有影响。我们可以同时使用多个转换，其格式为：transform: translate() rotate() scale() …等，其顺序会影转换的效果。详细可参见10. 3D 转换10.1 3D 坐标轴用X、Y、Z分别表示空间的3个维度，三条轴互相垂直。如下图：网格状的正方形，可以想象成是我们的电脑桌面2D平面。在 3D 转换中，前面 2D 转换的属性在这都可以使用：位移transform:translate(100px,100px,100px);旋转transform:rotate(30deg,30deg,30deg);缩放transform:scale(2,0.5,0.5);倾斜transform:skew(30deg,30deg,30deg);在3D转换中，一定要加上一个透视属性，才能在电脑2D平面中显示出3D的效果，透视属性请看下章。10.2 透视（perspective）电脑显示屏是一个2D平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。perspective通过透视产生的3D效果，只是视觉呈现而已，并不是真正的3d立体的盒子；就是近大远小的效果。透视的概念其实很简单，就是“近大远小”。举个例子：在2D转换的时候，我们知道一个translate属性，他分别可以设置向左向右或者向上向下平移，但是却不能向里面或外面平移。<style> .box{ width: 550px; height: 150px; margin: 100px auto; padding: 6px; border: 1px dashed #ccc; } .box li{ float: left; width: 150px; height: 150px; padding: 0; list-style: none; margin-right: 50px; transition: all 0.5s linear; } .box li:first-child{ background: salmon; } .box li:nth-child(2){ background: deepskyblue; } .box li:last-child{ background: khaki; margin-right: 0px; } / 第一个盒子向X轴的负方向移动100px / .box li:first-child:hover{ transform: translateX(-100px); } / 第二个盒子向Y轴的正方向移动100px / .box li:nth-child(2):hover{ transform: translateY(100px); } / 第三个盒子Z轴的负方向移动100px / .box li:last-child:hover{ transform: translateZ(-100px); }</style><ul class=“box”> <li></li> <li></li> <li></li></ul>效果图：没有加透视属性的时候，因为z轴是垂直电脑平面射出来的，translateZ是看不出效果的。如何设置透视属性？给当前元素的直接父元素添加perspective: 800px;透视属性，注意这个值可以是随意的，但是最佳展现距离是600px~1000px。<style> .box{ width: 550px; height: 150px; margin: 100px auto; padding: 6px; border: 1px dashed #ccc; / 给变换的 li 的直接父元素 ul 添加透视属性 perspective / perspective: 800px; } .box li{ float: left; width: 150px; height: 150px; padding: 0; list-style: none; margin-right: 50px; transition: all 0.5s linear; } .box li:first-child{ background: salmon; } .box li:nth-child(2){ background: deepskyblue; } .box li:last-child{ background: khaki; margin-right: 0px; } / 第一个盒子向X轴的负方向移动100px / .box li:first-child:hover{ transform: translateX(-100px); } / 第二个盒子向Y轴的正方向移动100px / .box li:nth-child(2):hover{ transform: translateY(100px); } / 第三个盒子Z轴的负方向移动100px / .box li:last-child:hover{ transform: translateZ(-100px); }</style><ul class=“box”> <li></li> <li></li> <li></li></ul>效果图：如图所示，在ul加上透视属性后，第三个盒子向着z轴的负方向移动了100px。透视可以将一个2D平面，在转换的过程当中，呈现3D效果。（没有perspective，便“没有”Z轴）并非任何情况下都需要透视效果。10.3 3D呈现（transform-style）什么是3D呈现呢？不要与前面的透视搞混，透视只能使一个物体呈现近大远小的状态，不能呈现出一个立体感的东西，比如我在页面上用六个面组成一个正方形，通过透视你可能只能改变他的远近距离，并不能让他看起来像个立体的盒子，所以这里需要用到另一个属性：transform-style。transform-style: preserve-3d | flatflat：所有子元素在2D平面呈现preserve-3d：保留3D空间必须设置在父元素身上并且父元素有转换（就是有变形）并且子元素也得有转换（变形）才能看得到效果。1、示例代码：正方体<style type=“text/css”> * { margin: 0; padding: 0; } .box { width: 200px; height: 200px; margin: 150px auto; position: relative; / 透视 / / perspective: 1000px; / / 转为立方体 / transform-style: preserve-3d; transform: rotateY(45deg) rotateX(30deg); } .box>div { position: absolute; width: 100%; height: 100%; } .left { background-color: pink; transform: rotateY(-90deg) translateZ(150px); } .right { background-color: green; transform: rotateY(90deg) translateZ(150px); } .top { background-color: orange; transform: rotateX(90deg) translateZ(150px); } .bottom { background-color: blue; transform: rotateX(-90deg) translateZ(150px); } .before { background-color: red; transform: translateZ(150px); } .back { background-color: greenyellow; transform: translateZ(-150px); }</style><div class=“box”> <div class=“left”></div> <div class=“right”></div> <div class=“top”></div> <div class=“bottom”></div> <div class=“before”></div> <div class=“back”></div></div>效果图：2、示例代码：3D 导航<style type=“text/css”> * { margin: 0; padding: 0; list-style: none; } nav { width: 600px; height: 60px; line-height: 60px; margin: 200px auto; } li { height: 60px; width: 150px; float: left; position: relative; transform-style: preserve-3d; transition: all 0.5s ease-in; } span { position: absolute; width: 150px; height: 60px; display: block; color: #fff; text-align: center; } span:first-child{ background-color: #ff287a; transform: rotateX(90deg) translateZ(30px); } span:last-child{ transform: translateZ(30px); background-color: #00bdab; } li:hover { transform: rotateX(-90deg); }</style><nav> <ul> <li> <span>Home</span> <span>主页</span> </li> <li> <span>Menu</span> <span>菜单</span> </li> <li> <span>Admin</span> <span>管理</span> </li> <li> <span>About</span> <span>关于我们</span> </li> </ul></nav>效果图：10.4 3D呈现案例：3D轮播图1、普通版 3D 轮播图实现思路：通过CSS3中transform-style: preserve-3d的概念，将视图设置成3D展示模式；四张图片，分别设置其绕着X轴旋转的角度，分别对应四个立体面；将旋转好的图片沿着Z轴平移盒子宽度的一半；定义一个全局变量num，用来记录按钮点击的次数，当当按动按钮的时候，让ul旋转num90°；示例代码：<style> * { padding: 0; margin: 0; list-style-type: none; } .box { width: 960px; height: 540px; /* border: 5px solid #999; / margin: 150px auto; } .box ul { width: 960px; height: 540px; position: relative; transform-style: preserve-3d; transition: transform .6s; } .box ul li { width: 100%; height: 100%; position: absolute; left: 0; top: 0; } img { width: 100%; height: 100%; } .box ul li:nth-child(1) { transform: rotateX(90deg) translateZ(270px); } .box ul li:nth-child(2) { transform: rotateX(-90deg) translateZ(270px); } .box ul li:nth-child(3) { transform: rotateX(180deg) translateZ(270px); } .box ul li:nth-child(4) { transform: translateZ(270px); } .btn { width: 1080px; margin: 0 auto; position: relative; height: 0px; top: -470px; } .btn button { width: 40px; height: 80px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); border: none; outline: none; font: 900 24px/80px ‘宋体’; color: #fff; } .btn button:frist-child { float: left; } .btn button:last-child { / border-radius: 0 10px 10px 0; / float: right; }</style><div class=“box”> <ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li> </ul></div><div class=“btn”> <button>&lt;</button> <button>&gt;</button></div><script type=“text/javascript”> var btn = document.querySelectorAll(‘button’); var box = document.querySelector(’.box’); var _ul = box.querySelector(‘ul’); var num = 0; // btn 获取到的是一个伪数组 btn[1].onclick = function () { num++; _ul.style.transform = ‘rotateX(’ + num * 90 + ‘deg)’ } btn[0].onclick = function () { num–; _ul.style.transform = ‘rotateX(’ + num * 90 + ‘deg)’; }</script>效果图：2、切割版 3D 轮播图实现思路：结构上将之前定义好的ul重复四次；设定延时，整个动画执行时间是0.8s，设定每一个ul延迟执行0.2s，即第一个延时0s，第二个延时0.2s，第三个延时0.4s，第四个延时0.6s；其余步骤同上，着重强调的是，相对于上面的案例，本案例给按钮加了限制，监听第一次所有的ul旋转结束之后，按钮才能再一次被点击。示例代码：<style> * { padding: 0; margin: 0; list-style-type: none; } .box { width: 960px; height: 540px; margin: 150px auto; display: flex; } .box ul { width: 960px; height: 540px; position: relative; transform-style: preserve-3d; transition: transform .8s; } .box ul li { width: 100%; height: 100%; position: absolute; left: 0; top: 0; overflow: hidden; } img { width: 960px; height: 540px; } / 设定延时 / .box ul:nth-child(1) { transition-delay:0s; } .box ul:nth-child(2) { transition-delay:.2s; } .box ul:nth-child(3) { transition-delay:.4s; } .box ul:nth-child(4) { transition-delay:.6s; } / 拼凑图片 / .box ul:nth-child(2) img { margin-left: -240px; } .box ul:nth-child(3) img { margin-left: -480px; } .box ul:nth-child(4) img { margin-left: -720px; } .box ul li:nth-child(1) { transform: rotateX(90deg) translateZ(270px); } .box ul li:nth-child(2) { transform: rotateX(-90deg) translateZ(270px); } .box ul li:nth-child(3) { transform: rotateX(180deg) translateZ(270px); } .box ul li:nth-child(4) { transform: translateZ(270px); } .btn { width: 1080px; margin: 0 auto; position: relative; height: 0px; top: -470px; } .btn button { width: 40px; height: 80px; border-radius: 10px; background: rgba(0, 0, 0, 0.2); border: none; outline: none; font: 900 24px/80px ‘宋体’; color: #fff; } .btn button:frist-child { float: left; } .btn button:last-child { / border-radius: 0 10px 10px 0; */ float: right; }</style><div class=“box”><ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li></ul><ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li></ul><ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li></ul><ul> <li><img src="./imgs/1.jpg" alt=""></li> <li><img src="./imgs/2.jpg" alt=""></li> <li><img src="./imgs/3.jpg" alt=""></li> <li><img src="./imgs/4.jpg" alt=""></li></ul></div><div class=“btn”><button>&lt;</button><button>&gt;</button></div><script type=“text/javascript”> var btn = document.querySelectorAll(‘button’); var box = document.querySelector(’.box’); var _ul = box.querySelectorAll(‘ul’); var num = 0; var flag = true; // btn 获取到的是一个伪数组 btn[1].onclick = function () { if (flag) { flag = false; num++; for (var i = 0; i < _ul.length; i++) { _ul[i].style.transform = ‘rotateX(’ + num * 90 + ‘deg)’; } // 监听最后一个transition事件结束的时候 将flag 置为 true 防止重复点击 _ul[_ul.length - 1].addEventListener(’transitionend’, function () { flag = true; }) } } btn[0].onclick = function () { if (flag) { flag = false; num–; for (var i = 0; i < _ul.length; i++) { _ul[i].style.transform = ‘rotateX(’ + num * 90 + ‘deg)’; } _ul[_ul.length - 1].addEventListener(’transitionend’, function () { flag = true; }) } }</script>效果图：10.5 backface-visibilitybackface-visibility属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到其背面时，该属性很有用。有两个属性：1、visible背面是可见的2、hidden背面是不可见的 ...