bootstrap方法_bootstrap方法

bootstrap方法_bootstrap方法页面上有两个div元素块,使用transform:translateX(20px)让第一个元素块向X轴移动20个像素;使用transform:translateY(30px)让第二个元素块向Y轴移动


旋转函数

  • 在 CSS3 中,使用 rotate 函数能够让指定的元素对象绕原点旋转,主要在二维空间内进行操作。
    在这里插入图片描述
  • 其语法格式如下所示:
transform: rotate(角度); /*元素按照指定角度旋转*/ 
  • 这里的角度可以是正值也可以是负值。正负值意味着什么呢?🤔
  • 正负值意味着不同的旋转方向,规定参数为正时,顺时针旋转;参数为负时,逆时针旋转。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { 
    width: 50px; height: 50px; margin: 20px; display: inline-block; background-color: chartreuse; } /*向右旋转 60 度*/ .c1 { 
    background-color: #ffe6e6; transform: rotate(60deg); } /*向左旋转 60 度*/ .c2 { 
    background-color: #a7c5eb; transform: rotate(-60deg); } </style> </head> <body> <div class="c1"></div> <div></div> <div class="c2"></div> </body> </html> 

在这里插入图片描述

rotateX 和 rotateY 的使用

  • 除了使用 rotate 函数绕原点来旋转指定元素外,我们还可以围绕指定轴来旋转元素。
  • rotateX 函数可以让指定元素围绕横坐标(X 轴)旋转。其使用格式如下所示:
transform: rotateX(角度); 
  • rotateY 函数可以让指定元素围绕纵坐标(Y 轴)旋转。其使用格式如下所示:
transform: rotateY(角度); 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .c1 { 
    transform: rotateX(70deg); } .c2 { 
    transform: rotateX(180deg); } .c3 { 
    transform: rotateY(45deg); } .c4 { 
    transform: rotateY(180deg); } </style> </head> <body> <div> <img src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png" /> <img src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png" class="c1" /> <img src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-64.png" class="c2" /> </div> <div> <img src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png" /> <img src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png" class="c3" /> <img src="https://labfile.oss.aliyuncs.com/courses/3773/icons8-animal-85.png" class="c4" /> </div> </body> </html> 

在这里插入图片描述

移动函数

  • translate() 函数能够重新定位元素坐标,该函数包含两个参数值,分别用来定位 X 轴和 Y 轴的新坐标。其语法格式为:
transform: translate(移动值); /*元素按照指定值沿着 X 轴和 Y 轴移动*/ transform: translateX(移动值); /*元素按照指定值沿着 X 轴移动*/ transform: translateY(移动值); /*元素按照指定值沿着 Y 轴移动*/ 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { 
    width: 50px; height: 50px; } /*沿 X 轴向右移动 20 个像素*/ .c1 { 
    background-color: #51adcf; transform: translateX(20px); } /*沿 Y 轴向下移动 30 个像素*/ .c2 { 
    background-color: #ffe5b9; transform: translateY(30px); } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> </body> </html> 

在这里插入图片描述

页面上有两个 div 元素块,使用 transform: translateX(20px) 让第一个元素块向 X 轴移动 20 个像素;使用 transform: translateY(30px) 让第二个元素块向 Y 轴移动 30 个像素。

缩放函数

  • scale() 函数能够缩放元素大小,该函数包含两个参数,分别用来定义宽和高的缩放比例。其语法格式为:
transform: scale(缩放值); /*元素按照指定值沿着 X 轴和 Y 轴缩放*/ transform: scaleX(缩放值); /*元素按照指定值沿着 X 轴缩放*/ transform: scaleY(缩放值); /*元素按照指定值沿着 Y 轴缩放*/ 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { 
    width: 50px; height: 50px; margin: 30px; } .c1 { 
    background-color: rgba(179, 153, 38, 0.651); } /*沿着 X 和 Y 轴进行缩放*/ .c2 { 
    background-color: #9088d4; transform: scale(2); } /*沿着 X 轴进行缩放*/ .c3 { 
    background-color: #ffe5b9; transform: scaleX(2); } /*沿着 Y 轴进行缩放*/ .c4 { 
    background-color: #1c8181; transform: scaleY(2); } </style> </head> <body> <div class="c1"></div> <div class="c2"></div> <div class="c3"></div> <div class="c4"></div> </body> </html> 

在这里插入图片描述

  • 在页面上有四个 div 元素块,第一个是宽和高均为 50 个像素的正方形元素块,我们另外三个元素块在此基础上进行缩放。
  • 第二个元素块使用 transform: scale(2) 让元素同时沿着 X 轴和 Y 轴扩大 2 倍。
  • 第三个元素块使用 transform: scaleX(2) 让元素沿着 X 轴扩大 2 倍。
  • 第四个元素块使用 transform: scaleY(2) 让元素沿着 Y 轴扩大 2 倍。

过渡

  • CSS3 过渡是元素从一种样式逐渐过渡到另一种样式。 其语法如下所示:
transition: 指定属性 持续时间 速度曲线 开始时间; 
  • 它是一个复合属性,我们也可以如下分开使用这几个属性。
transition-property: 属性值; /*指定属性名*/ transition-duration: 属性值; /*完成过渡这一过程的时间*/ transition-timing-function: 属性值; /*速度曲线*/ transition-delay: 属性值; /*过渡的开始时间*/ 
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { 
    margin-top: 40px; margin-left: 40px; width: 50px; height: 50px; background-color: #51adcf; /*ease-in-out 慢速开始慢速结束*/ transition: transform 1s ease-in-out; } div:nth-child(2) { 
    transform: rotate(-60deg); } div:hover { 
    transform: scale(2); } </style> </head> <body> <div></div> <div></div> </body> </html> 

在这里插入图片描述
代码说明如下:

  • 在 div:hover 中,使用 transform: scale(2) 设置当鼠标放在 div 元素上时,元素会放大 1 倍。
  • 在 div:nth-child(2) 中,使用 div:nth-child(2) 设置第二个元素逆时针旋转 60deg。
  • 使用 transition 属性实现过渡的效果,其中 ease-in-out 是 transition-timing-function
    属性的属性值。

接下来给大家介绍一下 transition-timing-function 属性的取值吧!

transition-timing-function 属性

  • transition-timing-function 属性用来设置过渡效果从开始到结束的时间曲线,它有很多可用属性值,常用属性值如下表所示。
    在这里插入图片描述
  • transition-timing-function 属性有这么多的属性值,我们用 steps 来练习一下吧~ 🤪
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { 
    width: 50px; height: 50px; margin: 50px; background-color: cornflowerblue; transition: transform 4s steps(4); } div:hover { 
    transform: scale(2); } </style> </head> <body> <div></div> </body> </html> 

在上面代码中,用 steps 的方式将 div 元素分成四步,使元素的面积逐渐变成原来的 2 倍,当鼠标从元素上移开,又会以四步的形式将元素还原成原有的大小。

动画

  • @keyframes 被称为关键帧,它能够设置一些元素的样式,让该元素可以从原来的样式渐渐过渡到新的样式中。其语法格式如下所示:
@keyframes 动画名 { 
    0% { 
   样式属性:属性值;} 25% { 
   样式属性:属性值;} 50% { 
   样式属性:属性值;} 100% { 
   样式属性:属性值;} } 
  • 这里的百分比是用来规定动画发生变化的时间的,0% 代表动画的开始,100% 代表动画的结束,中间的可以自定义。
  • 将 @keyframes 创建的动画绑定到选择器上,通过 animation 属性就能实现动画效果了,其语法格式为:
animation: 动画名 完成动画的周期 是否重复; 
  • animation 属性是一个复合属性,它的子属性如下所示。

在这里插入图片描述

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .circle { 
    width: 60px; height: 60px; border-radius: 100%; background-color: #ffd8a6; animation-name: action; animation-duration: 9s; animation-iteration-count: 10; } @keyframes action { 
    0% { 
    margin-left: 400px; } 25% { 
    background-color: #dd7631; } 50% { 
    border-radius: 10%; } 100% { 
    margin: 100px; } } </style> </head> <body> <div class="circle"></div> </body> </html> 

今天的文章
bootstrap方法_bootstrap方法分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/81189.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注