transition

一、前言兼目录索引 《天龙八部》里的虚竹小和尚之前可以说是和尚的先进人物与代表模范，各类清规戒律谨记与严守。但是，后来呢，花姑娘送到跟前，什么戒律都成了浮云，禁不住诱惑享乐去了。啊，我现在似乎有类似的感觉，本来不打算深究CSS3的一些属性的，但是其效果以及实际应用价值之诱惑实在巨大，还是抵挡不住，折腾下了这篇文章。劳民伤财的工程越少越好，所以，这里干脆把CSS3 动画相关的几个属性凑合到一起了，这样，至少一年半载内不会再写相关的文章了。 CSS3动画相关的几个属性是：transition, transform, animation；我分别理解为过渡，变换，动画。虽意义相近，但具体角色不一。就像是SHE组合，虽然都是三个女生，都唱同一首歌，但有负责高音，和擅长低音的，具体工作于角色还是有差异的。//zxx:貌似那个谁谁烧伤了，真是不幸~~ transition指过渡啦，就是从a点都b点，就像过江坐渡轮，是有时间的，是连续的，一般针对常规CSS属性；transform指变换，就那几个固定的属性：旋转啦，缩放啦，偏移啦什么的，与独立于远房亲戚transition使用，但是，效果就是很干涩机械的旋转移动。要是配合transition属性，旋转啊什么的，就会很平滑。animation最先安家于Safari浏览器，自成一家，与transition和transform有老死不相往来之感

给平淡的站点带来活力 hover效果能给网页增加一些动态效果，并且使得站点更具有活力。原来的做法是使用javascript来实现这些动态效果，但是随着CSS3的引入和现代浏览器的支持，我们可以用纯粹的CSS代码来实现这些有趣的效果。所谓的现代浏览器，更多的是指以Mozilla和Webkit为核心的浏览器，IE的表现稍微差强人意，所以请使用FireFox，Safari或者Chrome查看一下的效果。如下就是要介绍的5个非常酷的纯CSS hover 效果。 向上跳跃 这种效果非常适合于当页面上有一横排图片的场景，当鼠标hover时就产生波浪一样的效果。 这个效果实现是非常简单的，并且有多种方法实现，如下的核心实现方法是：初始给所有图片设置mergin，当hover时，给相应的图片减少mergin的值，这样就实现了向上跳跃的效果。 这种效果不光可以应用于图片，一般的横向排列的导航栏也可以应用这样的效果。 效果中的透明效果是并不是必须的，不设置透明属性并不影响hover时的跳跃效果，加上透明只是为了让效果更平滑。 CSS代码： .ex1 img{ border: 5px solid #ccc; float: left; margin: 15px; -webkit-transition: margin 0.5s ease-out; -moz-transition: margin 0.5s

vue 饿了么项目 1.图标字体引用 链接 2.scss 二三倍图切换 1像素边框 链接 3.better-scroll 4.布局 商品主页面 <div id="app"> <v-header :seller='seller'></v-header> <div class="tab"> <div class="tab-item"> <router-link to="/goods">商品</router-link> </div> <div class="tab-item"> <router-link to="/ratings">评价</router-link> </div> <div class="tab-item"> <router-link to="/seller">商家</router-link> </div> </div> <keep-alive> <router-view :seller='seller'></router-view> </keep-alive> </div> 主页面包含头部，三个tab菜单切换。头部在页面切换时通用。每个菜单下router-view都有通用商家信息，通过props动态传入seller数据给各个子组件。 <router-view :seller='seller'></router-view> 1.header.vue组件 <template>

‍ Transform，变形： ‍ 首先，它的作用是变形， 它是静态的！ 它是静态的！ 它是静态的！重要的话说三遍！它就像普通的CSS width/height/color属性一样，让元素展现不同的style， 一旦元素被施上transform属性，就直接显示效果 。 只不过它能让元素的style更modern而已。它 包括旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix等功能，当然这些变形分2D跟3D。 既然是变形，总要基于一个基准坐标位置进行变换，2D有X-Y轴坐标，3D是X-Y-Z坐标，至于具体按照这些坐标上的那个空间点进行变化，则需要依赖 transform-origin ，它将作用在需要变形的Html元素上，告诉元素如果你要变化了，该围绕着那个基准点进行扭动，不然会摔得很惨。 参考： w3cplus CSS 2D 、 w3cplus CSS 3D 、 w3school CSS 2D ， w3school CSS 3D Transition，过渡： 首先，它的作用是过渡，是给上述的变形加上时间概念，让它在一段特定的时间里按照特定的速度进行变化（可以指定过渡依赖属性transition-property、过渡时间transition-duration、过渡速率transition-timing-function

1.-webkit-font-smoothing CSS3里面加入了一个“-webkit-font-smoothing”属性。这个属性可以使页面上的字体抗锯齿,使用后字体看起来会更清晰舒服。 none：文字的默认样式，可能会出现模糊的锯齿模样 antialiased：无锯齿，让文字变得清晰可见 2.transform transform的含义是：改变，使…变形；转换 transform的属性包括：rotate() / skew() / scale() / translate(,) ，分别还有x、y之分，比如：rotatex() 和 rotatey() ，以此类推。 下面我们来分解各个属性的用法： transform:rotate()： 含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。 transform:skew()： 含义：倾斜； transform:scale()： 含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。 transform:translate()： 含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。 3.transition transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点

先记住几个属性 transform:translate(x,y);//平移,x代表向又移动距离，y代表向下移动距离 transform:scale(x,y);//缩放，x代表水平缩放倍数，y代表垂直缩放倍数 transform:rotate(x);//旋转，x代表顺时针旋转多少度，如rotate(10deg) transform:skew(x,y);//倾斜，x\y分别代表沿x轴和y轴的倾斜 动画过渡 transition-property列出元素应该过渡的CSS属性，可过度属性包括背景、边框和方框模型属性。 transition-duration设置过渡持续时间 transition-timing-function设置过渡的速度，可用ease、linear、ease-in、ease-out或ease-in-out之一 transition-delay动画延时时间 缩写形式 #selector{transition:transform 0.2s ease} 值的顺序必须为以下顺序： transition-property transition-duration transition-function transition-delay 来源： oschina 链接： https://my.oschina.net/u/1417422/blog/616733

本篇文章主要讲述CSS3 transition规范和在不同浏览器之间的使用差异， 我要谈的是技术背景，主要讨论在使用CSS过渡的过程中所未预料到的问题。 结构 (HTML)，表现(CSS)，以及行为(JavaScript)相分离并不是什么新鲜的事情，然而 CSS 能跨越这个界限并且可以在短期内得到实际的应用，这还真的是一个完全不同的讨论话题。 几周前，我开发一个 JavaScript 模块，在能够使用 CSS 过渡的条件下，JavaScript 端又无法获取到实现过渡的方式。实际遇到的问题是这两者根本没有办法同步，经过多次的测试后，我只能放弃。而我的测试结果正是本文所讲述的。 首先，我们要说一下getcomputedstyle()，是一种用 JavaScript 返回浏览器渲染CSS的属性值的方法。 这个方法可以查看“ DOM Level 2: getComputedStyle() ”和“ CSS Level 2: Computed Values ”。 这对于像 font-size 这样的属性, 通过一个参数便可以转换为像素值。 但对于可以缩写的属性值，例如 margin ，一些浏览器则返回为空。再就是那些同一属性的不同属性值，例如 font-weight 的值 bold 和700。WebKit也有一个小bug，它会从伪对象中提取出属性值。