transform及animation属性及应用

最新推荐文章于 2023-01-16 21:26:33 发布
最新推荐文章于 2023-01-16 21:26:33 发布
阅读量364 收藏
点赞数 1
分类专栏： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/w_y_d123456/article/details/63252944
版权
css 同时被 2 个专栏收录
6 篇文章 0 订阅
订阅专栏
html
6 篇文章 0 订阅
订阅专栏

CSS3 tranform的含义是：改变，使变形，转换。

 transform的属性包括：rotate（旋转deg）/skew(倾斜deg) /scale(比例) /translate(位移px)  .分别还有x,y之分。

例子：

.demo_transform5{-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg) skew(-20deg) scale(3.0) translate(100px,0);-moz-transform:rotate(360deg) skew(-20deg)scale(3.0) translate(100px,0)}

animation属性是一个简写属性，用于设置六个动画属性：

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
注释：请始终规定animationm-duration属性，否则时长为0，就不会播放动画了。
默认值：none 0 ease 0 1 normal 
继承性：no
js语法：object.style.animation="mymove 5s infinite"

例子：
<html>


<head>


  <meta charset="UTF-8">


  <title>3D纸片折叠动画 </title>


    <link type="text/css" />
<style>
         @-webkit-keyframes anim {
  to {
    -webkit-transform: rotateZ(0) rotate(360deg);
    transform: rotateZ(0) rotate(360deg);
  }
}
@keyframes anim {
  to {
    -webkit-transform: rotateZ(0) rotate(360deg);
    transform: rotateZ(0) rotate(360deg);
  }
}
body {
  background: black;
  overflow: hidden;
}


.wrap {
  position: relative;
  width: 500px;
  height: 500px;
  margin: 0 auto;
}
.wrap .staircase {
  position: relative;
  width: inherit;
  height: inherit;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-perspective: 1000px;
  perspective: 1000px;
  -webkit-transform: translate3d(200px, 200px, -500px);
  transform: translate3d(200px, 200px, -500px);
}
.wrap .staircase .stair {
  top: 0;
  left: 0;
  position: absolute;
  width: 40px;
  height: 200px;
  /*       background: black; */
  opacity: .6;
  -webkit-transform-origin: top left;
  -ms-transform-origin: top left;
  transform-origin: top left;
  -webkit-animation: anim 10s infinite alternate;
  animation: anim 10s infinite alternate;
  -webkit-box-shadow: 0px 1px 3px 3px black;
  box-shadow: 0px 1px 3px 3px black;
}


.stair:nth-child(1) {
  -webkit-transform: translateZ(-25px) rotate(13deg);
  transform: translateZ(-25px) rotate(13deg);
  top: 20px;
  background: #40bf42;
}


.stair:nth-child(2) {
  -webkit-transform: translateZ(-50px) rotate(26deg);
  transform: translateZ(-50px) rotate(26deg);
  top: 20px;
  background: #40bf44;
}


.stair:nth-child(3) {
  -webkit-transform: translateZ(-75px) rotate(39deg);
  transform: translateZ(-75px) rotate(39deg);
  top: 20px;
  background: #40bf46;
}


.stair:nth-child(4) {
  -webkit-transform: translateZ(-100px) rotate(52deg);
  transform: translateZ(-100px) rotate(52deg);
  top: 20px;
  background: #40bf48;
}
</style>
</head>
<body>
  <div class="wrap">
  <div class="staircase">
  
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
    <div class="stair"></div>
  
  
  </div>
</div>


<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">


</div>


</body>
</html>

w_y_d123456
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3中动画属性transform、transition和animation属性的区别
09-27
**animation属性** `animation`属性是`transition`的扩展，提供了更强大的动画控制能力。它结合了`transition`的特性，并引入了关键帧（`@keyframes`）的概念，允许自定义动画的每一帧。例如： ```css @keyframes ...
CSS3 旋转木马图片动画(transform+Animation)
所以的博客
08-31 587
知识点： - perspective 透视效果 - transform-style：preserve-3d 3D呈现效果 （添加在父类） - animation：name time infinite(动画无限循环播放) - transform：rotate translate
animation+transform实现轨迹平移
还没想好
08-24 5564
之前通过animation+transtion实现平移，transtion通过定义left和top值来移动； 其中 animation是定义一个动画，可以通过百分数来定义每个时刻的状态 基本的需要：  -webkit-animation-name: Aname; -webkit-animation-duration: 30s; 本次操作实现，太阳落山的轨迹，用了transform属性，可...
animation、transition和transform动画属性详解
weixin_45369499的博客
10-30 1365
关于上篇博文介绍回流和重绘，我们知道了应该尽量减少回流，或是重绘代替回流来达到优化的效果。优化中又不可避免地涉及到了animation动画属性造成页面加载延迟等相关的问题，于是专门写了这么一篇博文来介绍css3中的动画属性。 css中的与动画相关的属性一共有三： 　　animation、transition和transform属性。其中animation属性和transition属性能够实现动画效...
10-animation
冰霜的博客
08-31 394
动画 ​ 由于该技术的规范还没有稳定，在使用前要先确保浏览器对其兼容性。 Animations是css3的一个模块，使用keyframes定义如何随着时间的移动改变CSS的属性值，可以通过指定它们的持续时间，重复次数，如何重复来控制关键帧的行为。Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）。不需要了解任何Js技术即可完成动画的制作 -过渡和动画之间的异同 1.1不同点 过渡必须人为的触发才会执行动画 动画不需要人为的触发就可以
tranform(css3动画属性)
weixin_51058957的博客
01-16 258
/在x轴移动100px ,在y轴移动50px。//是在x轴方向 上移动500px。//是在y轴方向上移动500px。tranform的属性一般加在class类名中， 只需要添加或者删除类名来实现动画的效果。//在x长轴不变，y轴缩小到原来的一半。//在元素的中心点旋转45度。//缩放的数值 最大是1,最小是。//属性值为到360度。
CSS3中Animation动画属性用法详解
09-24
在CSS3中，Animation属性是实现动态效果的关键，它允许我们创建复杂的动画序列，而无需依赖JavaScript或者其他外部库。本文将深入讲解CSS3中的Animation属性及其用法。 首先，我们来了解一下`@keyframes`规则，这是...
CSS3中Animation属性的使用详解
09-24
CSS3的Animation属性是网页设计中用于创建动态效果的强大工具，它允许开发者精确地控制元素在动画过程中的各个阶段的行为。Animation属性结合了关键帧（Keyframes）的概念，使得动画的控制更为细腻，超越了简单过渡...
CSS3转换功能transform主要属性值分析及实现分享
09-25
同时，CSS3的`transition`和`animation`属性可以与`transform`结合，创建平滑的过渡和动画效果。 以下是一个简单的例子，演示如何使用`transform`属性创建一个旋转的正方形： ```css .box { width: 100px; ...
CSS3 Animation属性发光按钮代码.zip
07-11
这个“CSS3 Animation属性发光按钮代码.zip”文件内包含的是一段利用CSS3动画效果实现的发光按钮代码。由于Firefox浏览器对某些CSS3动画的兼容性问题，这个代码可能在Firefox上无法完美运行。 CSS3动画是通过`@...
Transform总结
zhaoguxiaoshi的博客
10-10 717
Transform总结 原文转自：http://www.jianshu.com/p/05eea9ba5baa CSS3动画的属性主要分为三类：transform、transition以及animation。 Transform:(css3 2D 转换) 注意：这些效果叠加时，中间用空格隔开 作用：能够对元素进行移动、缩放、转动、拉长、拉伸 转换：使元
CSS3动画进阶：tranform与keyframes 组合动画
supremeJacob的博客
11-19 820
场景 原型链接： https://qiniu-static.moyuvedio.com/video/magicBox.MP4 公司最近有个盲盒活动，要求h5链接上需要放个盲盒动画，实际可以使用gif或json代替，但为了想挑战下自己，又想减轻小姐姐的设计任务，这次活动的动画决定全用原生H5支持 技术分析 此次动画涉及：移动、渐变、漂浮、旋转，基本上都是属于一些常规的动画，并没有涉及到细节动画，所以用原生肯定是没有问题的，唯一的一个难点就在于不同动画间需要衔接，而且要衔接得很自然 技术考虑：CSS3之 ani
animation属性详解
Yugoup的博客
08-22 1662
写在前面 css3的animation可以实现很多炫酷的动画，让自己的网页看起来更加生动灵活，下面，来看一下都有些什么玩意属性。 动画属性 首先，我们看一下具体写法 animation: name duration timing-function delay iteration-count direction fill-mode play-state; 具体化表现形式 animation:myA...
一文让你由浅入深的理解Transform模型
li15006474642的博客
02-19 1万+
简单解释 Transform是在神经网络之后又发展的一个比较流行的深度模型，今天就给大家解释一下这个模型的原理。首先先抛出一个问题？神经网络有哪些缺点，或者是LSTM有什么不足之处以，至于让我们又发展了Transform这个深度模型？在这里我自己总结出了几点： 1、 难解释性，神经网络的一个通病，做出来的好坏都比较难解释， 2、 梯度消失和梯度爆炸的问题。 3、 LSTM只能串行计算，不能并行，因...
Transform详解
热门推荐
霜叶的博客
08-18 10万+
1、Transform简介 Transformer中抛弃了传统的CNN和RNN，整个网络结构完全是由Attention机制组成。更准确地讲，Transformer由且仅由self-Attenion和Feed Forward Neural Network组成。一个基于Transformer的可训练的神经网络可以通过堆叠Transformer的形式进行搭建，作者的实验是通过搭建编码器和解码器各6层，总共12层的Encoder-Decoder，并在机器翻译中取得了BLEU值得新高。 2、Transform结构
Transform模型原理
chen_yiwei的博客
03-19 1万+
文章目录整体框架Position EmbeddingScaled Dot-Product AttentionMulti-Head Attention总结模型Position EmbeddingEncoder与DecoderSoftmax动画过程 本文参考: 一步步解析Attention is All You Need 细讲 | Attention Is All You Need 对Attentio...
Transform【变形】属性
精彩人生
02-11 6063
来源：http://www.w3cplus.com/content/css3-transform 今天开始我们一起来学习有关于CSS3制作动画的几个属性：变形(transform)、转换(transition)和动画(animation)等更高级的CSS3技术。本文主要介绍的是这三个属性之中的第一个──变形transform。 Transform字面上就是变形，改变的意思。在CSS3中tr
animation几个比较好玩的属性(alternate,及animation-fill-mode)
SYYling的专栏
07-22 7414
div { width:100px; height:100px; background:red; position:relative; animation:mymove 5s infinite; -moz-animation:mymove 5s infinite; /* Firefox */ -webkit-animation:mymove 5s infinite; /* Safa
常见算法介绍和算法刷题（含解析与代码）.txt
最新发布
07-15
常见算法介绍和算法刷题（含解析与代码） 算法介绍 算法是一种解决问题的方法，通过使用算法，我们可以将问题转换为计算机可以执行的指令。常见的算法包括排序算法、搜索算法、图算法、动态规划算法等。 排序算法 1. 冒泡排序（Bubble Sort） 冒泡排序是一种简单的排序算法，它通过重复地走访要排序的数据，来找出其中最小的数据，并把它移到最前面。 示例代码： def bubble_sort(arr): n = len(arr) for i in range(n-1): for j in range(0, n-i-1): if arr[j] > arr[j+1]: arr[j], arr[j+1] = arr[j+1], arr[j] return arr 2. 快速排序（Quick Sort） 快速排序是一种常用的排序算法，它通过选择一个 pivot 元素作为枢纽，并将其他元素分配到枢纽的两侧。 示例代码： def quick_sort(arr): if len(a
css+animation属性
12-25
CSS的animation属性可以用来创建动画效果。它允许我们定义一个动画序列，该序列将在指定的时间内逐渐改变元素的样式。 以下是一个使用animation属性创建动画的示例： ```css @keyframes spin { 0% { transform: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值