【前端知识点总结】CSS 基础六 - 常见的CSS动画

已于 2022-04-06 10:20:21 修改
阅读量1.0k 收藏 8
点赞数 2
分类专栏： 前端知识点总结 文章标签： css 前端 css3
于 2022-02-15 22:19:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiang_ziy/article/details/122953341
版权

空间(3d)转换 tramsform: 值 ;

snipaste20220207_084856.png

移动 tramsform:translate3d(x,y,z);

  • 添加位移属性 transform: translate3d(x轴, y轴, z轴);
  • 给盒子父元素添加(perspective视距)视距,实现Z轴转换
  • 视距 perspective:值; 人眼到屏幕的距离,一半约800px-1200px
body {
    /* 视距,是屏幕距眼睛的距离,添加到父元素上, 一般是800px-1200px */
    perspective: 1000px;
}
.box {
    width: 200px;
    height: 200px;
    background-color: #ccc;
    margin: 200px auto;
    transition: all 1s;
}
.box:hover {
    transform: translateX(100px);
    transform: translateY(100px);
    transform: translateZ(200px);
    /* transform: translate3d(x轴, y轴, z轴); */
    transform: translate3d(100px, 100px, 100px);
}

旋转 rotateX() rotateY() rotateZ()

左手法则 ： 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

snipaste20220207_094130.png

  • 旋转属性: transform: rotateX(60deg) rotateY(60deg) rotateZ(60deg);
  • 旋转属性连写: rotate3d(x,y,z,度数) x,y,z取值0-1

立体呈现

给父元素添加 transform-style:preserve-3d; 使子元素处于3d空间

<head>
    <style>
        .box {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 100px auto;
            /* 使子元素处于真正的3d空间,添加到父元素上 */
            transform-style: preserve-3d;
            transition: all 3s;
        }
        .box:hover {
            transform: rotateY(360deg);
        }
        .box div {
            position: absolute;
            width: 100%;
            height: 100%;
        }
        .front {
            background-color: skyblue;
        }
        .back {
            background-color: pink;
            transform: translateZ(-300px);
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="back">后面</div>
        <div class="front">前面</div>
    </div>
</body>

动画 animation 多个状态间的变化过程,动画过程可控

使用动画

  1. 定义动画 @keyframes 动画名称 {}
  2. 调用动画 animation : 值 ;
        .box {
            width: 200px;
            height: 200px;
            background-color: #f00;
            border-radius: 50%;
            /* 2.调用动画 */
            animation: move 1s infinite;
        }
        /* 1.定义动画 */
        @keyframes move {
            /* 可以使用百分比来设置每个时刻的状态
            0% { */
            from {
                transform: translate(0);
            }
            /* 100% { */
            to {
                transform: translate(500px);
            }
        }

动画属性 animation-

  • animation-name: 值 ; 调用动画的名称
  • animation-duration : 值 ; 动画播放的时长
  • animation-delay : 值 ; 延迟 动画等待多久执行
  • animation-fill-mode : 值 ; forwards 停在最后一帧 backwards 默认值 停在第一帧
  • animation-timing-function : 值 ; linear 匀速 速度曲线
  • animation-iteration-count : 值 ; 写数值表示播放次数 infinite 循环播放
  • animation-direction : 值 ; 动画执行方向 alternate 反向播放 逆播
  • animation-play-state : 值 ; 动画暂停 paused 暂停
最低0.47元/天 解锁文章
疆子
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
常用的CSS动画效果
happy81997的博客
03-21 3066
【代码】常用的CSS动画效果。
9种常用CSS动画
热门推荐
weixin_48871924的博客
10-28 1万+
复制可用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>9种css动画</title> <link rel="stylesheet" type="text/css" href="css/demo2.css"/> <link rel="icon" sizes="any" mask="" href="./img/baidu.svg"
超硬核，css动画详细讲解
最新发布
xiaowei0016的博客
07-29 612
使用@keyframes规则定义动画的关键帧。关键帧描述了动画在不同时间点的样式。from {/* 动画开始时的样式 */to {/* 动画结束时的样式 */​0% {/* 动画开始时的样式 */50% {/* 动画中间的样式 */100% {/* 动画结束时的样式 */​。
CSS的常用动画
文摘资讯
05-02 383
CSS实现开关<style> .check-wrap { margin-bottom: 20px; text-align: center; } .switch { position: absolute; clip: rect(0, 0, 0, 0); } label { margin-righ...
常用CSS动画
easyboot的专栏
12-07 228
这里面有常用的CSS动画 https://daneden.github.io/animate.css/
前端，可视化大屏，纯css3+svg动画实现流转动画
06-21
以下是关于这些知识点的详细说明： 1. **CSS3**: CSS3是层叠样式表的最新版本，它提供了许多新特性，如选择器增强、过渡（Transitions）、动画（Animations）、多列布局、Flexbox和Grid等。在这个项目中，CSS3的...
前端大厂最新面试题-CSS 面试知识点总结.docx
06-06
以下是一些主要的CSS面试知识点的详细解释： 1. **CSS 盒子模型**：标准的CSS盒子模型包括内容(content)、内边距(padding)、边框(border)和外边距(margin)，总宽度 = content宽度 + padding左右 + border左右 + ...
前端基础知识总结---CSS篇
Web前端开发工程师
09-09 1954
本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！ 目录 1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ 2.CSS 选择符有哪些？ 3.::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 4.伪类与伪元素的区别 5.CSS 中哪些属性可以继承？ 6.CSS 优先级算法如何计算？ 7.关于伪类 LVHA 的解释? 8.CSS3 新增伪类有那些？ 9.如何居中 div？ 10.disp
html和css知识点总结.docx
04-03
HTML 和 CSS 是构建网页的基本语言，它们在...这些只是 HTML 和 CSS 的一部分基础知识，实际应用中还涉及到更复杂的布局、响应式设计、浏览器兼容性以及性能优化等方面。持续学习和实践是成为优秀前端开发者的关键。
前端学习之CSS动画
qq_52230126的博客
11-02 334
CSS动画相关笔记 1.2D转换–translate translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。 scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数 skew()方，包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜。 skewX(&...
css常见动画
weixin_43411214的博客
04-16 902
【代码】css常见动画。
前端学习之css动画
qq_45839045的博客
01-02 345
在css3中我们可以用动画属性来制作一些简单的特效，包括2d和3d。 不论是2d还是3d的特效我们都可以用transfrom属性来实现。 2d和3d都包含旋转和位移和缩放这三种基本属性。 2d的用法 位移translate transform:translate(X,Y) x表示在水平方向位移的距离，y表示在垂直方向位移的距离。**注意：X轴水平向右为正，向左为负，Y轴垂直向下为正，向上为负；**若取值为百分比，按盒子自身尺寸计算。 旋转rotate transform:rotate(angle(deg))
CSS常用的动画
新阿巴阿巴
09-22 263
目录一、transform（平移、缩放、旋转）1. 设置元素的中心2. 平移3. 缩放4. 旋转5. 复合写法二、透视和3D效果1. 透视2. 开启盒子子元素的3D效果三、过渡四、动画1. 动画的使用2. 动画的复合写法 一、transform（平移、缩放、旋转） 1. 设置元素的中心 transform-origin: x y; -- 参数 x 和 y 用空格隔开 -- 针对缩放、旋转 -- 默认的中心点是元素的中心(50% 50%),等价于center center -
CSS 的常用动画
不谷的博客
03-10 110
CSS 的常用动画
css 常见的动画效果
前端Cocoko
08-19 4079
[style] .container { position: absolute; width: 200px; height: 200px; padding: 5px; border: 5px solid rgb(118,218,255); top: 50%; left: 50%; transform: transla...
CSS3常用动画
刚刚好
07-21 826
CSS3常用动画
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

疆子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值