web前端 > web前端
web前端web前端

css3效果过渡-自定义动画

一、边框圆角

border-radius:上 右 下 左; //取值和margin风格类似
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
20px 30px 40px 50px/40px 50px 60px 70px;
斜线左边是水平方向 / 斜线右边是垂直方向

二、文本属性

1.white-space: 换行的处理方式

nowrap 控制文本不换行

2.Word-wrap:break-word 与 word-break:break-all 

3.文本从右向左显示:
direction:rtl;   //ltr rtl
unicode-bidi:bidi-override;

4.文本超出显示省略号
前端只是一个效果

单行超出显示省略号:  低版本 ie不兼容
white-space:nowrap; /*文本不换行*/
overflow:hidden; /*超出隐藏*/
text-overflow:ellipsis; /*显示省略号*/

5.text-shadow: 文字阴影
参数:x方向偏移 y方向偏移 模糊度 颜色
浮雕例子color:#fff;text-shadow:2px 2px 4px #000;
立体字color:#fff;
text-shadow:0 1px 0 #ccc,0 2px 0 #9c9c9c,0 3px 0 #bbb,0 4px 0 #9b9b9b,0 5px 0 #aaa;
模糊字color:rgba(0,0,0,0); text-shadow:0 0 20px blue;
元素阴影
box-shadow:inset x y 模糊度 尺寸 颜色

6.文字描边、文字填充
text-stroke:/*宽 颜色*/ 描边 加兼容前缀
霓虹灯:text-shadow:0px 0px 10px #f3c,0px 0px 20px #f39,0px 0px 40px #f33,0px 0px 60px #f30;-webkit-text-stroke:1px #ff00ff;

7.文字大小写 text-transform:
  none:  默认值 无转换
  capitalize:将每个单词的第一个字母转换成大写
  uppercase:  转换成大写
  lowercase:  转换成小写

三、过渡

1.transition: property duration delay timing-function; 可以缺省
transition-property:过渡属性的名称
none   没有过渡属性
all        所有属性都过渡(默认值)
property    具体属性名称(property1,property2...)
transition-duration:过渡属性花费的时间
  秒/毫秒
transition-delay:过渡效果延迟时间
  秒/毫秒
transition-timing-function:过渡效果速度曲线 运动形式
linear /  规定以相同速度开始至结束的过渡效果
ease /  规定慢速开始,然后变快,然后慢速结束的过渡效果
ease-in / 规定以慢速开始的过渡效果
ease-out / 规定以慢速结束的过渡效果
ease-in-out  规定以慢速开始和结束的过渡效果

2.过渡完成事件:

Webkit内核:

obj.addEventListener('webkitTransitionEnd',function(){});

标准:  obj.addEventListener('transitionend',function(){});


四、动画

1.animation: name duration delay timing-function iteration-count direction;
  animation-name: 动画名称
  keyframename  自定义的名字
  none  无动画效果
  animation-duration: 动画执行时间
  animation-delay:动画效果延迟时间
  animation-timing-function: 动画速度曲线
  linear / ease / ease-in / ease-out / ease-in-out
  animation-iteration-count: 动画执行次数
  次数数值 / infinite无限重复
  animation-direction:动画执行方向
  normal正常/alternate  动画轮流反向播放
animation-play-state:动画执行状态
  paused  暂停动画 / running  运行动画
  animation-fill-mode:动画执行过程效果是否可见
  none 不改变(默认)
  forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)
@keyframes:规定动画
  @keyframes animationname {keyframes-selector {css-styles;}}
  animationname 定义动画的名称。
  keyframes-selector 动画时长的百分比。
  0-100%
  from(与 0% 相同)
  to(与 100% 相同)
  可以只有to
  css-styles  一个或多个合法的 CSS 样式属性。
  动画事件:
  动画开始触发:
  obj.addEventListener("webkitAnimationStart", fn);
  obj.addEventListener("animationstart", fn);
  动画执行过程中触发:
  obj.addEventListener("webkitAnimationIteration", fn);
  obj.addEventListener("animationiteration", fn);
  动画结束触发:
  obj.addEventListener('webkitAnimationEnd',fn);
  obj.addEventListener('animationend',fn);

web前端ruitiancnweb前端z_vae@sina.com

web前端