过渡和自定义属性课件04css3

1、潭州教育-前端开发-15期过渡-自定义动画主讲人：追梦 01CSS3 01 HTML5+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;斜线左边是水平方向 / 斜线右边是垂直方向CSS3 01 HTML5+CSS3二、文本属性1.white-space: 空格/缩进/换行的

2、处理方式 normal 默认 忽略多个空格/缩进/换行只留一个nowrap 控制文本不换行pre 空白/缩进/换行 会被浏览器保留pre-line 合并空白/缩进 保留换行符pre-wrap 保留空白/缩进 正常换行2.Word-wrap:break-word 与 word-break:break-all CSS3 01 HTML5+CSS33.文本从右向左显示：direction:rtl; /ltr rtlunicode-bidi:bidi-override;CSS3 01 HTML5+CSS34.文本超出显示省略号前端只是一个效果单行超出显示省略号： 低版本 ie不兼容white-spac

3、e:nowrap; /*文本不换行*/overflow:hidden; /*超出隐藏*/text-overflow:ellipsis; /*显示省略号*/CSS3 01 HTML5+CSS35.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);

4、text-shadow:0 0 20px blue;元素阴影box-shadow:inset x y 模糊度 尺寸 颜色CSS3 01 HTML5+CSS36.文字描边、文字填充text-stroke:/*宽 颜色*/ 描边 加兼容前缀text-fill-width:/*宽度*/text-fill-color:/*颜色*/ 填充色霓虹灯：text-shadow:0px 0px 10px #f3c,0px 0px 20px #f39,0px 0px 40px #f33,0px 0px 60px #f30;-webkit-text-stroke:1px #ff00ff;CSS3 01 HTML5+

5、CSS37.文字大小写 text-transform:none：默认值 无转换 capitalize：将每个单词的第一个字母转换成大写 uppercase：转换成大写 lowercase：转换成小写CSS3 01 HTML5+CSS3三、过渡1.transition: property duration delay timing-function; 可以缺省transition-property:过渡属性的名称none 没有过渡属性all 所有属性都过渡(默认值)property 具体属性名称(property1,property2.)transition-duration:过渡属性花费的时间

6、秒/毫秒transition-delay:过渡效果延迟时间秒/毫秒transition-timing-function:过渡效果速度曲线 运动形式linear / 规定以相同速度开始至结束的过渡效果ease / 规定慢速开始，然后变快，然后慢速结束的过渡效果ease-in / 规定以慢速开始的过渡效果ease-out / 规定以慢速结束的过渡效果ease-in-out 规定以慢速开始和结束的过渡效果CSS3 01 HTML5+CSS32.过渡完成事件：Webkit内核： obj.addEventListener(webkitTransitionEnd,function();标准: obj.ad

7、dEventListener(transitionend,function();CSS3 01 HTML5+CSS3四、动画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-

8、out / ease-in-outanimation-iteration-count: 动画执行次数次数数值 / infinite无限重复animation-direction:动画执行方向normal正常/alternate 动画轮流反向播放CSS3 01 HTML5+CSS3animation-play-state:动画执行状态paused 暂停动画 / running 运行动画animation-fill-mode:动画执行过程效果是否可见none 不改变（默认） forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）CSS3 01 HTML5+CSS3keyfra

9、mes:规定动画keyframes animationname keyframes-selector css-styles;animationname 定义动画的名称。keyframes-selector 动画时长的百分比。0-100%from（与 0% 相同）to（与 100% 相同）可以只有tocss-styles 一个或多个合法的 CSS 样式属性。CSS3 01 HTML5+CSS3动画事件：动画开始触发：obj.addEventListener(webkitAnimationStart, fn);obj.addEventListener(animationstart, fn);动画执行过程中触发：obj.addEventListener(webkitAnimationIteration, fn);obj.addE