CSS基础学习——动画

article/2025/11/3 16:36:39

一、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 等等）向后播放。。


http://chatgpt.dhexx.cn/article/7t4hGxnL.shtml

相关文章

深度学习与神经网络

深度学习与神经网络

文章目录 引言1. 神经网络1.1 什么是神经网络1.2 神经元1.3 多层神经网络 2. 激活函数2.1 什么是激活函数2.2 激活函数的作用2.3 常用激活函数解析2.4 神经元稀疏 3. 设计神经网络3.1 设计思路3.2 对隐含层的感性认识 4. 深度学习4.1 什么是深度学习4.2 推理和训练4.3 训练的相…
阅读更多...
【深度学习】你心目中 idea 最惊艳的深度学习领域论文是哪篇？

【深度学习】你心目中 idea 最惊艳的深度学习领域论文是哪篇？

科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名。 我们来看看各路大神是怎么评价的。 论文链接 https://arxiv.org/abs/1410.3916 关于计算机视觉领域&#xff0c;taokongcn分享了几个重要的工作。 1. Fully Convolutional Netw…
阅读更多...
深度学习笔记(三)Cv方向

深度学习笔记(三)Cv方向

一.批量归一化和残差网络 批量归一化 对输入的标准化&#xff08;浅层模型&#xff09; 处理后的任意一个特征在数据集中所有样本上的均值为0、标准差为1。 标准化处理输入数据使各个特征的分布相近。 批量归一化&#xff08;深度模型&#xff09; 利用小批量上的均值和标准差…
阅读更多...
R-C3D:用于时间活动检测的区域3D网络

R-C3D:用于时间活动检测的区域3D网络

论文&#xff1a;R-C3D: Region Convolutional 3D Network for Temporal Activity Detection&#xff08;2017&#xff09; 主要贡献 1.提出一个包括活动候选区和任意长度活动的分类的端到端模型。如下图所示 2.提出在候选区生成和分类部分共享全卷积C3D特征&#xff0c;实现了…
阅读更多...
[翻译]循环神经网络不可思议的有效性

[翻译]循环神经网络不可思议的有效性

[翻译]循环神经网络不可思议的性能 循环神经网络&#xff08;RNN&#xff09;具有神奇的功能。我还记得当我训练我的第一个关于图像字幕的循环网络。在训练了几十分钟后&#xff0c;模型的雏形&#xff08;使用相当随意选择的超参数&#xff09;开始产生对图像有意义的描述&am…
阅读更多...
NNDL 作业8：RNN - 简单循环网络

NNDL 作业8：RNN - 简单循环网络

目录 1. 使用Numpy实现SRN 2. 在1的基础上&#xff0c;增加激活函数tanh 3. 分别使用nn.RNNCell、nn.RNN实现SRN 4. 分析“二进制加法” 源代码&#xff08;选做&#xff09; 5. 实现“Character-Level Language Models”源代码&#xff08;必做&#xff09; 6. 分析“序…
阅读更多...
elman神经网络 python实现_使用深度神经网络进行风格转换（Python实现）

elman神经网络 python实现_使用深度神经网络进行风格转换（Python实现）

在论文(Image Style Transfer Using Convolutional Neural Networks)中(https://www.cv-foundation.org/openaccess/content_cvpr_2016/papers/Gatys_Image_Style_Transfer_CVPR_2016_paper.pdf)&#xff0c;风格转换使用了19层VGG网络中的特征&#xff0c;它由一系列卷积层和池…
阅读更多...
深度学习知识图谱笔记

深度学习知识图谱笔记

最近花了几天时间对目前常用神经网络模型(backbone)&#xff0c;生成对抗GAN&#xff0c;模型压缩&#xff0c;NPL&#xff0c;距离计算&#xff0c;优化器进行了分类整理&#xff0c;用简短的几句话对相关特性进行了总结描述&#xff0c;如有误请指正&#xff0c;方便强化记忆…
阅读更多...
深度强化学习综述论文 A Brief Survey of Deep Reinforcement Learning

深度强化学习综述论文 A Brief Survey of Deep Reinforcement Learning

A Brief Survey of Deep Reinforcement Learning 深度强化学习的简要概述 作者&#xff1a; Kai Arulkumaran, Marc Peter Deisenroth, Miles Brundage, Anil Anthony Bharath 文章目录 摘要 Abstract1. 引言 Introduction2. 奖励驱动行为 Reward-Driven Behavior2.1. 马尔科夫…
阅读更多...
深度学习领域，最惊艳的论文！

深度学习领域，最惊艳的论文！

科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名&#xff0c;以下介绍了一些知乎作者心中白月光般存在的深度学习领域论文&#xff0c;看看是否你们拥有同样心目中的The one。 提名一 ResNet和Transformer 作者&#xff1a;王…
阅读更多...
深度学习领域，你心目中 idea 最惊艳的论文是哪篇？

深度学习领域，你心目中 idea 最惊艳的论文是哪篇？

点击上方“视学算法”&#xff0c;选择加"星标"或“置顶” 重磅干货&#xff0c;第一时间送达 来源丨知乎问答&#xff08;回答均已授权&#xff09; 编辑丨极市平台 科研路上我们往往会读到让自己觉得想法很惊艳的论文&#xff0c;心中对不同的论文也会有一个排名&a…
阅读更多...
深度学习：STGCN学习笔记

深度学习：STGCN学习笔记

目录标题 基于图神经网络的图分类问题GCN在行为识别领域的应用主要任务研究思路 ST-GCN(SpatialTemporal Graph Convolutional Networks for Skeleton-Based Action Recognition)解读原论文解决问题主要贡献核心思想简介OpenPose 预处理基于人体关键点构造graph构造单帧graph&a…
阅读更多...
神经网络中神经元是什么_是什么使神经网络脆弱

神经网络中神经元是什么_是什么使神经网络脆弱

神经网络中神经元是什么 What do the images below have in common? 以下图片有什么共同点&#xff1f; Most readers will quickly catch on that they are all seats, as in places to sit. It may have taken you less than a second to recognize this common characteri…
阅读更多...
卷积神经网络超详细介绍

卷积神经网络超详细介绍

文章目录 1、卷积神经网络的概念2、 发展过程3、如何利用CNN实现图像识别的任务4、CNN的特征5、CNN的求解6、卷积神经网络注意事项7、CNN发展综合介绍8、LeNet-5结构分析9、AlexNet10、ZFNet10.1 意义10.2 实现方法10.3 训练细节10.4 卷积网络可视化10.6 总结 11、VGGNet11.1 结…
阅读更多...
经典神经网络

经典神经网络

文章目录 第四章 经典网络解读4.1 LeNet-54.1.1 模型介绍4.1.2 模型结构4.1.3 模型特性 4.2 AlexNet4.2.1 模型介绍4.2.2 模型结构4.2.3 模型特性 4.3 ZFNet4.3.1 模型介绍4.3.2 模型结构4.3.3 模型特性 4.4 Network in Network4.4.1 模型介绍4.4.2 模型结构4.4.3 模型特点 4.5…
阅读更多...
卷积神经网络 CNN 学习

卷积神经网络 CNN 学习

什么是神经网络 人工神经网络&#xff08;artificial neural network&#xff0c;ANN&#xff09;&#xff0c;简称神经网络&#xff08;neural network&#xff0c;NN&#xff09;&#xff0c;是一种模仿生物神经网络的结构和功能的数学模型或计算模型。神经网络由大量的人工…
阅读更多...
【CS224W】(task7)标签传播与节点分类（semi-supervised）

【CS224W】(task7)标签传播与节点分类（semi-supervised）

note 对某一节点的标签进行预测&#xff0c;需要其本身特征、邻居的标签和特征。message passing的假设是图中相似的节点之间会存在链接&#xff0c;也就是相邻节点有标签相同的倾向。这种现象可以用homophily&#xff08;相似节点倾向于聚集&#xff09;、influence&#xff…
阅读更多...
4.经典网络

4.经典网络

文章目录 第四章 经典网络解读4.1 LeNet-54.1.1 模型介绍4.1.2 模型结构4.1.3 模型特性 4.2 AlexNet4.2.1 模型介绍4.2.2 模型结构4.2.3 模型特性 4.3 ZFNet4.3.1 模型介绍4.3.2 模型结构4.3.3 模型特性 4.4 Network in Network4.4.1 模型介绍4.4.2 模型结构4.4.3 模型特点 4.5…
阅读更多...
Python 深度学习

Python 深度学习

Pytorch 一 、深度学习概览1、工具篇2、流程介绍3、基础知识&#xff08;常用操作&#xff09;1、数据结构类型 4、常见名词概念 二、深度学习Pytorch1、神经网络1.1 如何构建神经网络1.2 核心组件 2、数据处理工具2.1 torchvision&#xff08;可视化处理工具&#xff09;2.1.1…
阅读更多...
神经网络与深度学习作业8：RNN - 简单循环网络

神经网络与深度学习作业8：RNN - 简单循环网络

1. 使用Numpy实现SRN import numpy as npinputs np.array([[1., 1.],[1., 1.],[2., 2.]]) # 初始化输入序列 print(inputs is , inputs)state_t np.zeros(2, ) # 初始化存储器 print(state_t is , state_t)w1, w2, w3, w4, w5, w6, w7, w8 1., 1., 1., 1., 1., 1., 1., 1.…
阅读更多...
推荐文章

Copyright @ 2022~2023