CSS3动画

CSS3动画

CSS3动画是一种实现元素在网页中逐渐变化样式的技术。它可以让网页的动画效果更加丰富和灵活,而不需要使用Flash或JavaScript。在本文中,我们将介绍CSS3动画的基本概念和用法。

动画的原理

要创建CSS3动画,我们需要指定两个要素:

  • 要添加动画效果的CSS属性
  • 动画函数

例如,我们可以为一个div元素的animation属性添加一个动画函数mymove,让它在5秒内从左上角移动到右下角:

div {
  animation: mymove 5s; /* 动画属性和函数 */
}

这就是CSS3动画的基本效果。我们可以使用不同的动画函数来实现不同的动画效果,也可以使用多个动画函数来组合出复杂的动画效果。

动画函数

CSS3提供了一种特殊的规则,叫做@keyframes规则,用来定义动画函数。@keyframes规则内指定一个或多个关键帧,每个关键帧表示动画在某个时间点的状态。我们可以用百分比来表示时间点,或者用关键词fromto来表示起始和结束状态。

例如,我们可以定义一个名为mymove的动画函数,让元素从左上角移动到右下角:

@keyframes mymove {
  from {left: 0px; top: 0px;}
  to {left: 200px; top: 200px;}
}

我们也可以定义更多的关键帧,让元素在移动过程中改变颜色、大小、形状等:

@keyframes mymove {
  0% {left: 0px; top: 0px; background: red;}
  25% {left: 200px; top: 0px; background: yellow;}
  50% {left: 200px; top: 200px; background: blue;}
  75% {left: 0px; top: 200px; background: green;}
  100% {left: 0px; top: 0px; background: red;}
}

动画属性

除了指定要添加动画效果的CSS属性和函数之外,我们还可以使用以下几个属性来控制动画的细节:

  • animation-name:规定要绑定到选择器的关键帧的名称。
  • animation-duration:规定动画完成一个周期所花费的秒或毫秒。默认是0。
  • animation-timing-function:规定动画的速度曲线。默认是"ease"。
  • animation-delay:规定动画何时开始。默认是0。
  • animation-iteration-count:规定动画被播放的次数。默认是1。
  • animation-direction:规定动画是否在下一周期逆向地播放。默认是"normal"。
  • animation-fill-mode:规定当动画不播放时(当动画完成时,或当动画有一个延迟未开始播放时),要应用到元素的样式。
  • animation-play-state:规定动画是否正在运行或暂停。默认是"running"。

我们可以使用简写属性animation来同时设置这些属性,也可以分别设置每个属性。

例如,我们可以为一个按钮添加一个名为mybutton的动画效果,让它在鼠标悬停时改变颜色、大小和阴影,并且无限循环:

button {
  animation-name: mybutton;
  animation-duration: 1s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes mybutton {
  from {background-color: blue; width: 100px; box-shadow: none;}
  to {background-color: green; width: 200px; box-shadow: inset 0 -5px black;}
}

button:hover {
  animation-play-state: running;
}

动画的应用

CSS3动画可以应用于任何可以改变值或状态的CSS属性,比如颜色、背景、字体、边框、位置、尺寸、形状等等。我们可以利用动画来制作各种各样的交互效果,比如按钮、菜单、幻灯片、弹出框等等。下面是一些简单的示例:

按钮

我们可以为一个按钮添加一个名为mybutton2的动画效果,让它在鼠标悬停时旋转并缩放:

button {
  animation-name: mybutton2;
  animation-duration: .5s;
}

@keyframes mybutton2 {
  from {transform: rotate(0deg) scale(1);}
  to {transform: rotate(360deg) scale(1.5);}
}

button:hover {
  animation-play-state: running;
}

菜单

我们可以为一个水平菜单添加一个名为mymenu的动画效果,让每个菜单项在鼠标悬停时向右移动并倾斜:

ul {
  list-style-type:none;
}

li {
    display:inline-block;
    padding:10px;
    background-color:#f1f1f1;
    animation-name:mymenu;
    animation-duration:.5s;
}

a {
    text-decoration:none;
    color:black;
}

@keyframes mymenu {
    from {transform:none;}
    to {transform:translateX(20px) skewX(20deg);}
}

li:hover {
    animation-play-state:running;
}

幻灯片

我们可以为一个幻灯片添加一个名为myslide的动画效果,让每张图片在切换时淡入淡出并缩放:

.slide {
    position:relative;
    width:500px;
    height:300px;
    overflow:hidden;
}

.slide img{
    position:absolute;
    top:-300px;
    left:-500px;
    width:auto;
    height:auto;
    transition:left .5s ease-in-out .5s, top .5s ease-in-out .5s, opacity .5s ease-in-out .5s, transform .5s ease-in-out .5s;
}

.slide img:first-child{
    left:-500px;
    top:-300px;
}

.slide:hover img{
    left:-500px;
    top:-300px;
}

.slide:hover img:last-child{
    left:-500px;
    top:-300px;

}

.slide img:nth-child(2){
    left:-500px;
    top:-300px;

}

.slide img:nth-child(3){
    left:-500px;
    top:-300px;

}

.slide img:nth-child(4){
    left:-500px;
    top:-300px;

}

.slide:hover img:nth-child(2){
   left:-500px;
   top:-300px;

}

.slide:hover img:nth-child(3){
   left:-500px;
   top:-300px;

}

.slide:hover img:nth-child(4){
   left:-500px;
   top:-300px;

}

注意点:

1.animation-timing-function:作用于一个关键帧周期而非整个动画周期
2.animation-iteration-count:只会管理动画内的属性,动画的延迟不会被循环
3.animation-direction:改变关键帧的执行方向,还会影响animation-timing-function的形式

总结

CSS3动画是一种实现元素在网页中逐渐变化样式的技术。它可以让网页的交互效果更加丰富和灵活,而不需要使用Flash或JavaScript。要创建CSS3动画,我们需要指定要添加动画效果的CSS属性和函数,以及一些控制动画细节的属性。我们可以使用不同的动画函数来定义不同时间点的状态,也可以使用多个动画函数来组合出复杂的状态。我们还可以利用动画属性来调整动画的时长、延迟、次数、方向、填充模式和播放状态。CSS3动画可以应用于任何可以改变值或状态的CSS属性,比如颜色、背景、字体、边框、位置、尺寸、形状等等。我们可以利用动画来制作各种各样的交互效果,比如按钮、菜单、幻灯片、弹出框等等。

参考资料: (1) CSS3 动画 | 菜鸟教程. https://www.runoob.com/css3/css3-animations.html. (2) CSS3 animation 属性 | 菜鸟教程. https://www.runoob.com/cssref/css3-pr-animation.html. (3) CSS Animations - W3Schools. https://www.w3schools.com/css/css3_animations.asp.

#前端学习##前端面试##前端未死##我的求职思考#
CSS3美学:网页设计新境界 文章被收录于专栏

CSS3是网页设计中不可或缺的技术,它可以让网页变得更加美观、动态和交互。在这个专栏中,我将和你分享CSS3的基础知识、最新特性、实用技巧和精彩案例,让你能够用CSS3打造出令人惊艳的网页效果。无论你是初学者还是高手,你都可以在这里找到适合你的内容,一起探索CSS3之美,发现网页设计的无限可能。

全部评论

相关推荐

06-27 12:54
已编辑
门头沟学院 Java
累了,讲讲我的大学经历吧,目前在家待业。我是一个二本院校软件工程专业。最开始选专业是觉得计算机感兴趣,所以选择了他。本人学习计算机是从大二暑假结束开始的,也就是大三开始。当时每天学习,我个人认为Java以及是我生活的一部分了,就这样持续学习了一年半,来到了大四上学期末,大概是在12月中旬,我终于找的到了一家上海中厂的实习,但我发现实习生的工作很枯燥,公司分配的活也不多,大多时间也是自己在自学。就这样我秋招末才找到实习。时间来到了3月中旬,公司说我可以转正,但是转正工资只有7000,不过很稳定,不加班,双休,因为要回学校参加答辩了,同时当时也是心高气傲,认为可以找到更好的,所以放弃了转正机会,回学校准备论文。准备论文期间就也没有投递简历。然后时间来到了5月中旬,这时春招基本也结束了,然后我开始投递简历,期间只是约到了几家下场面试。工资也只有6-7k,到现在我不知道该怎么办了。已经没有当初学习的心劲了,好累呀,但是又不知道该干什么去。在家就是打游戏,boss简历投一投。每天日重一次。26秋招都说是针对26届的人,25怎么办。我好绝望。要不要参加考公、考研、央国企这些的。有没有大佬可以帮帮我。为什么感觉别人找工作都是顺其自然的事情,我感觉自己每一步都在艰难追赶。八股文背了又忘背了又忘,我每次都花很长时间去理解他,可是现在感觉八股、项目都忘完了。真的已经没有力气再去学习了。图片是我的简历,有没有大哥可以指正一下,或者说我应该走哪条路,有点不想在找工作了。
码客明:太累了就休息一下兄弟,人生不会完蛋的
如果实习可以转正,你会不...
点赞 评论 收藏
分享
不愿透露姓名的神秘牛友
07-07 18:05
哈哈哈哈哈感觉朋友找工作的已经疯掉了,直接上图
码农索隆:真老板娘:“我嘞个去,这不我当年的套路吗
点赞 评论 收藏
分享
评论
2
1
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务