响应式开发第7讲,主要内容.docx

《响应式开发第7讲,主要内容.docx》由会员分享，可在线阅读，更多相关《响应式开发第7讲,主要内容.docx（5页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、响应式开发第7讲,主要内容回顾：1.渐变：线性、径向渐变 （-webkit-linear-gradient(),-webkit-radiul-gradient()）2.变形:transform:ratate(),skew()等 3、tranform-origin 定义元素变形的点，默认以中心位置。4、animation:动画 复合语法： animation: namedurationtime-function delay-webkit-animation-name: skyset; -webkit-animation-duration: 2000ms; -webkit-animation-it

2、eration-count: infinite; /*无限循环*/ -webkit-animation-timing-function: linear; 可以写成： Animation:skyset2s inifinite linear; keyframes 规则来创建动画,设置多个关键帧。语法：keyframes animation_name选择器CSS 规则; /*该选择器指定当前关键帧要应用到整个动画过程中的位置值是一个百分比。%0 表示动画起先*/ 动画是使元素从一种样式渐渐改变为另一种样式的效果。您可以变更随意多的样式随意多的次数。请用百分比来规定改变发生的时间，或用关键词 from

3、 和 to，等同于 0% 和 100%。0% 是动画的起先，100% 是动画的完成。为了得到最佳的阅读器支持，您应当始终定义 0% 和 100% 选择器。例 1：keyframes myfirst 0% background:red; 25%background:yellow; 50%background:blue; 100% background:green; /*可以通过 left，top 等属性值，修改位置*/ 例 2：.box2width:400px; margin:0 auto; animation:rotate 5s ease-in infinite;imgwidth:100%;d

4、isplay:block; keyframes rotate0%transform:rotate(0deg);100%transform:rotate(360deg);案例：晃动的桃子 .act_wrapperposition:relative;z-index:1; min-width:1000px; margin:0 auto;pposition:absolute;left:250px;top:80px;z-index:1;font-size:36px;font-family:MS Serif, New York, serif;.act_wrapper .act_bgbackground:u

5、rl(images/bg.jpg) no-repeat;position:absolute;top:0;width:1146px;height:631px; /* margin:0 auto;*/margin-left:-80px; .peachposition:absolute; top:0;left:0;width:90px;height:100px;display:block;background:url(images/peach.png) no-repeat 0 0;z-index:1;.peach1position:relative;top:325px;left:420px;.peach2position:relative;top:90px;left:450px;.shake1,.shake2animation:shake 1s linear infinite alternate; keyframes shakefromtransform:rotate(10deg);transform-origin:50% 0;totransform:rotate(0);transform-origin:50% 0;