利用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. 复杂事件处理引擎—Esper入门(第二弹)

    说明: 以下内容,可以参考Esper官方网站<Qucik start & Tutorial >(顺序做了部分调整). PS:因为英语水平有限(大学期间刚过CET4的英语小盲童一枚) ...

  2. js中()()问题

    var aa=function(){}(); var bb=(function(){})(); 今天被问到这个问题,这段js有撒区别. 总结一下,两个函数都是立即执行的意思.但是不同之处是执行的顺序, ...

  3. 【转】JAVA 读写二进制文件

    原文网址:http://shiminghua234.blog.163.com/blog/static/263912422011619102350866 import java.io.*; /** * ...

  4. VS快捷键大全(转)

    相信.Net开发人员都想能够熟记各种VS快捷键以提高平时开发的效率,但苦于记忆能力太差而快捷键又特别多,特别烦,所以作罢! 下面我将简单介绍一下我记忆VS快捷键的一些方法,希望对大家有所帮助. 1.窗 ...

  5. Java---设计模块(装饰模式)

    ★ 场景和问题 在不对原有对象类进行修改的基础上,如何给一个或多个已有的类对象提供增强额外的功能? ★ 引例 写一个MyBufferedReader类,使它能够对字符流(如FileReader.Inp ...

  6. 微信、QQ和手机号之间不得不说的故事!

    发文字,发图片,发心情,视频聊天,查看附近的人,微信能干的事情QQ都可以,那么它们有什么区别,我QQ用得好好的为什么要我联系人都导到微信去?我们很早就有了QQ,但是在QQ时代,我们虽然用QQ发消息聊天 ...

  7. Android 侧滑(双向滑动菜单)效果

    下面看看我们如何使用它,达到我们想要的效果 public class MainActivity extends Activity { /** * 双向滑动菜单布局 */ private SliderM ...

  8. ACM2055_ctype.h_cctype

    #include<iostream> int main() { using namespace std; int y,count; char x; cin>>count; wh ...

  9. Jmeter接口测试案例实践(一)

    1.1. 接口介绍 本次测试的接口采用内网中的通讯录查询接口进行测试,接口参数如下: 1.2. 使用Jmeter进行接口测试 1.2.1. 打开Jmeter 下载好Jmeter后,双击bin目录下的j ...

  10. 有利于SEO的DIV+CSS规范小结

    一.CSS文件及样式命名 1.CSS文件命名规范 全局样式:global.css:框架布局:layout.css:字体样式:font.css:链接样式:link.css:打印样式:print.css: ...