css变形，过渡及私有前缀

已于 2022-11-09 16:30:11 修改
阅读量288 收藏
点赞数
分类专栏： css HTML+css css变形与过渡 文章标签： css 前端
于 2022-05-07 16:14:16 首次发布
关注博主，为您提供更优质的作品与最全的知识内容
本文链接：https://blog.csdn.net/m0_59505309/article/details/124633224
版权

1、过渡 transition 

过渡属性用法： transition :ransition-property  transition-duration  transition-timing-function   transition-delay 

可以一起指定也可以分别单独指定

transition-property: 是要过渡的属性（如width，height），all是所有都改变。

transition-duration：花费的时间，单位为s或ms

transition-timing-function：是指定动画类型（运动区曲线），运动曲线有以下几种

ease=>逐渐慢下来（默认值） linear=>匀速 ease-in=>加速 ease-out=>减速 ease-in-out=>先加速在减速 

transition-delay 延迟时间，单位为s或ms

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        
        div {
            width: 100px;
            height: 200px;
            background-color: aqua;
            transition: width 2s ease-in-out 0.5s;
        }
        
        div:hover {
            width: 500px;
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

结果如下，当鼠标上上去后变化不再是瞬间完成，而是过渡完成。

2、变形 transform

 (1)、2D变形

（a）移动 translate(x,y)

移动可以指定像素值也可以指定百分比， 注意：指定百分比是自身大小的百分比，因此可以用于设置盒子定位时的居中对齐（在设置left：50%后再移动自身的-50%即可）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            transition: all 2s;
        }
        
        div:active {
            transform: translate(200px, 200px);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

点击之后盒子进行了移动。用于让定位的盒子居中的代码入下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 300px;
            height: 300px;
            background-color: aqua;
            transition: all 0.5s;
            position: relative;
        }
        
        .son {
            background-color: red;
            position: absolute;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            transform: translate(-50%, -50%);
        }

    </style>
</head>

<body>
    <div class="fa">
        <div class="son"></div>
    </div>

</body>

</html>

结果为

（b）缩放 scale（x，y）

x,y设置大于1 是放大，小于1 是缩小。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
        }
        
        div:hover {
            transform: scale(0.5, 2);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

（c）旋转 rotate(x deg)

x指定度数值，正数是顺时针旋转，负数是逆时针旋转。

旋转可以使用 transform-origin  指定旋转中心点，transform-origin 给left top right bottom 也可以指定具体的像素值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotate(120deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

（d）倾斜 skew（x deg ,y deg）

x,y分别指定倾斜在x，y方向上的角度，可以为负数。y值不写默认为0。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            border: 1px solid red;
            transition: all 1s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: skew(30deg, 20deg);
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

（2）3D变形

（a）旋转（rotateX,rotateY,rotateZ）

3D旋转与2D类似，只不过一个是基于二位坐标一个是基于三维坐标。三个值可以同时指定也可以单独指定。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 100px;
            background-color: aqua;
            margin: 200px auto;
            transition: all 2s;
            transform-origin: bottom left;
        }
        
        div:hover {
            transform: rotateX(120deg);
            /* transform: rotateY(120deg); */
            /* transform: rotateZ(120deg); */
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

（b）移动（translateX，translateY，translateZ）

3D移动对于xy方向上的移动与2d移动一致。只有z方向上的移动不一样。Z方向上的移动在现实生活中是距离变远，距离变近。因此在网页中显示结果是变近则变大，变远则变小。

要使Z放线上移动生效首先要设置perspective（眼睛距离屏幕的距离）;

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            perspective: 1000px;
            /* 数值越小说明眼睛离的越近 */
        }
        
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
            transition: all 0.5s;
            margin: 200px auto;
        }
        
        div:hover {
            transform: translate3d(0, 0, 200px);
        }
    </style>
</head>

<body>
    <div>

    </div>
</body>

</html>

3、动画 animation

（1）、 animation: animation- name || animation- duration||  animation- timing-function || animation- delay || animation- iteration-count||  animation- direction||  animation- fill-mode;

animation-name:动画名称（自己使用@keyframes 定义的动画）

animation-duration：持续时间

animation-timing-function：运动曲线，与过渡的运动曲线类似。

animation-delay：延迟时间

animation-iteration-count：循环次数 （infinite 是无限循环）

animation-direction：是否反向（动画是否是由结尾倒开是倒着放的）

animation-fill-mode：设置在动画播放之外的状态（结束时的状态）none | forwards（设为结束时的状态）| backwards(设为开始时的状态)|both（设为开始或结束时的状态）

animation-play-state：设置动画状态 running 开始|paused 暂停

（2）、@keyframes 自定义动画

格式如下

@keyframes 动画名称 {
from{ 开始} 0%
to{ 结束 } 100%
}

可以用 from...to 来指定动画过程，也可以用0%~100%指定动画过程。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: aqua;
            /* animation: 动画名称 动画时间 运动曲线 何时开始 播放次数 是否反方向 */
            animation: move 5s linear 3;
        }
        
        @keyframes move {
            0% {
                transform: translate3d(0, 0, 0);
            }
            25% {
                transform: translate3d(400px, 0, 0);
            }
            50% {
                transform: translate3d(400px, 300px, 0);
            }
            75% {
                transform: translate3d(0, 300px, 0);
            }
            100% {
                transform: translate3d(0, 0, 0);
            }
        }
    </style>
</head>

<body>
    <div></div>
</body>

</html>

浏览器的私有前缀

浏览器私有前缀是为了兼容老版本的写法，比较新版本的浏览器无须添加。

1.私有前缀：

-moz-:代表firefox浏览器的私有属性；

-ms-:代表IE浏览器的私有前缀；

-webkit-:代表safari、chrome私有属性；

-o-:代表Opera私有属性；

2.提倡写法：

在属性前加私有前缀，例如：

-mox-border-radius:10px;

-webkit-border-radius:10px;

-webkit-border-radius:10px;
 

共创splendid--与您携手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
CSS 小结笔记之变形、过渡与动画的示例
09-22
主要介绍了CSS 小结笔记之变形、过渡与动画的示例的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
css按钮过渡效果
11-05
css按钮过渡效果
浏览器的私有前缀
新阿巴阿巴
10-01 1229
1. 私有前缀 -moz-：代表firefox浏览器 -ms-：代表ie浏览器 -webkit-：代表chrome、safari浏览器 -o-：代表Opera浏览器 2. 提倡的写法 div { -moz-background-color: pink; -webkit-background-color: pink; -o-background-color: pink; background-color: pink; -moz-width: 400px;
浏览器私有前缀
小白
07-03 163
1、为什么有私有前缀 因为制定HTML和CSS标准的组织W3C动作是很慢的。通常，有w3c组织成员提出一个新属性，比如说圆角border-radius，大家都觉得好，但是w3c不会为这个属性制定标准，而是要走很复杂的程序，经过很多审查。而浏览器商不愿意等那么久，他们觉得一个属性已经够成熟了，就会在浏览器中加入支持。但是避免日后w3c公布标准时有所变更，就会加入一个私有前缀，比如-webkit-border-radius，通过这种方式来提前支持新属性，等到日后w3c公布了标准，border-radius的标
CSS3属性详解（一）文本 盒模型中的 box-ssize 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 前端开发入门笔记（七）
最新发布
shaozheng0503的博客
10-20 1490
CSS3属性详解（一）文本 盒模型中的 box-ssize 属性 处理兼容性问题：私有前缀 边框 背景属性 渐变 前端开发入门笔记（七）
css浏览器私有前缀
m0_51495354的博客
11-30 114
css浏览器私有前缀
私有前缀
qq_43618136的博客
02-26 349
私有前缀 常见私有前缀 -moz、-ms、-webkit -moz代表Firefox浏览器私有属性，-ms代表IE浏览器私有属性，-webkit代表Safari、Chrome私有属性。 -webkit-是webkit内核，-moz-是Firefox Gecko内核，moz代表的是Firefox的开发商Mozilla。 作用 为了兼容老版本的写法。浏览器私有前缀，是浏览器对于新CSS属性的一个提前支...
css3私有前缀
desson
03-03 91
参考
CSS系列之浏览器私有前缀
老__L的博客
02-27 664
浏览器私有前缀
css属性前缀
我的博客
11-17 457
3、“-webkit-”，代表safari、chrome浏览器的私有属性；1、“-moz-”，代表firefox浏览器的私有属性；Webkit内核：产要代表为Chrome和Safari。4、“-o-”，代表Opera浏览器的私有属性。2、“-ms-”，代表ie浏览器的私有属性；Trident内核：主要代表为IE浏览器。Gecko内核：主要代表为Firefox。Presto内核：主要代表为Opera。
web前端知识点（更新中）
Wzmlzrr的博客
02-15 292
web前端面试相关知识点，真题或面试常见提问总结
12种炫酷CSS3图片切换过渡效果
12-29
12种炫酷CSS3图片切换过渡效果
CSS3过渡transition效果实例介绍
09-24
主要为大家详细介绍了CSS3过渡transition效果实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
可调节CSS3变形金刚特效
06-24
可调节CSS3变形金刚特效是一款可以放大缩小，可以旋转，可以调节透明度，可以调节像素等等。
CSS3提高： 浏览器私有前缀及C3总结
薛定谔的猫
11-06 523
属性选择器 [] 例如[title] [class='dome']结构伪类选择器 nth-child(n) 数字(n从1开始)，关键字，公式(n从零开始)就是CSS有点低版本的浏览器不兼容，然后在代码中添加浏览器的私有前缀，使得他们兼容。伪元素选择器 ::before ::after。nth-of-type(n) 根据类型去选择。是为了兼容老版本的写法，比较新版本的浏览器。重点记住我们动画的简写。
css中哪些属性需要加加前缀,为CSS属性添加浏览器私有前缀
weixin_33816734的博客
08-03 912
背景当我们在js中操作DOM时，往往需要手动为部分特殊的CSS属性 添加特定的前缀为了减少工作量，提高代码复用性我们可以将这个工作封装成一个函数这个函数的任务是：接收一个CSS属性名，返回 带有浏览器前缀&首字母大写的属性名函数实现首先定义一个div标签的style和一个立即执行函数vendorlet elementStyle = document.createElement('div')...
CSS变形
JerryQuery的博客
12-30 2230
变形介绍： CSS提供的形变功能不仅可以平移元素，还能做很多其他的事情，比如旋转、缩放、翻转等，让页面的动画与交互看起来更加自然。 坐标系： x轴的正值在右侧，负值在左侧。y轴的正值沿纵轴向下，负值沿纵轴向上。z轴上的正值离你较近，负值离你较远 易混淆的三个属性： transform变形（用于元素进行旋转、缩放、移动） translate移动 transition过渡（设置元素的样式过度） transform 变形 语法：transform: non...
CSS中变形效果-transform（平移、旋转、缩放、倾斜）
热门推荐
shao_xuan_的博客
10-20 1万+
CSS中变形效果-transform（平移、旋转、缩放、倾斜）CSS3实现变形的优势2-D变形平移translate（）1、缩放scale()2、倾斜skew()3、旋转rotate()4、中心点transform-origin3-D变形1、旋转rotate3d()2、视距perspective3、transform-style（用于保存元素的3D 空间4、backface-visibility（定义元素在不面对屏幕时是否可见5、3D转换方法（位移，缩放）兼容性 CSS3实现变形的优势 1、无需加载额外的文
css 利用变形 过渡 关键帧做一个动画
03-29
首先，需要在HTML文件中创建一个基本的元素，如div，并为其添加一个类名，如“animation-box”。 然后，在CSS文件中，我们可以为该元素添加以下样式： ``` .animation-box { width: 100px; height: 100px; background-color: red; transform: rotate(0deg); transition: transform 1s ease-in-out; } .animation-box:hover { transform: rotate(360deg); } ``` 上述样式中，我们为该元素设置了初始状态和过渡效果。在鼠标悬停时，我们使用“:hover”伪类来触发变形动画，从而使元素旋转一周。 除此之外，我们还可以使用关键帧来创建更复杂的动画效果。例如，以下代码将创建一个沿着X轴平移的动画： ``` @keyframes move { from { transform: translateX(0); } to { transform: translateX(100px); } } .animation-box { animation: move 1s ease-in-out infinite alternate; } ``` 在上述代码中，我们使用“@keyframes”规则定义了一个名为“move”的动画。该动画从0%的位置开始，平移元素，一直到100%的位置。然后，我们将动画应用于元素，并使其无限循环，并在每次播放时反向播放。 通过这些简单的CSS技术，我们可以轻松地创建各种动画效果，从而使网页更具吸引力和互动性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

共创splendid--与您携手

鼓励会让我为您创造出更优质作品

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值