8.23笔记

于 2024-08-23 16:59:58 发布
阅读量197 收藏 3
点赞数 7
文章标签： css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aaaaaaaallllll/article/details/141469600
版权

动画：

1.创建动画：@keyframes

2.调用动画:animation

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../重置css样式.css">
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: rosybrown;
            animation: move 3s linear;
            animation-iteration-count: infinite;
        }
        @keyframes move{
            25% {
                transform: translate(300px,0);
                background-color: aqua;
            }
            50% {
                transform: translate(300px,300px);
                background-color: black;
            }
            75% {
                transform: translate(0,300px);
                background-color: #fff;
            }
        }
         /* @keyframes move{
            100% {
                width: 600px;
            }
         } */
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

animation参数值：

参数值效果
animation-name规定 @keyframes 动画的名称。
animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0
animation-timing-function规定动画的速度曲线。默认是 "ease"
animation-delay规定动画何时开始。默认是 0
animation-iteration-count规定动画被播放的次数（number类型）。默认是 1，（infinite: 无限次）
animation-direction规定动画是否在下一周期逆向地播放。默认是 "normal" ，‘alternate'
animation-play-state规定动画是否正在运行或暂停。默认是 "running",'paused'
animation-fill-mode规定对象动画时间之外的状态.forwards,backwards默认值

多列布局：

列宽column-width

列数column-count

列间距column-gap

列与列之间的边框column-rule

横跨多少列column-span  参数值只有两个1/all
 

aaaaaaaallllll653
关注
  • 7
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css name样式,CSS属性参考 | animation-name
weixin_39872123的博客
08-04 769
animation-name属性指定应用的一系列动画名称，每个名称代表一个由@keyframes定义的动画序列。我们通常使用animation的简写属性可以很方便地同时设置所有的动画属性。你可以为animation-name属性提供多个值，各个值之间使用逗号来分隔。每一个动画名称都应该对应一个@keyframes帧动画。如果动画名称指定的动画没有相对应的帧动画，那么该动画名称无效。如果你为anim...
西瓜书学习笔记——第八章：集成学习
Andrewings
06-27 2195
8.集成学习8.1 个体与集成8.2 Boosting 8.1 个体与集成 8.2 Boosting Boosting工作机制如下图所示： 其中各个基学习器的对应权重由其误差计算确定，基学习器误差大的则对应的权重小，误差小的则对应权重大 ...
animation的6个属性
weixin_30510153的博客
09-11 292
@keyframes 规定动画。 animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name 规定 @keyframes 动画的名称。 animation-duration 规定动画完成一个周期所花费的秒或毫秒。 animation-timing...
animation 的属性一共有 6 个值，详细介绍在此
weixin_34130389的博客
09-06 448
animation 属性是一个简写属性，用于设置六个动画属性： animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction 注释：请始终规定 animation-duration 属性，否则时长...
animation-name属性
m0_60544381的博客
12-16 1万+
开发工具与关键技术：VSCode HTML CSS 作者：尘则 撰写时间：2021/12/18 今天来说说animation-name属性，先看效果： animation-name属性:主要是用来调用 @keyframes 定义好的动画。 需要特别注意: animation-name 调用的动画名需要和“@keyframes”定义的动画名称完全一致（区分大小写）， 如果不一致将不具有任何动画效果。 属性值： none:默认值。当值为 none 时，将没有任何动画效果,这可...
animation属性——css3动画效果
MOONCOM的博客
01-15 991
animation               css动画属性 一、animation实现动画效果主要由两部分组成： 1、通过类似flash动画中关键帧声明一个动画 2、在animation属性中调用关键帧声明的动画 二、主要步骤 1、关键帧属性 @keyframes 声明一个关键帧属性的动画 例如，在css中书写以下代码 @keyframes myani{
coreutils:coreutils-8.23源码阅读笔记
03-23
coreutilscoreutils 8.23源码 ##笔记顺序 nproc 使用者 团体 睡觉 打印环境 环保 基本名 麦克菲 阅读链接 球座 好的 和 rmdir 回声 真实路径 Nohup Runcon 折叠 麦克诺德 base64 杀 chgrp 麦克迪尔 cks ame ...
python笔记5
python20211016的博客
10-24 226
列表&布尔和空值&Number 一、列表list 1.概述 变量:使用变量存储数据, 但是存在一个缺点: 一个变量一次只能存储一个数据 若要存储多个数据: 一般使用列表 列表本质上面是一个有序的集合. list1 = ["幻影","兰博基尼","迈巴赫","玛莎拉蒂","布加迪威龙","红旗","唐","宋","元","汉","秦",123,True] print(list1) 2.创建列表 语法: 变量名 = 列表 列表名称 = [数据1,数据2........]
【C++primer】一学期阅读笔记
零昔无浪
01-13 1491
参考文献(References) [1] Stanley B.Lippman,Josee Lajoie,Barbara E.Moo.C++ Primer 中文版(第5版)[M].王刚,杨巨峰,北京：电子工业出版社,2013.9
MySQL学习笔记
小锤队长的博客
04-21 286
一，连接数据库
animation-name使用简介（初级）
xiaotao131的专栏
10-01 2385
animation-name使用简介 1、animation-name是什么 2、animation-name使用 3、animation-name使用详解animation-name是什么animation-name英文意思就是【动画名称】，animation-name属性就是应用动画的名字，在使用已定义好的动画时能引用到对应的动画。animation-name使用使用例子：<!DOCTYP
前端css中animation(动画)的使用
最新发布
小蜗牛764号的博客
05-06 2998
animation常伴随着动画帧`@keyframes`一起使用。本文主要说明animation都有啥属性，然后简单的进行使用。 animation动画有多个属性，每个属性也有相应相关的值。另外我们使用过程中也可以使用简便方法，如`“animation:”+后面各属性的值，用空格隔开+“；”`的形式设置动画效果。举例如：`animation: box1 3s linear 2s infinite;`
CSS动画效果属性整理笔记（transition、animation）
MiSenLMX的博客
09-19 285
所有内容写在代码里，直接copy生成html文件可使用效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
HTML中的动画起名字,css动画
weixin_33662430的博客
06-07 282
css动画首先要明白动画是一帧一帧的，由多个帧拼起来的动画@keyframes此为动画样式中的关键帧，用关键帧来控制css动画中的关键样式。相比较过渡更加的容易空值中间的部分其指示了一个过程到另一个过程的过程关键帧还具有名字，在应用的时候通过名字将其绑定。如果关键帧重复定义，则根据最后一次定义为准关键帧中的important会被略过举个栗子定义一个关键帧@keyframesmyFrames{...
定义动画名字html,CSS3 animation-name属性怎么用？
weixin_31640385的博客
06-07 622
css3 animation-name属性是用来检索或设置对象所应用的动画名称，必须与@keyframes配合使用，因为动画名称由@keyframes定义 ；如果有多个属性值，可以用逗号进行分隔。css3 animation-name属性作用：animation-name 属性为 @keyframes 动画规定名称。语法：animation-name: keyframename|none;keyf...
css animation动画完成后隐藏_如何使用css3实现一个类在线直播的队列动画
weixin_39942492的博客
11-29 803
之前在群里有个朋友问了这样一个问题, 就是如何在小程序中实现类似直播平台的用户上线时的队列动画? 作为一名前端工程师, 解决方案无非以下2种:使用javascript根据条件来控制元素的样式实现队列动画用纯css3配合数据驱动模型来实现.大家都知道在现代的Web开发中, 我们能使用Css实现的效果尽量不要用Js, 所以我们应该优先考虑用Css3来实现,但是我们要结合数据流才能实现真正的队列动画, ...
如何使用css3实现一个类在线直播的队列动画的示例代码
06-22 373
之前在群里有个朋友问了这样一个问题, 就是如何在 小程序 中实现类似 直播平台 的用户上线时的 队列动画 ? 作为一名前端工程师, 解决方案无非以下2种: 使用 javascript 根据条件来控制元素的样式实现队列动画 用纯 css3 配合数据驱动模型来实现. 大家都知道在现代的 Web 开发中, 我们能使用 Css 实现的效果尽量不要用 Js , 所以我们应该优先考虑用 Css3 来实现,但是我们要结合 数据流 才能实现真正的队列动画, 所以我们可以利用 MVVM框架 便捷的数据驱动模型来控制动画的走
CSS动画animation
橘猫吃不胖的博客
11-10 1252
CSS动画1 创建动画@keyframes2 动画的属性2.1 动画名称animation-name2.2 完成时间animation-duration2.3 速度曲线animation-timing-function2.4 延迟时间animation-delay2.5 播放次数animation-iteration-count2.6 播放方向animation-direction2.7 动画状态animation-play-state2.8 动画之外状态animation-fill-mode2.9 综合属
css动画-animation各个属性详解
热门推荐
weixin_45810135的博客
10-04 1万+
css3的animation很容易就能实现各种酷炫的动画，虽然看到别人的成果图会觉得很难，但是如果掌握好各种动画属性，做好酷炫吊炸天的动画都不在话下，好，切入正题。 一、动画属性： 动画属性包括： ①animation-name， ②animation-duration， ③animation-timing-function， ④animation-delay， ⑤animation-iteration-count， ⑥animation-direction， ⑦animation-fill-mode， ⑧
linux mysql 8.23
04-29
Linux和MySQL 8.23都是非常流行的软件，Linux是一款免费开源的操作系统，它具有高度的稳定性、安全性和强大的可定制性。由于它是开源的，任何人都可以参与到它的开发中来，这就使得Linux具备了更好的灵活性，并且能够适应更多的需求。 MySQL 8.23是一款流行的关系型数据库管理系统。MySQL数据库的灵活性、可靠性、可扩展性和高性能都非常优秀，它被广泛应用于Web应用程序、企业级软件以及各种大型数据中心中。MySQL 8.23增加了很多新的功能，例如窗口函数、JSON支持等，确保了数据库的高性能和稳定性。 当把Linux和MySQL组合起来使用时，可以创造出更加稳定、可靠和优秀的系统。对于开发人员而言，使用Linux作为操作系统，可以减少很多不必要的开销，同时MySQL的高性能和稳定性可以支持更好的数据库应用程序开发。除此之外，它们的开源性质也让平台具有更好的可定制性和扩展性。 总的来说，Linux和MySQL 8.23的结合是非常优秀的，能够带来无数的好处，形成一个完美的开源数据库系统。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值