CSS学习17--CSS3 过渡、2D变形、3D变形、动画

卖不甜枣  金牌会员 | 2024-9-14 16:58:52 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 692|帖子 692|积分 2076

一、过渡

为元素从一种样式变为另一种样式时添加效果。
   transition: 过渡属性 花费时间 活动曲线 何时开始;
前两个值不可省略，活动曲线默认ease，符合开始默认0s立即开始可以省略。
  注意：transition需要写在div里而不是hover里；多个属性设置不同时，用逗号隔开；需要描述所有属性变化时，过渡属性值为all。
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 width: 200px;
  6.                                 height: 200px;
  7.                                 background-color: pink;
  8.                                 transition: width 0.2s ease 0s,height 0.3s ease-in 1s;
  9.                                 /* transition: all 0.6s ease 0s; */
  10.                         }
  11.                         div:hover {
  12.                                 width: 300px;
  13.                                 height: 300px;
  14.                         }
  15.                 </style>
  16.         </head>
  17.         <body>
  18.         <div></div>
  19. </html>
复制代码
二、2D变形 transform

做元素的变形、位移、缩放，可以和transition团结使用。
1.移动 translate

用translate平移
   transform: translate(x,y)
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 width: 200px;
  6.                                 height: 200px;
  7.                                 background-color: pink;
  8.                                 transition: all 0.5s;
  9.                         }
  10.                         div:active { /*鼠标点击没有松开鼠标，相当于点击*/
  11.                                 transform: translate(100px,200px);
  12.                                 transform: translate(50%,100%);
  13.                         }
  14.                 </style>
  15.         </head>
  16.         <body>
  17.         <div></div>
  18. </html>
复制代码
注意：


  • 只移动一个坐标可以把另一个坐标设为0；
  • 也可以写成：translateX（只跟一个参数）；translateY（只跟一个参数）。
  • translate移动的距离假如是%，则以自己的宽度为准，而不是父亲为准。
    1. <html>
    2.         <head>
    3.                 <style>
    4.                         div {
    5.                                 width: 200px;
    6.                                 height: 200px;
    7.                                 background-color: pink;
    8.                                 position: absolute; /*盒子居中对齐*/
    9.                                 left: 50%; /*以父级宽度为准*/
    10.                                 margin-left: -100px; /*需要计算*/
    11.                                 top: 50%;
    12.                                 transform: translate(-50%,-50%);
    13.                         }
    14.                 </style>
    15.         </head>
    16.         <body>
    17.         <div></div>
    18. </html>
    复制代码
2.缩放 scale

   transform: scale(x,y)
x和y的值小于1为缩小倍数，大于1为放大倍数。
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 width: 200px;
  6.                                 height: 200px;
  7.                                 background-color: pink;
  8.                         }
  9.                         div:hover {
  10.                                 transform: scale(1.2,1.5);
  11.                         }
  12.                 </style>
  13.         </head>
  14.         <body>
  15.         <div></div>
  16. </html>
复制代码
注意：


  • 假如只写一个参数，宽高都缩放！
  • 谁做动画，谁加过渡！
    1. <html>
    2.         <head>
    3.                 <style>
    4.                         div {
    5.                                 width: 100px;
    6.                                 height: 50px;
    7.                                 background-color: pink;
    8.                                 overflow: hidden;
    9.                         }
    10.                         div img {
    11.                                 transition: all 0.3s;
    12.                         }
    13.                         div:hover img {
    14.                                 transform: scale(1.2,1.5);
    15.                         }
    16.                 </style>
    17.         </head>
    18.         <body>
    19.         <div>
    20.                 <img src="images/search.png" alt="">
    21.         </div>
    22. </html>
    复制代码
3. 旋转 rotate

   transform: rotate(*deg)
正值是顺时针，负值是逆时针；比如90deg是顺时针旋转90度
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 width: 100px;
  6.                                 height: 50px;
  7.                                 background-color: pink;
  8.                                 overflow: hidden;
  9.                         }
  10.                         div img {
  11.                                 transition: all 0.3s;
  12.                         }
  13.                         div:hover img {
  14.                                 transform: rotate(90deg);
  15.                         }
  16.                 </style>
  17.         </head>
  18.         <body>
  19.         <div>
  20.                 <img src="images/search.png" alt="">
  21.         </div>
  22. </html>
复制代码
旋转中心点的设置：
  1.         <html>
  2.                 <head>
  3.                         <style>
  4.                                 div img {
  5.                                         padding: 200px;
  6.                                         transition: all 0.3s;
  7.                                         transform-origin: bottom top;
  8.                                 }
  9.                                 div:hover img {
  10.                                         transform: rotate(90deg);
  11.                                 }
  12.                         </style>
  13.                 </head>
  14.                 <body>
  15.                 <div>
  16.                         <img src="images/search.png" alt="">
  17.                 </div>
  18.         </html>
复制代码
4. 倾斜 skew

   transform: skew(x,y);
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 font-size: 50px;
  6.                                 font-weight: 700;
  7.                                 transition: all 0.2s;
  8.                         }
  9.                         div:hover {
  10.                                 transform: skew(20deg,0);
  11.                         }
  12.                 </style>
  13.         </head>
  14.         <body>
  15.         <div>
  16.                 123
  17.         </div>
  18. </html>
复制代码
三、3D变形

3D多了z轴，遵循左手法则。


1. rotateX（）rotateY（） rotateZ（）

  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div img {
  5.                                 transition: all 0.2s;
  6.                         }
  7.                         div:hover img {
  8.                                 transform: rotateX(180deg);
  9.                         }
  10.                 </style>
  11.         </head>
  12.         <body>
  13.         <div>
  14.                 <img src="images/course.png" alt="">
  15.         </div>
  16. </html>
复制代码
2. 体会透视 perspective



  • 透视原理：近大远小。
  • 浏览器透视：把近大远小的所有图像，透视在屏幕上。
  • perspective：视距，表现视点距离屏幕的是非。视点，用于模拟透视效果时人眼的位置
注：并非任何环境下需要透视效果，根据开辟需要举行设置。
perspective一般作为一个属性，设置给父元素，作用于所有3D转换的子元素
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 perspective: 1000px;
  6.                         }
  7.                         div img {
  8.                                 transition: all 0.2s;
  9.                         }
  10.                         div:hover img {
  11.                                 transform: rotateX(180deg);
  12.                         }
  13.                 </style>
  14.         </head>
  15.         <body>
  16.         <div>
  17.                 <img src="images/course.png" alt="">
  18.         </div>
  19. </html>
复制代码
3. translateX（） translateY（） translateZ（）

Z轴是物体到屏幕的距离，透视是一种展示形式。
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 margin: 200px;
  6.                                 perspective: 1000px;
  7.                         }
  8.                         div img {
  9.                                 transition: all 0.2s;
  10.                         }
  11.                         div:hover img {
  12.                                 transform: translateZ(100px);
  13.                         }
  14.                 </style>
  15.         </head>
  16.         <body>
  17.         <div>
  18.                 <img src="images/course.png" alt="">
  19.         </div>
  20. </html>
复制代码
  transform: translate3d(x,y,z);
z轴只能是px单位。
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 margin: 200px;
  6.                                 perspective: 1000px;
  7.                         }
  8.                         div img {
  9.                                 transition: all 0.2s;
  10.                         }
  11.                         div:hover img {
  12.                                 transform: translate3d(100px,100px,100px);
  13.                         }
  14.                 </style>
  15.         </head>
  16.         <body>
  17.         <div>
  18.                 <img src="images/course.png" alt="">
  19.         </div>
  20. </html>
复制代码
4. 开门大吉例子

  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 width: 200px;
  6.                                 height: 180px;
  7.                                 margin: 200px;
  8.                                 background: url(images/course.png);
  9.                                 perspective: 1000px;
  10.                                 position: relative;
  11.                         }
  12.                         span {
  13.                                 display: block;
  14.                                 width: 100px;
  15.                                 height: 180px;
  16.                                 background-color: pink;
  17.                                 border: 1px solid black;
  18.                                 transition: all 0.2s;
  19.                         }
  20.                         span.door-l {
  21.                                 position: absolute;
  22.                                 top: 0;
  23.                                 left: 0;
  24.                                 transform-origin: left;
  25.                         }
  26.                         span.door-r {
  27.                                 position: absolute;
  28.                                 top: 0;
  29.                                 right: 0;
  30.                                 transform-origin: right;
  31.                         }
  32.                         div:hover .door-l   {
  33.                                 transform: rotateY(-130deg);
  34.                         }
  35.                         div:hover .door-r  {
  36.                                 transform: rotateY(130deg);
  37.                         }
  38.                 </style>
  39.         </head>
  40.         <body>
  41.         <div>
  42.                 <span class="door-l"></span>
  43.                 <span class="door-r"></span>
  44.         </div>
  45. </html>
复制代码

5. backface-visibility

用于设置图片不正向对着屏幕时是否可见。
可以用来写翻转图片，先translateY（180deg），当backface-visibility：hidden可以实现翻转时显示背面图片。
四、动画

   animation: 动画名称 动画时间 活动曲线 何时开始 播放次数 是否反方向；
  动画名称是自定义的
  1. <html>
  2.         <head>
  3.                 <style>
  4.                         div {
  5.                                 width: 200px;
  6.                                 height: 180px;
  7.                                 margin: 200px;
  8.                                 background: url(images/course.png);
  9.                                 /*animation: name duration timing-function delay iteration-count direction fill-mode;*/
  10.                                 animation: go 2s ease 0s 2 reverse;
  11.                         }
  12.                         @keyframes go { /*定义动画*/
  13.                                 from{
  14.                                         transform: translate(0);
  15.                                 }
  16.                                 to{
  17.                                         transform: translate(600px);
  18.                                 }
  19.                         }
  20.                 </style>
  21.         </head>
  22.         <body>
  23.         <div>
  24.         </div>
  25. </html>
复制代码
例子：无缝滚动

  1. <html>
  2.         <head>
  3.                 <style>
  4.                         * {
  5.                                 margin: 0;
  6.                                 padding: 0;
  7.                         }
  8.                         ul {
  9.                                 list-style: none;
  10.                         }
  11.                         nav {
  12.                                 width: 1200px;
  13.                                 height: 20px;
  14.                         }
  15.                         nav li {
  16.                                 float: left;
  17.                         }
  18.                         nav ul {
  19.                                 width: 200%; /*两倍！！！*/
  20.                                 animation: moving 2s linear infinite;
  21.                         }
  22.                         div {
  23.                                 width: 200px;
  24.                                 height: 20px;
  25.                         }
  26.                         @keyframes moving { /*定义动画*/
  27.                                 from{
  28.                                         transform: translate(0);
  29.                                 }
  30.                                 to{
  31.                                         transform: translate(-1000px);
  32.                                 }
  33.                         }
  34.                         nav:hover ul { /*鼠标经过nav，里面的ul不做动画*/
  35.                                 animation-play-state: paused ;
  36.                         }
  37.                 </style>
  38.         </head>
  39.         <body>
  40.         <nav>
  41.                 <ul>
  42.                         <li><div style="background-color: red;"></div></li>
  43.                         <li><div style="background-color: orange;"></div></li>
  44.                         <li><div style="background-color: yellow;"></div></li>
  45.                         <li><div style="background-color: green;"></div></li>
  46.                         <li><div style="background-color: blue;"></div></li>
  47.                         <li><div style="background-color: purple;"></div></li>
  48.                         <li><div style="background-color: red;"></div></li>
  49.                         <li><div style="background-color: orange;"></div></li>
  50.                         <li><div style="background-color: yellow;"></div></li>
  51.                         <li><div style="background-color: green;"></div></li>
  52.                         <li><div style="background-color: blue;"></div></li>
  53.                         <li><div style="background-color: purple;"></div></li>
  54.                 </ul>
  55.         </nav>
  56. </html>
复制代码
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

卖不甜枣

金牌会员
这个人很懒什么都没写!

楼主热帖

标签云

挺好的 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表