bootstrap方法_bootstrap方法

文章目录

旋转函数
rotateX 和 rotateY 的使用
移动函数
缩放函数
过渡
transition-timing-function 属性
动画

旋转函数

在 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