随笔档案「2016年8月」 - gulan123

设置动画时间外属性

摘要：animation-fill-mode属性定义在动画开始之前和结束之后发生的操作。主要具有四个属性值：none、forwards、backwords和both。其四个属性值对应效果如下：属性值效果 none 默认值，表示动画将按预期进行和结束，在动画完成其最后一帧时，动画会反转到初始帧处 for 阅读全文

posted @ 2016-08-30 11:26 gulan123 阅读(181) 评论(0) 推荐(0)

设置动画的播放状态

摘要：animation-play-state属性主要用来控制元素动画的播放状态。参数：其主要有两个值：running和paused。其中running是其默认值，主要作用就是类似于音乐播放器一样，可以通过paused将正在播放的动画停下来，也可以通过running将暂停的动画重新播放，这里的重新阅读全文

posted @ 2016-08-30 11:23 gulan123 阅读(180) 评论(0) 推荐(0)

设置动画播放方向

摘要：animation-direction属性主要用来设置动画播放方向，其语法规则如下： animation-direction:normal | alternate [, normal | alternate]* 其主要有两个值：normal、alternate 1、normal是默认值，如果设置为n 阅读全文

posted @ 2016-08-30 11:19 gulan123 阅读(246) 评论(0) 推荐(0)

设置动画播放次数

摘要：animation-iteration-count属性主要用来定义动画的播放次数。语法规则： animation-iteration-count: infinite | <number> [, infinite | <number>]* 1、其值通常为整数，但也可以使用带有小数的数字，其默认值为1 阅读全文

posted @ 2016-08-30 11:16 gulan123 阅读(338) 评论(0) 推荐(0)

设置动画开始播放的时间

摘要：animation-delay属性用来定义动画开始播放的时间，用来触发动画播放的时间点。和transition-delay属性一样，用于定义在浏览器开始执行动画之前等待的时间。语法规则： animation-delay:<time>[,<time>]* 案例演示：浏览器渲染样式之后2S之后触发m 阅读全文

posted @ 2016-08-30 11:15 gulan123 阅读(457) 评论(0) 推荐(0)

设置动画播放方式

摘要：animation-timing-function属性主要用来设置动画播放方式。主要让元素根据时间的推进来改变属性值的变换速率，简单点说就是动画的播放方式。语法规则： animation-timing-function:ease | linear | ease-in | ease-out | ea 阅读全文

posted @ 2016-08-30 10:57 gulan123 阅读(253) 评论(0) 推荐(0)

设置动画播放时间

摘要：animation-duration主要用来设置CSS3动画播放时间，其使用方法和transition-duration类似，是用来指定元素播放动画所持续的时间长，也就是完成从0%到100%一次动画所需时间。单位：S秒语法规则 animation-duration: <time>[,<time>] 阅读全文

posted @ 2016-08-30 10:53 gulan123 阅读(386) 评论(0) 推荐(0)

调用动画

摘要：animation-name属性主要是用来调用 @keyframes 定义好的动画。需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写），如果不一致将不具有任何动画效果。语法： animation-name: none | I 阅读全文

posted @ 2016-08-30 10:49 gulan123 阅读(214) 评论(0) 推荐(0)

Keyframes介绍

摘要：Keyframes被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。在一个“@keyframes”中的样式规则可以由多个百分比构成的，如在“0%”到“100%”之间创建更多个阅读全文

posted @ 2016-08-30 10:00 gulan123 阅读(1081) 评论(0) 推荐(0)

动画--过渡延迟时间 transition-delay

摘要：transition-delay属性和transition-duration属性极其类似，不同的是transition-duration是用来设置过渡动画的持续时间，而transition-delay主要用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行。有时我们想改变两个阅读全文

posted @ 2016-08-30 09:55 gulan123 阅读(419) 评论(0) 推荐(0)

动画--过渡函数 transition-timing-function

摘要：transition-timing-function属性指的是过渡的“缓动函数”。主要用来指定浏览器的过渡速度，以及过渡期间的操作进展情况，其中要包括以下几种函数： (单击图片可放大) 案例展示：在hover状态下，让容器从一个正方形慢慢过渡到一个圆形，而整个过渡是先加速再减速，也就是运用ease 阅读全文

posted @ 2016-08-30 09:52 gulan123 阅读(393) 评论(0) 推荐(0)

动画--过渡所需时间 transition-duration

摘要：transition-duration属性主要用来设置一个属性过渡到另一个属性所需的时间，也就是从旧属性过渡到新属性花费的时间长度，俗称持续时间。案例演示：在鼠标悬停（hover）状态下，让容器从直角慢慢过渡到圆角，并让整个动画持续0.5s。 HTML: CSS: 演示结果：鼠标移入鼠标移出阅读全文

posted @ 2016-08-30 09:49 gulan123 阅读(238) 评论(0) 推荐(0)

动画--过渡属性 transition-property

摘要：早期在Web中要实现动画效果，都是依赖于JavaScript或Flash来完成。但在CSS3中新增加了一个新的模块transition，它可以通过一些简单的CSS事件来触发元素的外观变化，让效果显得更加细腻。简单点说，就是通过鼠标的单击、获得焦点，被点击或对元素任何改变中触发，并平滑地以动画效果改变阅读全文

posted @ 2016-08-30 09:40 gulan123 阅读(303) 评论(0) 推荐(0)

变形--原点 transform-origin

摘要：任何一个元素都有一个中心点，默认情况之下，其中心点是居于元素X轴和Y轴的50%处。如下图所示：在没有重置transform-origin改变元素原点位置的情况下，CSS变形进行的旋转、位移、缩放，扭曲等操作都是以元素自己中心位置进行变形。但很多时候，我们可以通过transform-origin来对阅读全文

posted @ 2016-08-29 18:08 gulan123 阅读(202) 评论(0) 推荐(0)

变形--矩阵 matrix()

摘要：matrix() 是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵，我在这里只是简单的说一下CSS3中的transform有这么一个属阅读全文

posted @ 2016-08-29 18:07 gulan123 阅读(477) 评论(0) 推荐(0)

变形--位移 translate()

摘要：translate()函数可以将元素向指定的方向移动，类似于position中的relative。或以简单的理解为，使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。 translate我们分为三种情况： 1、translate(x,y)水平方向和垂直阅读全文

posted @ 2016-08-29 18:05 gulan123 阅读(305) 评论(0) 推荐(0)

变形--缩放 scale()

摘要：缩放 scale()函数让元素根据中心原点对对象进行缩放。缩放 scale 具有三种情况： 1、 scale(X,Y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）例如： div:hover { -webkit-transform: scale(1.5,0.5); -moz-tr 阅读全文

posted @ 2016-08-29 18:04 gulan123 阅读(666) 评论(0) 推荐(0)

变形--扭曲 skew()

摘要：变形--扭曲 skew() 扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状。 Skew()具有三种情况： 1 阅读全文

posted @ 2016-08-29 18:02 gulan123 阅读(621) 评论(0) 推荐(0)

变形--旋转 rotate()

摘要：旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转。如下图所示： HTML代码： <div class="wrapper"> <d 阅读全文

posted @ 2016-08-29 17:58 gulan123 阅读(686) 评论(0) 推荐(0)

Css3中的变形与动画

摘要：新的转换属性下面的表格列出了所有的转换属性： 2D Transform 方法 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。 translateX(n) 定义 2D 转换，沿着 X 轴移动阅读全文

posted @ 2016-08-29 17:57 gulan123 阅读(177) 评论(0) 推荐(0)

关于伪类元素:before和:after

摘要：:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素，最基本的用法如下：这段代码会在#example元素内容之前插入一个'#'，以及在内容之后添加一个'$'，插入的行内元素是作为#example的子元素，效果如下: H 阅读全文

posted @ 2016-08-29 16:43 gulan123 阅读(431) 评论(0) 推荐(0)

css3选择器（下）

摘要：1、:enabled选择器在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。示例演示通过“:enabl 阅读全文

posted @ 2016-08-29 15:09 gulan123 阅读(203) 评论(0) 推荐(0)

css3：与背景的相关样式

摘要：1、 (1)background-origin ： border-box | padding-box | content-box;（设置元素背景图片的原始起始位置。） //需要注意的是，如果背景不是no-repeat，这个属性无效，它会从边框开始显示。 (2)background-clip(用来将背阅读全文

posted @ 2016-08-29 12:01 gulan123 阅读(163) 评论(0) 推荐(0)

css3选择器（上）

摘要：1、给导航加分割线，左右 .nav li::before,.nav li::after{ content:""; position:absolute; top:14px; height:25px; width:1px; } .nav li::before{ left:0; background:-w 阅读全文

posted @ 2016-08-29 11:59 gulan123 阅读(318) 评论(0) 推荐(0)

css3文字与字体

摘要：恢复内容开始 1、text-overflow（用来设置是否使用省略标记）必须和white-space:nowrap 同时使用white-space:nowrap(强制文本在一行显示) word-wrap（设置在长单词或URL地址内部进行换行） 2、@font-face能够加载服务器端的字体文件，让浏阅读全文

posted @ 2016-08-29 10:56 gulan123 阅读(143) 评论(0) 推荐(0)