CSS动画实用技巧_技术问答

首页免费课 CSS动画实用技巧问答

CSS动画实用技巧

                
                奇舞团
            Web前端工程师

                    查看讲师更多课程 
                    奇舞团讲师的其他课程
                
jQuery实现自定义滚动条
中级·39578
免费课程
                                
全屏切换效果
中级·85463
免费课程
                                
数学知识在CSS动画中的应用
初级·39132
免费课程
                                
                难度初级
            
                时长37分
            
                学习人数
            
综合评分9.33
                            171人评价
                        查看评价
                                9.7
                                内容实用
                            
                                9.2
                                简洁易懂
                            
                                9.1
                                逻辑清晰

全部评论问答未解决精华

慕粉3397190

语速快还看不到代码，根本不知道写的啥

1 2-1 常用动画属性-transition

2016-07-14

跳跃。

适合有基础的，讲的不错

0 2-3 常用动画属性-transform

2016-07-14

lesses

这一节课还是能听懂的...

0 2-3 常用动画属性-transform

2016-07-14

碗大宽无影

3-1讲的很基础，匆匆而过

0 3-1 实用动画技巧-animation-delay为负值

2016-07-13

爆炸绅士

讲得真烂╭∩╮(︶︿︶）╭∩╮

0 2-1 常用动画属性-transition

2016-07-12

七炎

时钟摆动的时候还会变模糊，咋实现的

0 3-4 实用动画技巧-实现运动动画

2016-07-09

七炎

这个属性连续设置几个在安卓会卡

0 3-1 实用动画技巧-animation-delay为负值

2016-07-09

UID刀剑如梦

好小的代码，看不到啦啦

0 2-2 常用动画属性-animation

2016-07-06

黯淡_0001

十分经典的课程，有用的干货，良心的导师

0 4-1 效果简介.mp4

2016-07-05

qq_弥天_03407677

讲的太快听不清，眼都要瞪瞎了看不清

7 2-1 常用动画属性-transition

2016-07-01

慕UI7799382

垃圾~~~~~~

0 2-2 常用动画属性-animation

2016-06-29

灯元

.spinner{
width:10em;
height:10em;
margin:100px auto;
border:1.1em solid #666;
border-left-color:#fff;
border-radius:50%;
-webkit-animation:lood 1.1s infinite linear;
}

@-webkit-keyframes lood{
from{ transform:rotate(0deg);}
to{ transform:rotate(360deg);}
}

1 3-2 实用动画技巧-妙用border颜色

2016-06-29

灯元

.spinner .line2{

-webkit-animation-delay:-1.1s;}

......省略

.spinner .line5{
-webkit-animation-delay:-0.8s;}

@-webkit-keyframes strechdelay{
0%,40%,100%{
-webkit-transform:scaleY(0.4);
}
20%{
-webkit-transform:scaleY(1);}
}

0 3-1 实用动画技巧-animation-delay为负值

2016-06-29

灯元

.spinner{
width:50px;
height:50px;
margin:100px auto;

}

.spinner > div{
display:inline-block;
float:left;
margin:0 2px;
width:6px;
height:100%;
background:green;
-webkit-animation:strechdelay 1.2s infinite ease-in-out;
}
默默走过！

0 3-1 实用动画技巧-animation-delay为负值

2016-06-29

灯元

-webkit-animation:fadeOut 1.0s infinite ease-in-out;

@-webkit-keyframes fadeOut{
from{-webkit-transform:scale(0,0);}
to{-webkit-transform:scale(1,1); opacity:0;}
}
纠正一下，这个可以运行

2 2-2 常用动画属性-animation

2016-06-29

首页上一页 11 12 13 14 15 16 17 下一页尾页

该课程已下架

课程须知: 本课程适合HTML和CSS有一些实践的童鞋们。需要对CSS3有基本的了解。

老师告诉你能学到什么？: 1、常用的CSS3动画属性介绍 2、介绍4个实用的动画技巧 3、如何一步步实现一个CSS3 Hover特效

微信扫码，参与3人拼团

热搜

最近搜索清空

CSS动画实用技巧