首页 > 其他分享 >CSS 动画

CSS 动画

时间:2023-10-29 15:35:55浏览次数:44  
标签:count 动画 2s iteration animation CSS 1.5

1.1 过渡 transition

img

  transition: background-size 2s cubic-bezier(0, .98, .33, 1.1);

steps()函数可以配合使用

steps(5, end)

1.2 变形 transform

1.2.1 旋转

rotate()函数可以配合使用

transition: 2s;
transform: rotate(-180deg);

向左旋转,2s旋转1180deg(度)

transition: 2s;
transform: rotate(180deg);

向右旋转,2s旋转180deg(度)

img

1.2.2 移动

img

img

1.2.3 缩放

img
img

1.2.4 倾斜

img

1.2.5 变形原点 transform-origin

transform-origin: 150px 150px 150px;

参数不能使用百分比,关键字,只能为具体的值

1.2.6 3D变形方式(子元素和父元素的关系)

例子:

img

效果:

img

子元素依附父元素的变形效果

若在父元素上加上transform-style: preserve-3d;就可以释放子元素

例如:

img

效果:
img

1.3 修改视域 perspective()

1.4 处理背面 backface-visibility

例子:

img

效果:

img

img

1.5 动画 @keyframes (关键帧)

@keyframes example {
    from {
        background-color:red;
    }
    to{
        background-color:green;
    }
}

div{
    animation-name: example;
    animation-duration: 6s; /* 过渡时长 */
    animation-iteration-count: 6; /* 重复次数 */
}

@keyframes example {
    0%{
        /* 要实现效果 */
    }
    25%{
        /* 要实现效果 */
    }
    75%{
        /* 要实现效果 */
    }
    100%{
        /* 要实现效果 */
    }
}

div{
    animation-name: example;
    animation-duration: 6s; /* 过渡时长 */
    animation-iteration-count: 6; /* 重复次数 */
}

1.5.1 指定动画开始延迟 animation-delay

.div1{
    animation-delay: 2s; /* 延迟2s执行 */
}
.div2{
    animation-delay: -2s; /* 从2s后开始执行 */
}

1.5.1 指定动画循环 animation-iteration-count: infinite;

div{
    animation-iteration-count: infinite;
}

只要加上infinite参数,动画就会循环,不作多描述

1.5.2 指定动画的方向 animation-direction

img

1.5.3 指定动画的速度曲线 animation-timing-function

img

1.5.4 指定动画填充模式 animation-fill-mode

img

1.5.5 animation 简写

定义和用法:
animation 属性是一个简写属性,用于设置六个动画属性:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction

请始终规定 animation-duration 属性,否则时长为 0,就不会播放动画了。

示例:

div
{
animation:mymove 5s infinite;
}

css 语法:

animation: name duration timing-function delay iteration-count direction;

描述
animation-name 规定需要绑定到选择器的 keyframe 名称。
animation-duration 规定完成动画所花费的时间,以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
animation-fill-mode 规定动画在执行时间之外应用的值。
animation-play-state 规定动画是正在运行还是暂停。

1.6 滤镜 filter

img

关于色彩补充:

img

拓展SVG
img

1.7 混合模式 mix-blend-mode

img

1.7.1 变暗、正片叠底、颜色加深

原效果:

img

dorken | multiply | color-burn; 基本都是以下加multiply效果

img

1.7.2 变亮、滤色、颜色减淡

原效果:

img

lighten | screen | color-dodge

img

1.7.3 鲁加、柔光、强光

overlay | soft-light | hard-light

标签:count,动画,2s,iteration,animation,CSS,1.5
From: https://www.cnblogs.com/tobycold/p/17795368.html

相关文章

  • 【转】CSS重置文档/reset.css
    前言reset.css文档就是一个普通的层叠样式表文档,就是css文档,一个网站一般会用三种css文档来设定网站的样式。重置样式(reset.css)(重置默认的css样式);公共样式 (common.css)(一系列页面共用共享的样式,如:头部底部样式);独立样式(每个页面单独使用的样式,如index.css)。在这里具体讲......
  • css图片宽高不同,缩放图片,保持宽高,注意最外层的盒子要用display:inline-flex
    <divclass="product"><Popoverplacement="right"><template#content><divclass="w-[200px]h-[200px]"><img:src=&......
  • 用html 加css 绘制表格
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><style>/*头部样式定义*/.header{padding-bottom:10px;/*设置头部的下内边距*/......
  • 【动画制作编辑软件】Adobe Animate CC 2018 Mac 中文汉化版
    AnimateCC2018提供众多实用设计工具,主要用于html动画编辑,设计适合游戏、应用程序和Web的交互式矢量动画,可帮助我们不用写代码的情况下完成简单的交互动效实现,借助这款业界领先的动画工具集,让网页设计人员轻松制作适用于网页、数位出版、多媒体广告、应用程序、游戏等用途的互动式......
  • 计算机图形:动画
    目录基本概念动画的光栅方法双缓存用光栅操作生成动画动画序列的设计传统动画技术计算机动画语言关键帧系统变形模拟加速度OpenGL动画函数基本概念计算机动画(computeranimation):场景中任何随时间而发生的视觉变化。计算机生成的动画,通过几何变换改变对象位置、大小,随时间改变......
  • css--重绘和回流
    重绘(paint) :当rendertree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不影响布局的,比如background-color,则称为重绘。回流(layout):当rendertree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流(reflow)。当页面布局和几何属......
  • css 居中
    absolute绝对定位来居中先让元素左上角居中top:50%;left:50%;再根据容器的大小来设置外边距偏移量width:800px;height:500px;margin-left:-400px;margin-top:-250px;拓展:过渡玩法:background-size:cover;background-size:100%100%;......
  • 记录--仿加入购物车飞入动画效果
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助近期对管理后台相关功能进行优化,其中导出功能涉及到查询数据过多导致查询很慢问题,决定采用点击后加入到下载中心方式,既解决了接口慢等待问题,也方便后期各种文件的重复下载,一举多得~功能上很好实现,调接口就可以了,主......
  • ruby实战手册(14)-css(1)
    目录linkimportlink<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>learnjs</title><basehref="/"><linkhref="styles/style.css"typ......
  • 2023-10-26 hexo部署到GitHub时css样式不生效 ==》 css文件链接被识别为不安全链接,导
    hexod一键部署后查看效果发现博客页面的样式全丢失了,查看控制台发现了端倪:MixedContent:Thepageat'https://xxx.github.io/'wasloadedoverHTTPS,butrequestedaninsecurestylesheet'http://xxx.com/lib/font-awesome/css/font-awesome.min.css?v=4.6.2'.Thisre......