Css中animation动画

最新推荐文章于 2024-09-04 17:17:13 发布
最新推荐文章于 2024-09-04 17:17:13 发布
阅读量410 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44540780/article/details/86550164
版权 

开发工具与关键技术：前端

作者：黄志鹏

撰写时间：2019/1/19

在前端css3中提供了很强大的animation动画，它可以指定多个关键帧，从而允许定义更加丰富的自定义动画
下面我们来用纯css做一个模仿音乐播放的动画，首先我们先布局，一个div里放10个span标签，整体布局就是这样了

代码如下
在这里插入图片描述

然后再把还没有动画样式的样式写出来，也就是设置每一个span标签的样式，我们主要设置其宽和边框即可

代码如下

在这里插入图片描述
接下来我们写一个关键帧，里面分5个过程，其实0%到100%你随意分，这里分5个就好，
在每一个过程中只是改变其高和背景颜色就好，但要注意的是每一个span标签改变高度后，
其在原来的位置会发生改变，所以我们在改变高和背景颜色的同时也改变其边距，让其保持在原位置。

代码如下

在这里插入图片描述

然后10个span标签调用同一个关键帧就可以了，不过想要每一个span标签的动画效果不同，我们只需改变每一个span标签调用关键帧的时间就行了。

代码如下

在这里插入图片描述

下面是浏览器输出结果

在这里插入图片描述

CSS3之动画
zh_hunan的博客
10-28 958
动画(animation) 什么是动画 动画是 CSS3 中最具颠覆性的特征之一，可通过设置多个节点来精确的控制一个或者一组动画，从而实现复杂的动画效果 动画的基本使用 先定义动画 在调用定义好的动画 语法格式(定义动画) @keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200...
基于CSS3 animation动画属性实现轮播图效果
09-24
CSS3的animation属性是现代网页设计中不可或缺的一部分，它允许开发者创建复杂的动态效果，而无需依赖JavaScript或Flash。在本文中，我们将深入探讨如何利用CSS3的animation属性来实现轮播图效果，这是一种常见的...
css的animation动画
yuan0209的博客
11-25 1万+
顾名思义，它可以控制动画的状态 – 运行或者暂停,类似于视频播放器的开始和暂停,是 CSS 动画中有限的控制动画状态的手段之一。在 1-2 秒范围内随机，这样，我们就可以得到非常自然且不同的上升动画效果，基本不会出现重复的画面，很好的模拟了随机效果。属性或其子属性，该属性允许配置动画时间、时长以及其他动画细节，但该属性不能配置动画的实际表现，动画的实际表现是由。中定义的第一帧这种说法，因为动画运行的第一帧和最后一帧的实际状态还会受到动画运行方向。，可以有效的构建更为随机的动画效果，让动画更加的自然。
CSS-animation自定义动画【看这一篇就够了！】
最新发布
zheshiyangyang的博客
09-04 1873
使用@keyframes关键帧来定义动画创建动画的原理是，将一套CSS样式逐渐变化为另一套样式在动画过程中，可以多次更改CSS样式的设定动画执行各阶段时间，可以通过百分比来改变发生的时间，或者通过关键词“from”和“tofrom和to等价于0%和100%，from和0%是动画的开始时间to和100%是动画的结束时间语法@keyframes 动画名 {/* 起始状态 */from { 样式 }/* 结束状态 */to { 样式 }/* 或 */@keyframes 动画名 {
CSS的动画特效（animation）
githubcurry
12-09 1万+
今天来讲一下css中很实用的一个效果-动画（animation）。 动画就是使元素从一种样式逐渐变化为另一种样式的效果。我们可以改变任意多的样式任意多的次数（很官方的回答）。 为了方便大家和我自己理解这个概念，我们可以想像一下准备拍电影的时候，我们需要一个电影名吧，需要设置电影的时间吧。而且拍电影就是一帧一帧，叫做关键帧。所以我们设置动画的时候要讲清楚电影名（animation-name），电影时长（animation-duration），电影啥时候开始（animation-delay），播放或者暂停（a.
CSS动画-Animation
温情
10-16 5637
动画是css3中具有颠覆性的特征之ー,可通过设置多个节点来精确控制一个或一组动画常用来实现复杂的动画效果。 相比较过渡，动画可以实现更多变化，更多控制的效果。创建动画的原理是，将一套 样式逐渐变化为另一套样式。在动画过程中我们能够多次改变这套 样式。以百分比来规定改变发生的时间，或者通过关键词 和 ，等价于 和 。 就是需要绑定的的名称 这就是定义了一个名称为的动画，被元素调用 规定动画完成一个周期所花费的时间 意思是指定元素的时间向右移动 规定动画的速率曲线，也就是动画执行过程的
CSS Animation
了凡
04-26 440
CSS Animation 教程： CSS动画简介 css3 animation 属性众妙 http://animista.net/
css3 animation酷炫的文字动画特效
11-04
在本文中，我们将深入探讨如何使用CSS3 Animation创建酷炫的文字动画特效。CSS3 Animation是现代网页设计中不可或缺的一部分，它允许我们为元素添加平滑、动态的效果，从而提升用户体验和视觉吸引力。在这个主题中，...
CSS3中的Transition过度与Animation动画属性使用要点
12-13
在CSS3中，Transition（过渡）和Animation（动画）是两个强大的特性，它们极大地丰富了网页的视觉表现力。Transition允许元素的CSS属性值在特定事件触发时平滑过渡，而Animation则允许创建复杂的自定义动画序列。 ...
CSS3 Animation文字动画特效
06-24
在本文中，我们将深入探讨CSS3 Animation在创建文字动画特效中的应用。CSS3，作为CSS（层叠样式表）的最新版本，引入了许多强大的新特性，其中包括动画功能，使得网页设计更加生动活泼，增强了用户体验。 一、CSS3 ...
css动画（animation）
wll_web的博客
12-14 1028
css动画（animation）1.关键帧（@keyframes） 1.关键帧（@keyframes）
CSS——动画（animation）
Fan_web的博客
08-15 1181
本文主要分享了CSS中的过渡、动画、变形、旋转、缩放等的样式的语法内容。下一篇将分享到CSS的less知识。
css animation学习
u012137648的博客
05-22 354
css animation学习 上一篇写了transition的用法，其实animation也是做动画利器，相比于transition，animation可以做出更多更大的动画效果 今天就来学一下css的animation的用法 用法 如下所示animation属性可以有8个值，当然这8个值可以分开写 .someclass { /*[animation-name] [animation-duration] [animation-timing-function] [animation-delay]
CSS中animation动画-详解
热门推荐
qq_48109675的博客
08-30 4万+
1、animation-name ：xx （设置关键帧的名称为xx） 2、animation-duration：5s （动画持续时间为5s） 3、animation-timing-function： linear （动画时间曲线 也叫做运行速度为匀速） 取值： linear 匀速、 ​ ease （默认）低速开始—>加速—>结束前减速 、 ease-in 以低速开始、ease-out 以低速结束、ease-in-out 以低速开始和结束。 cubic-bezier(n,n,n,n)
css animation
Var_YanGuangYing
09-10 410
animation 是 animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state 这些属性的一个简写形式。 anima...
css的animation
qq_36893984的博客
04-15 161
animation： 这个也是一个重要的属性，但是不经常用，容易遗忘，记录一下： 简写： animtion:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction 1.animation-name:规定需要绑定到选择器的 keyframe 名称 2.animation-duration:规定完成动画所花费的时间
css 动画animation
ZkMao1007的博客
11-05 268
无标题文档              @-webkit-keyframes 'wobble' {          0% {             margin-left: 100px;             background: green;          }          40% {             margin-left: 250px;       
css动画
我不想说
09-19 116
使用@keyframes创建动画 @keyframes理解为帧 和 animation 配合使用 使用百分比来规定变化发生的事件，也可以使用from和to关键词，但为了兼容建议百分比 0%动画的开始 100%动画结束 animation：animation-name(必须) animation-duration(必须) animation-timing-functiona...
css 开启 animation 动画
07-09
要在CSS中开启动画，您可以使用`@keyframes`规则来定义动画关键帧，然后将动画应用到元素上。 下面是一个简单的示例，展示如何使用CSS开启动画： ```css /* 定义动画关键帧 */ @keyframes example-animation { 0%...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值