请选择 进入手机版 | 继续访问电脑版

马上加入IBC程序猿 各种源码随意下,各种教程随便看! 注册 每日签到 加入编程讨论群

C#教程 ASP.NET教程 C#视频教程程序源码享受不尽 C#技术求助 ASP.NET技术求助

【源码下载】 社群合作 申请版主 程序开发 【远程协助】 每天乐一乐 每日签到 【承接外包项目】 面试-葵花宝典下载

官方一群:

官方二群:

CSS动画,2D和3D模块

[复制链接]
查看2329 | 回复1 | 2019-10-12 10:23:41 | 显示全部楼层 |阅读模式

CSS3提供了丰富的动画类属性,使我们可以不通过flash甚至JavaScript,就能实现很多动态的效果。它们重要分为三大类:transform(变换),transition(过渡),animation(动画)。此中transform又分为2D变换和3D变换,它赋予了我们不通过专业筹划软件制作平面大概立体图形的本领。

一  过渡

  通过给元素设置transition属性设置它的过渡效果。过渡实际定义的是元素从一种状态变成另一种状态的过程,比如宽度从100px变成300px,配景颜色从red变成orange等等。

  1. 1 div{
  2. 2 width:200px;
  3. 3 height:200px;
  4. 4 background-color:red;
  5. 5 transition-property:width,background-color;
  6. 6 /*该属性指定需要变换的元素属性,不同属性用逗号隔开*/
  7. 7 transition-duration:1s;
  8. 8 /*该属性指定整个过程花费的时间,如需单独为每个变化的属性设置时间,请利用逗号隔开*/
  9. 9 transition-timing-function:ease;
  10. 10 /*该属性设置变化的速率曲线,默认值即是ease,表示慢-快-慢,另有几个其他的取值:linear,匀速;ease-in,慢-快,ease-out,快-慢,ease-in-out,慢-快-慢,肉眼效果和ease相似*/
  11. 11 transition-delay:1s;
  12. 12 /*延长时间*/
  13. 13 }
复制代码

  元素的属性设置好以后,需要某些利用触发了指定属性的变化才气看到效果,必如:hover,大概JS事故。

  另外,transition实际是一个复合属性,多个属性过渡可以简写:

  1. 1 div{
  2. 2 width:200px;
  3. 3 height:200px;
  4. 4 transition:width 2s 1s,background-color 2s;
  5. 5 /*transition-property和transition-duration是必须的,另外两个是可选的*/
  6. 6 }
  7. 7 div:hover{
  8. 8 width:400px
  9. 9 }
复制代码

  当有多个属性需要设置过渡,并且持续事故,速率曲线,延长时间均雷同时,你可以如下简写:

  1. 1 div{
  2. 2 /*some code*/
  3. 3 transform:all 2s;
  4. 4 /*全部发生变化的属性都设置过渡效果*/
  5. 5 }
复制代码

二  动画

  动画实在和过渡一样,都是用来给元素设置动态效果的,不同的是,过渡需要人为的触发才气被实验,而这里将要讲授的动画不需要人为触发。

  在给元素设置动画之前,我们起首应该创建一个动画效果,即开始是什么状态,竣事是什么样的状态。

  1. 1 @keyframes sport{/*sport是动画的名称,可以自定义*/
  2. 2 from{
  3. 3 width:200px;
  4. 4 }
  5. 5 to{
  6. 6 width:400px;
  7. 7 }
  8. 8 /*除了利用from...to的方式,你还可以利用百分比创建更加丰富的动画过程,0%表示开始时,100%表示竣事时*/
  9. 9 }
复制代码

  创建好动画之后,你就可以为元素设置诸如动画持续时长,速率曲线,重复次数等属性了。

  1. 1 div{
  2. 2 animation-name:sport;
  3. 3 /*规定元素需要实验的动画名称,即利用@keyframs创建的谁人*/
  4. 4 animation-duration:5s;
  5. 5 /*规定动画完成一个周期所花费的秒或毫秒*/
  6. 6 animation-timing-function:ease;
  7. 7 /*规定动画的速率曲线,可选值同过渡*/
  8. 8 animation-delay:3s;
  9. 9 /*规定动画延长时间*/
  10. 10 animation-iteration-count:5;
  11. 11 /*规定动画被播放的次数,infinite表示不停循环播放*/
  12. 12 animation-direction:alternate;
  13. 13 /*规定动画是否在下一周期逆向地播放,normal是默认取值,表示不逆向播放,逆向播放一次也会在animation-iteration-count属性值中减1*/
  14. 14 animation-play-state:paused;
  15. 15 /*规定动画是否正在运行或暂停,默认值是running,表示正在运行*/
  16. 16 animation-fill-mode:forwards;
  17. 17 /*规定动画竣事后元素的状态,forwards,保持动画停止时的状态,backwards,回到开始时的状态,none,保持默认。一样平常没有指定该属性时,动画竣事后会回到开始时的状态。不同欣赏器大概有不同体现*/
  18. 18 }
复制代码

三  2D变换

  通过给元素设置transform属性,可以对元素举行2D变换。很多地方把transform翻译成转换,该单词在英语中的寄义是使改变,使变形。我更倾向于把它翻译成变换,通过CSS变换,我们可以对元素举行移动、缩放、转动、拉伸等利用。

  1,translate(x,y) 

  1. 1 div{
  2. 2 transform:translate(50px,100px);
  3. 3 }
  4. 4 /*div在程度方向移动50px,垂直方向移动100px*/
复制代码

  translate方法吸收两个参数,分别表示在程度和垂直正方向上的偏移量,可以吸收负值,表示向反方向偏移。

  2,rotate(deg)

  1. 1 div{
  2. 2 transform:rotate(30deg);
  3. 3 }
  4. 4 /*顺时针方向旋转元素30度*/
复制代码

  rotate方法吸收一个参数,表示元素旋转的角度,可以吸收负值,表示逆时针方向旋转。rotate方法实际是通过修改元素的坐标系来达到旋转元素的目的,比如:

  1. 1 div{
  2. 2 transform:rotate(45deg) translate(50px,0);
  3. 3 /*多属性复合情势写法*/
  4. 4 }
  5. 5 /*元素先旋转45度,然后向欣赏器x轴正方向偏下45度的方向移动50px*/
复制代码

  默认环境下,元素都是以本身的中心点为圆心旋转,我们可以通过transform-origin属性修改该参考点。

  1. 1 div{
  2. 2 width:200px;
  3. 3 height:200px;
  4. 4 transform:rotate(30deg);
  5. 5 transform-origin:0px 0px;/*以左上角为圆点旋转*/
  6. 6 /*取值200px 0px即以右上角为圆点旋转。改属性取值也可以是百分比或关键字。top,botton,left,right,center*/
  7. 7 }
复制代码

  

  3,scale(x,y)

  1. 1 div{
  2. 2 transform:scale(2,3);
  3. 3 }
  4. 4 /*元素宽度放大2倍,高度放大3倍*/
复制代码

  scale方法吸收两个参数,分别表示元素宽高需要缩放的比例,如果参数介于0到1之间则表示缩小,如果小于0,实际效果相当于翻转元素,感爱好的朋友可以自行测试,观察效果。

  

  4,skew(x,y)

  1. 1 div{
  2. 2 transform:skew(30deg,30deg);
  3. 3 }
  4. 4 /*元素在程度和垂直方向均倾斜30度*/
复制代码

  skew方法吸收两个参数,分别表示X轴和Y轴倾斜的角度,如果第二个参数为空,则默认为0,参数为负表示向相反方向倾斜。

四  3D变换

  要想使元素以3D效果呈现,你可以给元素的父元素添加transform-style属性

  1. 1 .father{
  2. 2 transform-style:preserve-3d;
  3. 3 }
  4. 4 .son{
  5. 5 /*some code*/
  6. 6 }
复制代码

  transform-style属性的默认值是flat,即平面的意思。通过设置其值为preserve-3d即可让子元素以3D模式呈现。

  事实上,我们是通过共同利用rotate方法,终极实现3D立体效果的。

  我们知道,在2D空间,坐标轴只有x和y两根轴,而在3D空间,一共有x,y,z三根轴。我们上面讲授的rotate方法实际上都是围绕z轴在旋转,这也是该方法的默认方式。另外,实在我们还可以通过rotateX(),rotateY(),改变元素默认的旋转轴向。改变旋转轴向共同perspective属性利用效果更佳。

  1. 1 .father{
  2. 2 perspective:500px;
  3. 3 /*perspective属性取值是一样平常是一个像素值,设置后可以实现旋转后元素近大远小的效果*/
  4. 4 }
  5. 5 .son{
  6. 6 width:200px;
  7. 7 height:200px;
  8. 8 transform:rotateX(45deg);
  9. 9 }<br />10 /*留意,perspective属性需要设置在旋转元素的祖先元素上,通常我们把它设置在其父元素上。*/
复制代码

  下面是两个3D立方体的示例代码:

  HTML部分:

  1. 1 <div class="D3">
  2. 2 <ul>
  3. 3 <li>1</li>
  4. 4 <li>2</li>
  5. 5 <li>3</li>
  6. 6 <li>4</li>
  7. 7 <li>5</li>
  8. 8 <li>6</li>
  9. 9 </ul>
  10. 10 <ul>
  11. 11 <li>1</li>
  12. 12 <li>2</li>
  13. 13 <li>3</li>
  14. 14 <li>4</li>
  15. 15 <li>5</li>
  16. 16 <li>6</li>
  17. 17 </ul>
  18. 18 </div>
复制代码

  CSS部分:

  1. 1 body{
  2. 2 background-color: #ccc;
  3. 3 perspective: 800px;
  4. 4 }
  5. 5 .D3{
  6. 6 width:550px;
  7. 7 height: 200px;
  8. 8 margin:100px auto;
  9. 9 }
  10. 10 @keyframes sport{
  11. 11 from{
  12. 12 transform: rotateX(0deg) rotateY(0deg);
  13. 13 }
  14. 14 to{
  15. 15 transform: rotateX(360deg) rotateY(360deg);
  16. 16 }
  17. 17 }
  18. 18 .D3 ul{
  19. 19 width: 200px;
  20. 20 height: 200px;
  21. 21 position: relative;
  22. 22 transform-style: preserve-3d;
  23. 23 transform: rotateX(0deg) rotateY(0deg);
  24. 24 animation: sport 10s linear infinite alternate;
  25. 25 display: inline-block;
  26. 26 margin-left:50px;
  27. 27 }
  28. 28 .D3 ul li{
  29. 29 list-style: none;
  30. 30 width:200px;
  31. 31 height: 200px;
  32. 32 position: absolute;
  33. 33 opacity: 0.3;
  34. 34 font-size: 100px;
  35. 35 line-height: 200px;
  36. 36 text-align: center;
  37. 37 }
  38. 38 .D3 ul li:nth-child(1){
  39. 39 background-color: red;
  40. 40 transform:translateZ(100px);
  41. 41 }
  42. 42 .D3 ul li:nth-child(2){
  43. 43 background-color: blue;
  44. 44 transform: rotateX(90deg) translateZ(100px);
  45. 45 }
  46. 46 .D3 ul li:nth-child(3){
  47. 47 background-color: yellow;
  48. 48 transform: rotateX(180deg) translateZ(100px);
  49. 49 }
  50. 50 .D3 ul li:nth-child(4){
  51. 51 background-color: pink;
  52. 52 transform: rotateX(270deg) translateZ(100px);
  53. 53 }
  54. 54 .D3 ul li:nth-child(5){
  55. 55 background-color: purple;
  56. 56 transform: rotateY(90deg) translateZ(-100px);
  57. 57 }
  58. 58 .D3 ul li:nth-child(6){
  59. 59 background-color: green;
  60. 60 transform: rotateY(90deg) translateZ(100px);
  61. 61 }
  62. 62 /*还记得吗?rotate方法是通过改变坐标系来达到旋转的目的哦!*/
复制代码

五  transform对其他元素的影响

  1,提高表现优先级

  我们知道,在标准文档流中,如果利用负的margin值可以使一个元素覆盖在另一个元素上,正常环境下是写在后面的元素覆盖前面的。但是设置了transform属性的元素会覆盖其他元素。

  1. 1 .top{
  2. 2 width: 100px;
  3. 3 height: 100px;
  4. 4 background-color: red;
  5. 5 transform: rotate(0deg);
  6. 6 }
  7. 7 .bottom{
  8. 8 width: 100px;
  9. 9 height: 100px;
  10. 10 background-color: blue;
  11. 11 margin-top:-50px;
  12. 12 }
  13. 13 /*红色的会覆盖蓝色的div 50px*/
复制代码

  

  2,改变fixed定位的相对对象

  通常环境下,利用了position:fixed;属性的元素都会相对欣赏器窗口定位,不受滚动条的影响。但是当我们给其父元素设置了transform属性后,这一状况被改变了。

  1. 1 .father{
  2. 2 width: 500px;
  3. 3 height: 500px;
  4. 4 margin-left: 100px;
  5. 5 margin-top: 100px;
  6. 6 border: 1px solid #000;
  7. 7 transform: rotate(0deg);
  8. 8 }
  9. 9 .son{
  10. 10 position: fixed;
  11. 11 top: 50px;
  12. 12 left:50px;
  13. 13 width: 100px;
  14. 14 height: 100px;
  15. 15 background-color: red;
  16. 16 }
  17. 17 /*.son不再以欣赏器窗口作为参考点,而是以其父元素.father作为按参考点了*/
复制代码

  

  3,改变absolute定位元素的宽度

  以前,如果一个元素设置了绝对定位,并且宽度设置为100%,那么该元素的实际宽度是第一个有定位属性的祖先元素的宽度,没有则是body的宽度。现在,如果第一个有定位属性的祖先元素和绝对定位元素之间,有一个设置了transform属性的元素,那么绝对定位元素的宽度继承链将在该transform祖先元素处被截断,终极绝对定位的元素宽度将继承自transform元素。

  1. 1 .grand{
  2. 2 width: 500px;
  3. 3 height: 500px;
  4. 4 border: 1px solid #000;
  5. 5 position: absolute;
  6. 6 }
  7. 7 .father{
  8. 8 width: 100px;
  9. 9 height: 100px;
  10. 10 background-color: red;
  11. 11 transform:rotate(0deg);
  12. 12 }
  13. 13 .son{
  14. 14 width: 100%;
  15. 15 height: 200px;
  16. 16 position: absolute;
  17. 17 background-color: yellow;
  18. 18 }
  19. 19 /*.son的宽度不是500px,而变成了100px*/
复制代码

  

  写在最后,transform是CSS3才引入的属性,不同欣赏器对它的实现也大概有差异,上面介绍的内容并不能包管在全部欣赏器上均有雷同的体现,详细环境请大家自行测试(我仅在Chrome 76测试)。







来源:https://www.cnblogs.com/ruhaoren/p/11596523.html
C#论坛 www.ibcibc.com IBC编程社区
C#
C#论坛
IBC编程社区
*滑块验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则