CSS基础学习——动画

已于 2023-02-03 10:32:18 修改
阅读量1.4w 收藏 23
点赞数 2
分类专栏： CSS 文章标签： css3 css animation
于 2020-08-26 23:01:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41890177/article/details/108246703
版权

一、CSS3 2D变形（利用Transfrom方法）

1、rotate（angle）
元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: rotate(30deg) ;
        margin: 200px auto;
    }
</style>
<body>
    <div>

    </div>
</body>
</html>

效果如图
在这里插入图片描述
如果当rotate里面的值为负数时，比如ratate（-10deg），效果如图：
在这里插入图片描述

2、 translate(x,y)方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。也就是相对于页面左部和顶部的距离

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: translate(20px, 20px);
    }

</style>
<body>

    <div></div>
</body>
</html>

效果如下
在这里插入图片描述
初次之外还有其他的参数

transform: translate(200px);
如果只带一个参数，这个参数代表的是x方向位移值，y方向位移为0

transform: translateX(200px);
对X方向移动

transform: translateY(200px);
对Y方向移动

3、scale() 方法
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: scale(2,0.5);
        margin: 20px auto;
    }

</style>
<body>

    <div></div>
</body>
</html>

效果如图
在这里插入图片描述
可以看到，长边变为了原来的两倍，宽边变为了原来的0.5倍

transform: scale(1.5)；x轴和y轴都放大1.5倍
transform: scaleX(1.5)；x轴放大1.5倍
transform: scaleY(1.5)；y轴放大1.5倍
transform-origin: left top;改变中心点位置为左上角，当然还可以自由搭配，右下（right bottom），右上（right top）

4、 skew() 方法
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        transform: skew(30deg,30deg);
        margin: 200px auto;
    }

</style>
<body>

    <div></div>
</body>
</html>

效果如图

在这里插入图片描述
意思就是：围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 30 度。可能看起来比较抽象

transform: skew(230deg);如果只带一个参数，只有x轴方向的扭曲
transform: skewX(230deg); 对X轴进行翻转
transform: skewY(230deg); 对Y轴进行翻转

其实还是很好理解的，比如两个图叠加在一起

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .demo{
        width: 200px;
        height: 200px;
        margin: 200px auto;
        border: 1px solid #000;
    }

    .box{
        width: 200px;
        height: 200px;
        border: 1px solid red;
        transform: skew(5deg,0deg);
    }

</style>
<body>
<div class="demo">
    <div class="box"></div>
</div>

</body>
</html>

在这里插入图片描述
可以看到，所谓的X轴翻转，其实就是x方向的移动，上面的线向左移动5px，下面的线向右移动5px，加入Y也一样
比如：transform: skew(0deg,5deg);
在这里插入图片描述
左边的线向上移动5px，右边的线向下移动5px，同时改变时 transform: skew(5deg,5deg);

在这里插入图片描述
最好记的方式就是对角线的同时移动，左上右下是排斥，左下右上是吸引

5、matrix() 方法
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。

如题：将div右移100px,下移200px，旋转30度，x轴缩放1.5倍，y轴缩放2倍。

（1）transform: translate(100px, 200px) rotate(30deg) scale(1.5, 2);

（2）transform: matrix(1.299, 0.75, -1, 1.732, 100, 200)

计算方法
在这里插入图片描述
效果如图
在这里插入图片描述

6、transform-origin 属性
允许你改变被转换元素的位置
语法： transform-origin: x-axis y-axis z-axis;
属性值：
x-axis ：定义视图被置于 X 轴的何处。可能的值：left，center，right，length，%。
y-axis ：定义视图被置于 Y 轴的何处。可能的值：top，center，bottom，length，%。
z-axis ：定义视图被置于 Z 轴的何处。可能的值：length。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-origin</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .demo{
            width: 200px;
            height: 200px;
            margin: 200px auto;
            border: 1px solid #000;
        }
        .box{
            width: 200px;
            height: 200px;
            background-color: #f00;
            transform: rotate(60deg);
            transform-origin: right bottom;
        }
    </style>
</head>
<body>
<div class="demo">
    <div class="box"></div>
</div>
</body>
</html>

效果如图
在这里插入图片描述
形象的来说，就是规定你从哪个角开始旋转，比如规定右下角旋转，则图形以右下角为旋转角，顺时针旋转60°

二、CSS3 3D变形

1、perspective属性
perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注释：perspective 属性只影响 3D 转换元素。
语法： perspective: number|none;
属性值：
number ：元素距离视图的距离，以像素计。
none ：默认值。与 0 相同。不设置透视

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>perspective</title>
    <style>
        .father{
            position: relative;
            width: 200px;
            height: 200px;
            padding: 10px;
            margin: 200px auto;
            border: 1px solid #999;
            perspective: 150px;
        }
        .son{
            width: 100px;
            height: 50px;
            padding: 50px;
            position: absolute;
            border: 1px solid #f00;
            background-color: #0ff;
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
<div class="father">
    <div class="son"></div>
</div>
</body>
</html>

效果如图
在这里插入图片描述

2、trasform-style属性
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释：该属性必须与 transform 属性一同使用。
语法： transform-style: flat|preserve-3d;
属性值：
flat ：子元素将不保留其 3D 位置。
preserve-3d ：子元素将保留其 3D 位置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-style</title>
    <style>
        .wrapper{
            width: 200px;
            height: 100px;
            margin: 200px auto;
        }
        .div1,.div2{
            width: 200px;
            height: 100px;
            padding: 20px;
        }
        .div1{
            background-color: #f00;
            transform: rotateY(30deg);
            transform-style: preserve-3d;

        }
        .div2{
            background-color: #655fff;
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
<div class="wrapper">
    <div class="div1">div1
        <div class="div2">div2</div>
    </div>
</div>
</body>
</html>

效果如图
在这里插入图片描述

3、CSS3过渡
transition 属性是一个简写属性，用于设置四个过渡属性：
transition-property：规定设置过渡效果的 CSS 属性的名称。
transition-duration：规定完成过渡效果需要多少秒或毫秒。
transition-timing-function：规定速度效果的速度曲线。
transition-delay：定义过渡效果何时开始。
注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产生过渡效果。
语法： transition: property duration timing-function delay;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡动画</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            position: relative;
            border: 1px solid #eee;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 100px;
            top: 100px;
            transform: rotate(0deg);
            transition-property: all;
            transition-duration: .8s;
        }
        .box:hover .demo{
            left: 500px;
            width: 300px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html>

或者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transition过渡动画</title>
    <style>
        .box{
            width: 100%;
            height: 300px;
            position: relative;
            border: 1px solid #eee;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            left: 100px;
            top: 100px;
            transform: rotate(0deg);
            transition: left 2s ease 500ms, width 5s ease-in-out;
        }
        .box:hover .demo{
            left: 500px;
            width: 300px;
            transform: rotate(45deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html>

可以自行实验一下

4、CSS3动画

使用@keyframes
通过 @keyframes 规则，您能够创建动画。
创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中，您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间，或者通过关键词 “from” 和 “to”，等价于 0% 和 100%。
0% 是动画的开始时间，100% 动画的结束时间。
为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画</title>
    <style>
        .box{
            width: 100%;
            height: 800px;
            position: relative;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            /*animation: move 5s ease-in-out infinite alternate ;*/
            -webkit-animation: move 5s ease-in-out 500ms 2 alternate ;
            -moz-animation: move 5s ease-in-out 500ms 2 alternate ;
            -ms-animation: move 5s ease-in-out 500ms 2 alternate ;
            -o-animation: move 5s ease-in-out 500ms 2 alternate ;
            animation: move 5s ease-in-out 500ms 2 alternate ;
        }
        @keyframes move {
            0%{
                left: 100px;
            }
            45%{
                left: 200px;
                top: 100px;
                background-color: #00f;
            }
            75%{
                left: 400px;
                top: 300px;
                background-color: #64ff77;
            }
            100%{
                left: 500px;
                top: 500px;
                background-color: #ff4975;
            }
        }
    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html>

或者

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>关键帧动画</title>
    <style>
        .box{
            width: 100%;
            height: 800px;
            position: relative;
        }
        .demo{
            width: 100px;
            height: 100px;
            background-color: #ff0000;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            border-radius: 50%;
            position: absolute;
            /*animation: move 5s ease-in-out infinite alternate ;*/
            -webkit-animation: move 5s ease-in-out 500ms 2 alternate ;
            -moz-animation: move 5s ease-in-out 500ms 2 alternate ;
            -ms-animation: move 5s ease-in-out 500ms 2 alternate ;
            -o-animation: move 5s ease-in-out 500ms 2 alternate ;
            animation: move 5s ease-in-out 500ms 2 alternate ;
        }
        @keyframes move {
           from{
                left: 100px;
            }
            to{
                left: 500px;
                background-color: #00f;
            }
        }

    </style>
</head>
<body>
<div class="box">
    <div class="demo"></div>
</div>
</body>
</html>

animation:move 5s ease-in-out 500ms 2 alternate

move：表示animation-name ，动画名称

5s：表示animation-duration，时长

ease-in-out：表示animation-timing-function 规定动画的速度曲线
（
除此以外还有：
linear：动画从头到尾的速度是相同的。
ease：默认。动画以低速开始，然后加快，在结束前变慢。
ease-in：动画以低速开始。
ease-out：动画以低速结束。
ease-in-out：动画以低速开始和结束。
）

500ms：表示animation-delay，规定在动画开始之前的延迟。

2 ：表示animation-iteration-count，规定动画应该播放的次数。

alternate：表示animation-direction，规定是否应该轮流反向播放动画，如果 animation-direction 值是 “alternate”，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放。。

梦起孟心
关注
  • 2
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
你还不知道css的旋转效果怎么实现？来这里看看吧
Wod_7的博客
05-22 1万+
删除 重试 复制 旋转效果是CSS中最基础而且最常用的效果之一。它在设计中拥有着广泛的应用，可以用于改变图标、旋转图片、达到复杂的动画效果等等。在这篇文章中，我们将深入讨论如何在CSS中实现旋转效果，从旋转图标到3D旋转，让我们开始吧！
动画css ---无限旋转
热门推荐
幸福有多远
08-11 5万+
前言： 读取数据后，需要根据状态显示对应的图片 如果是状态为运行中，图片对应的icon图片需要沿中心点旋转起来 .logo{ width:20px; height: 20px; background: red; -webkit-animation:haha1 .8s linear infinite; } @-webkit-key...
CSS动画技术（css-animation）
Zarathusa的博客
05-23 1302
CSS Transition是一种用于实现元素状态变化平滑过渡的CSS技术。它允许你在元素从一种状态到另一种状态的过渡中添加动画效果，例如改变颜色、大小、位置等属性。过渡属性：在transition属性中指定需要过渡的属性（如颜色、宽度、高度等）。持续时间：使用时间单位（秒或毫秒）定义过渡的持续时间，控制动画的速度。缓动函数：指定过渡效果的缓动函数，它定义了动画过程中属性值的变化速度。过渡属性是你希望在元素状态变化时产生动画效果的CSS属性。这些属性定义了在过渡期间发生变化的元素属性。
css旋转动画
weixin_47195717的博客
04-28 120
css旋转动画
CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate）
极客神殿
08-16 3764
在CSS3中，可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理，本文将对此做详细介绍。 一.旋转 rotate 用法：transform: rotate(45deg); 共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。 CSS3属性transform详解之（旋转:rotate,缩放:scale,倾斜:skew,移动:translate） 二.缩放 scale 用法：transform: scale(0.
animate.css——页面动画
03-11
animate.css
HTML+CSS大作业——vivo官方商城
07-08
【HTML+CSS大作业——vivo官方商城】这个项目是一个基于HTML和CSS技术构建的模拟vivo官方网站的页面设计。这个任务旨在让学生掌握基础的网页布局、元素样式控制以及响应式设计等关键技能。 HTML（HyperText Markup ...
HTML基础必看——全面了解css样式表
09-28
HTML中的CSS样式表是用于美化和布局网页的重要工具。CSS，全称为Cascading Style Sheets，叠层样式表，它...随着经验的积累，你还可以学习更高级的概念，如浮动、响应式设计、过渡和动画，进一步提升你的网页设计技能。
CSS3图片动画.zip
08-09
首先，我们要理解CSS3动画的基础——`@keyframes`规则。`@keyframes`定义了一个动画的过程，它由多个关键帧组成，每个关键帧代表了动画过程中的一个状态。例如，我们可以定义一个名为`logoAnimation`的动画： ```...
html+css基础学习入门教程标记语言——网页应用CSS样式
01-08
前端开发是一个不断发展的领域，随着浏览器对CSS新特性的支持度提升，开发者需要不断学习和掌握新的技巧，以创建更高效、更美观的网页。无论你是初学者还是有一定经验的开发者，了解并熟练运用这些CSS应用方法都至关...
animation.css实现动画旋转特效.zip
07-04
animation.css实现动画旋转特效是一款基于CSS3实现的酷炫的动画旋转特效代码
【CSS3】CSS3 2D 转换 - rotate 旋转 ③ ( 使用 transfrom-origin 设置旋转中心点 | 使用 方位词 / 百分比值 / 像素值 设置旋转中心点 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
08-05 5393
一、使用 transfrom-origin 设置旋转中心点 二、代码示例 - 使用 transfrom-origin 设置旋转中心点 1、代码示例 - 使用方位词设置旋转中心点 2、代码示例 - 使用百分比设置旋转中心点 3、代码示例 - 使用像素值设置旋转中心点
CSS3 动画，鼠标移上去，div 旋转、放大、缩小、移动
2401_84091321的博客
04-07 588
效果一：360°旋转 修改rotate(旋转度数).img1 {效果二：放大 修改scale(放大缩小的值).img2 {效果三：旋转放大 修改rotate(旋转度数) scale(放大值).img3 {效果四：上下左右移动 修改translate(x轴,y轴).img4 {360°旋转放大旋转放大上下左右移动功能：初始化功能描述作者：zichen-jiang。
旋转、缩放、移动：掌握CSS Transform动画的终极指南！
云端源想的博客
04-11 2126
CSS变形动画是利用CSS3的transform属性创建的动画效果。它可以使元素旋转、缩放、倾斜甚至翻转，让静态的网页元素动起来，为用户带来更加丰富的交互体验。
CSS实现图像旋转动态效果
小楠哥的博客
02-04 895
例如向一个名为img01的类选择器添加旋转样式，在animation属性内设置，旋转动画，rotate为动画名（自定义的名称），6s为周期，linear为线性渐变（取消渐变效果），infinite为无限循环，即每轮动画结束后自动进入下一轮，实现无限旋转效果。 .img01{ display: block; animation: rotate 6s linear infinite; } @keyframes rotate{ 0%{ transform: rotateZ(0deg
css3动画旋转动画_使用CSS动画旋转单词
culiao9310的博客
09-29 227
css3动画旋转动画View demo 查看演示Download Source 下载源In today’s tutorial we’ll create another typography effect. The idea is to have some kind of sentence and to rotate a part of it. We’ll b...
Css3旋转的效果
weixin_44543312的博客
01-18 1万+
开发工具与关键技术：DW rotate()、@keyframes 作者：梁茵茵 撰写时间：2019年1月18日 1、在Css3中用rotate()函数通过指定的角度参数使元素相对原点进行旋转来实现的画效果时，你会发现当它在旋转的过程中是不会有停顿的现象，会一直旋转到设置的度数时才会自动停下来。（代码如下：） 2 、在Css3中使用关键帧@keyframes创建的动画也可以达到旋转的效...
css实现元素翻转（不是旋转）
大白兔
04-14 1万+
有时候我们要实现元素的垂直或者水平翻转，尤其是图片的翻转，两张对称的图片，可以用两张图片来解决这个问题，那么其他的元素呢？而且存两张图片并不是上上策，如何用代码实现呢？ CSS3提供了transform属性，实现方法如下：水平翻转：transform: scale(-1,1);垂直翻转：transform: scale(1,-1);那么问题来了，transform:scale(x,,y)不是缩放吗
利用css3使元素旋转角度
icewizardry的专栏
12-11 7784
firefox / webkit-moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); iefilter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 这里的参数可以是0，1，2，3，没有4，要是是4啊，5啊之类的，图片就不旋转了。旋转的角度只要将这些数值
CSS从入门到精通——动画代码
最新发布
07-05
CSS 动画是从基础开始学习的，它能让静态的网页元素变得生动有趣。以下是入门到精通的一些关键步骤： 1. **理解基本语法**： - `@keyframes`: 定义动画的关键帧，规定了动画的不同状态及其对应的时间点。 - `animation-name` 和 `animation-duration`: 分别指定动画名称和持续时间。 - `animation-timing-function`: 控制动画的速度曲线，如线性、匀速、加速等。 - `animation-delay`: 设置动画何时开始播放。 - `animation-iteration-count` 和 `animation-direction`: 分别控制动画播放次数和方向。 2. **实际操作示例**： ```css @keyframes slideIn { from {transform: translateX(-100%);} to {transform: translateX(0);} } .element { animation: slideIn 2s ease; } ``` 3. **高级技巧**： - 使用百分比完成度 (`to` 关键帧) 创建更复杂的路径动画。 - 组合动画效果，如同时改变位置、大小和颜色。 - 利用CSS动画性能优化技术，如硬件加速和避免不必要的重绘。 4. **响应式设计**： 确保动画在不同设备和屏幕尺寸下能正常工作。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值