利用css3实现一个半月形的西瓜,利用queue实现吃西瓜的动画。练习例子

css3:

1、圆角

border-radius:100%;

border-top-left-radius:5px;

2、变形

  • 2D旋转:transform: rotate(25deg);(正角度为顺时针,负角度为逆时针)。
  • 3D旋转:transform: rotateX(25deg);-----效果为div的高度变小,90deg时高度为0。
  • 3D旋转:transform: rotateY(25deg);-----效果为div的宽度变小(左右border同时内缩),90deg时宽度为0。
  • 缩放:transform:scale(1,0.5);或transform:scaleX(1);或transform:scaleY(0.5);
  • 移动:transform:translate(20px,-10px);或transform:translateX(20px);或transform:translateY(-10px);
  • 倾斜:transform:skew(10deg,20deg);或transform:skewX(10deg);或transform:skewY(20deg);

3、动画

animation使用方法:

3.1、利用@keyframes定义动画效果:

@keyframes  animateName{
0% {(多个)css规则;}------必备,表示动画开始时的效果
30% {;}------非必备,表示经过了整个动画时间(一个周期)的3/10后的效果
100% {;}------必备(当只有0%和100%是可以用from和to代替),表示动画结束时的效果
}

3.2、在某节点上使用动画,同时定义动画的下列属性,如

div{animation:animateName 2s linear 1s 3;}

其中:

动画的速度曲线animation-timing-function(默认值为ease,常用的为linear)

如果要无限次执行动画,则定义

  • animation-iteration-count为"infinite"。
  • animation-direction的默认值为

"normal"表示正常播放动画,

"alternate"则表示轮流反向播放动画,即动画会在奇数次数(1、3、5 等等)正常播放,而在偶数次数(2、4、6 等等)向后播放。

  • animation-play-state可控制动画暂停paused或(继续)执行:running。
  • animation-fill-mode:表示动画在播放之前和之后,是否可见,默认值为

"none"表示动画播放结束后会回到初始状态,

"forwards"表示动画结束后保持在keyframes中最后一帧100%时的状态,

"backwards"表示在animation-delay的一段时间内,在动画播放之前,应用第一帧的状态,

"both"表示同时应用"forwards"和"backwards"。

练习实例:一个div在前一秒内,top由0到50px,后一秒内,选择一圈且下降到100px,同时慢慢变透明。

@keyframes down{
0% {opacity:;top:;}
50% {opacity:;top:50px;transform:rotate(0);}
100% {opacity:;top:100px;transform:rotate(360deg);}
}
@-webkit-keyframes down{
0% {opacity:;top:;}
50% {opacity:;top:50px;-webkit-transform:rotate(0);}
100% {opacity:;top:100px;-webkit-transform:rotate(360deg);}
}
@-moz-keyframes down{
0% {opacity:;top:;}
50% {opacity:;top:50px;-moz-transform:rotate(0);}
100% {opacity:;top:100px;-moz-transform:rotate(360deg);}
}
@-o-keyframes down{
0% {opacity:;top:;}
50% {opacity:;top:50px;-o-transform:rotate(0);}
100% {opacity:;top:100px;-o-transform:rotate(360deg)}
}
#object1{
animation:down 2s linear forwards;
-webkit-animation:down 2s linear forwards ;
-moz-animation:down 2s linear forwards;
-o-animation:down 2s linear forwards;
}

按上面写法,会在object1加载后就立马开始动画。

练习实例1:

object1

这个例子中为了实现默认不开始动画,单击 “开始” 按钮后再开始播放动画,播放结束后单击 "开始" 重新播放动画,

想法是:默认css设置动画不播放:

#object1{
animation:down 2s linear paused forwards;
-webkit-animation:down 2s linear paused forwards ;
-moz-animation:down 2s linear paused forwards;
-o-animation:down 2s linear paused forwards;
}

在“开始” 按钮里的事件开始播放动画:

$('#inputTest').click(function(){
$('#objectTest').css('webkitAnimationPlayState','running'); //省略了animationPlayState、mozAnimationPlayState、oAnimationPlayState
setTimeout(function(){ $('#objectTest').css({top:0,opacity:1});},2000);
})

练习实例2:

objectTest

结果:通过查看html节点,虽然动画播放结束后objectTest的style里已经有了top:0;opacity:1;但是objectTest依然处于动画结束时的状态,调试发现,如果去除它的animation属性,它的状态就会复原了。所以改用添加和删除animation属性所在的类来达到控制动画播放的效果,另外可以用animation有动画结束的对应事件取代setTimeout。

练习实例1的代码其实就是下面这样:

.downAnimation{
animation:down 2s linear forwards;
-webkit-animation:down 2s linear forwards ;
-moz-animation:down 2s linear forwards;
-o-animation:down 2s linear forwards;
}
$('#input1').click(function(){
$('#object1').addClass( 'downAnimation');
})
document.getElementById('object1').addEventListener("webkitAnimationEnd", function (e) {
$('#object1').removeClass('downAnimation');
});
......(省略了为animationEnd、mozAnimationEnd、oAnimationEnd添加事件)

animation事件:

共有三个事件:

  • animationStart:动画开始时触发(如果有设置延迟animation-delay,是在延迟时间之后触发);
  • animationEnd:动画结束时触发;
  • animationIteration:如果有设置animation-iteration-count大于1,则在第一次以后的每一次重复播放时触发。

还可以通过事件函数的参数的elapsedTime属性获得动画开始到此时经过的时间(单位为s,不包括animation-delay时间)。

在js中控制这些属性:

document.getElementById('id1').style.animationPlayState='paused'; 
document.getElementById('id').style.WebkitAnimationPlayState='paused';

在style中定义:

<div style='animation-play-state: paused;-webkit-animation-play-state: paused;'>

注意:

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

4、transition

作用是:当属性改变时,在一定时间内将属性有初始值(平滑的)改变到新的属性值,如:

transition:all 1s ease-in-out;

transition 属性是一个简写属性,用于设置四个过渡属性:

  • transition-property:可为某个特定的属性,如background、width等,也可为all,为none时,将瞬间变化到新属性值
  • transition-duration
  • transition-timing-function
  • transition-delay

具体什么css属性可以实现transition效果,在W3C官网中列出了所有可以实现transition效果的CSS属性值以及值的类型,大家可以点这里了解详情。这里需要提醒一点是,并不是什么属性改变都为触发transition动作效果,比如页面的自适应宽度,某div的width初始为50%,当浏览器改变宽度时,虽然width实际变化的,但是并不会触发transition的效果。

transition也有一个animationEnd事件。

练习实例:移上div时(或是别的事件),加阴影,字体变粗

#div1{
width:50px;height:50px;
text-align:center;
background:green;color:white;
-moz-transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
}
#div1:hover{
font-weight:bold;
box-shadow:2px 2px 3px gray;
}

div1

transition中的属性变化也可以分开写:

transition: background 0.5s ease-in,color 0.3s linear;

复习css3的部分属性的更多相关文章

  1. CSS3外轮廓属性

    外轮廓outline在页面中呈现的效果和边框border呈现的效果极其相似,但和元素边框border完全不同,外轮廓线不占用网页布局空间,不一定是矩形,外轮廓是属于一种动态样式,只有元素获取到焦点或者 ...

  2. 学习笔记:CSS3的filter属性

    CSS3的filter属性 (版权归原作者所有) http://www.jianshu.com/p/ca7a2bdcc1e7/comments/4956985 filter: blur(5px); f ...

  3. CSS3利用text-shadow属性实现多种效果的文字样式展现

    一.效过图展示: 已经是比较久之前学习的文字效果了.但是还是很实用很有趣的.利用CSS3提供的text-shadow属性可以给页面上的文字添加阴影效果,因此可以替换掉之前使用过的一些繁琐的图片.到目前 ...

  4. css3.0新属性效果在ie下的解决方案(兼容性)

    css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...

  5. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. css3 的box-sizing属性理解

    * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } 有时候在某些项目中 ...

  8. css2和CSS3的background属性简写

    1.css2:background:background-color || url("") || no-repeat || scroll || 0 0;  css3:  backg ...

  9. CSS3的box-sizing属性

    盒模型的宽度,在 IE5.x 以及 Quirks 模式的 IE6/7 中,将 border 与 padding 都包含在 width 之内 W3C标准中的盒模型宽度为内容宽度,不包括内边距paddin ...

随机推荐

  1. 在windows下搭建linux-c学习环境

    下载virtualbox并安装: https://www.virtualbox.org/wiki/Downloads 现在vagrant并安装: https://www.vagrantup.com/d ...

  2. 下拉列表框Combo Box

    Combo Box/Combo Box Ex 组合窗口是由一个输入框和一个列表框组成.创建一个组合窗口可以使用成员函数: BOOL CListBox::Create( LPCTSTR lpszText ...

  3. poj 3335 Rotating Scoreboard

    http://poj.org/problem?id=3335 #include <cstdio> #include <cstring> #include <algorit ...

  4. JAVA构造方法,继承关系和SUPER关键字

    SUPER可调用父类的构造方法,但要注意默认调用和参数调用. 同时,在继承类时,可以用SUPER调用其它非构造方法哟. class Test extends Object{ public Test() ...

  5. 自解压的方式创建VC++程序的打包

    Walkthrough: Deploying a Visual C++ Application By Using the Visual C++ Redistributable Package Visu ...

  6. AC自动机修正

    #include<iostream> #include<cstdio> #include<cmath> #include<algorithm> #inc ...

  7. coreOS+Docker新一代企业轻量级Linux

    CoreOS官网主页使用一句话概括其理 念:“A new way to think about servers”,以及紧接着的“CoreOS is Linux for massive server d ...

  8. 2016年如何选择 Linux 发行版

    不管是在企业级应用还是在消费者领域,2015 对于 Linux 来说都是极其重要的一年.作为一个从 2005 年就开始使用 Linux 的老用户,我有幸见证了 Linux 过去这 10 年里的重大发展 ...

  9. Engineering Economics

    相关简介 工程经济学 –-研究各种技术在使用过程中如何以最小的投入获得预期产出或者说如何以等量的投入获得最大的产出: –-如何用最低的寿命周期成本实现产品.作业以及服务的必要功能. 软件工程经济学 工 ...

  10. [深入React] 6.组件

    组件是react的大杀器,超出其他框架几百里 react 组件和dom一样也是树状结构,只能由上而下传递变量(或者调用),不可以兄弟间或者更远的发生关系,为的就是简单,而且工作的很好. 每个组件有自己 ...