CSS3 transition过渡，transform2D移动 translate 旋转 rotate 缩放 scalse， animation动画，.transform: translate3d详解

最新推荐文章于 2024-04-23 16:06:33 发布
VIP文章 最新推荐文章于 2024-04-23 16:06:33 发布
阅读量1.5k 收藏 1
点赞数 1
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42270374/article/details/107805409
版权

    filter:函数()

<title>Document</title>

    <style>

        img{

            filter: blur(5px);

        }

        img:hover{

            filter: blur(0);

        }

    </style>

</head>

<body>

    <!-- filter csss属性将模糊或颜色便宜等图形效果应用于元素 -->

    <!-- filter:函数()  filter:blur(5px);blur模糊处理 数值越大越模糊 -->

   <img src=".././imgs/bg.gif" alt="">

</body>

</html>

2.   calc() 函数 

<!-- css3 cal函数 -->

    <!-- calc()此css函数让你在声明css属性值执行一些计算 -->

    <!-- 括号里面可以使用+-*/来进行计算 -->

    <style>

        .father{

            width: 300px;

            height: 200px;

            background-color: pink;

        }

        .son{

            width: calc(250 - 30px);

            height: 30px;

            background-color: skyblue;

        }

    </style>

</head>

<body>

    <div class="father">

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

    </div>

</body>

</html>

3.transition过渡

    <title>Document</title>

    <style>

    <!-- 过渡动画:是从一个状态渐渐的过渡到另一个状态，经常和:hover一起用 -->

    <!-- transition:要过渡的属性 花费时间 运动曲线 何时开始 -->

      div{

          width: 200px;

          height: 100px;

          background-color: pink;

          /* transition: width .5s ease 1s; */

          /* transition: height .5s ease 1s; 没变化 */

 

          /* 如果想要写多个属性，利用逗号隔开 */

          transition:width .5s,height .5s ;

 

          /* 如果想要多个属性都变化，属性写all就可以了 */

          /* 谁做过渡给谁加 */

          transition: all .5s;

      }

      div:hover{

          width: 400px;

          height: 500px;

          background-color: lawngreen;

      }

    </style>

</head>

<body>

   <div></div>

</body>

</html>

案列：transition 进度条

    <title>Document</title>

    <style>

        .bar{

            width: 150px;

            height: 15px;

            border: 1px solid red;

            border-radius:7px ;

            padding: 1px;

            transition: all 10s;

        }

        .bar_in{

            width: 50%;

            height: 100%;

            background-color: red;

        }

        .bar:hover .bar_in{

            width: 100%;

        }

    </style>

</head>

<body>

    <div class="bar">

        <div class="bar_in"></div>

    </div>

</body>

</html>

 

4.    transform: translate()位移

    <title>Document</title>

    <style>

    <!-- 实现元素的位移，旋转，缩放等效果 -->

    <!-- 移动 translate 旋转 rotate 缩放 scalse -->

<!-- 移动盒子的位置:定位 盒子的外边距  2d的转换移动 -->

        div{

            width: 200px;

            height: 200px;

            background-color: pink;

            /* x就是x轴上移动位置，y轴就是y轴上移动位置，中间用逗号隔开 */

            transform: translate(x,y);

            transform: translate(100px,100px);

            /* 只移动x轴 */

            transform: translate(100px);

        }

    </style>

</head>

<body>

<div></div>

</body>

</html>

案列：让盒子水平居中

    <title>Document</title>

    <style>

        div{

            position: relative;

            width: 400px;

            height: 400px;

            /* 我们tansform里面的参数可以用%

            如果里面的参数据哦%移动的距离是盒子自身的宽度或则高度来对比的

            这里的50%就是50px，因为盒子的宽度是100px */

            background-color: pink;

            /* transform: translateX(50%); */

        }

        p{

            position: absolute;

            top:50%;

            left: 50%;

            width: 200px;

            height: 200px;</

最低0.47元/天 解锁文章
^smile
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3实现导航动画效果transform及transition
11-05
css3实现导航动画效果transform及transition css3实现导航动画效果transform及transition
CSS3转换属性—transform之translate、rotate、scale函数详解
热门推荐
青春木鱼的博客
11-14 1万+
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜、透视等。其中，skew(倾斜)，perspective（透视）不常使用。transform是css3新增的属性，在IE9及以下的浏览器会出现兼容问题，所以要慎用！
模板插槽使用 vue3
grow_的博客
12-29 91
插槽模板使用
CSS3之transform属性-3D转换
杨筱斌的博客
12-18 1542
三维坐标系 x 轴：水平向右 – 注意：x轴右边是正值，左边是负值 y 轴：垂直向下 – 注意：y轴下面是正值，上面是负值 z 轴：垂直屏幕 – 注意：z轴往外是正值，往里是负值   3D旋转左手准则 左手的手拇指指向旋转轴的正方向 其余手指的弯曲方向就是该元素沿着该旋转轴旋转的方向（正值方向）   transform: 作用：   &nbsp...
CSS之transform 2D 与 3D 转换（十五）
全粘小谭的博客
10-06 865
该文主要讲解了围绕transform属性展开的2D转换，3D转换等一系列相关属性的用法及注意事项，字数较多，建议细嚼慢咽。
CSS3-3D转换
weixin_49455047的博客
11-26 2833
目录 1.1三维坐标系 1.2 3D移动translate3d 1.3 透视perspective 1.4 3D旋转 rotate3d 1.5 3D呈现 transform-style 2.1两面翻转盒子案例 3D导航栏 旋转木马 有什么特点 近大远小 物体后面遮挡不可见 1.1三维坐标系 x轴：水平向右 注意：x右边是正值，左边是负值 y轴：水平向下 注意：y下边是正值，上边是负值 z轴：垂直屏幕 注意：往外面是正值，往里面是负值 .
transform 平面转换（3d）
qq_50260510的博客
03-13 1543
使用transform属性实现元素在空间内的位移、旋转、缩放等效果。是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。2.transform: translateX(值);3.transform: translateY(值);4.transform: translateZ(值);1.正负均可2.像素单位数值3.百分比。
还不知道transform 3D转换怎么用？看这个就够了
欢迎访问我的主页：https://www.bookbook.cc
03-21 8765
还不知道transform 3D转换怎么用？看这个就够了
CSS -- CSS3中3D转换相关属性讲解（translate3d，rotate3d，perspective，transform-style）
Qlz的博客
12-22 3050
3D转换 1 三维坐标系 2 3D移动 translate3d 3 透视 perspective 4 3D 旋转 rotate3d 5 3D旋转 rotate3d 6 3D呈现 transform-style 7 3D案例 3D转换 我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。 3D特点： 近大远小。 物体后面遮挡不可见 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 1 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴：水平向右 注意
CSS3的transform之3d转换、CSS3动画
m0_46324704的博客
07-18 2358
transform的3d转换和动画的基本使用方法
纯css3 transition动画过渡属性制作鼠标悬停图片标题
11-24
纯css3 transition动画过渡属性制作鼠标悬停图片标题
浅析CSS3 中的 transition，transform，translate之间区别和作用
11-21
translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少 例如： transform：translate(0,100%) 表示从元素的当前位置延y轴方向，向...
css3 transform过渡抖动问题解决
01-18
transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如： transform: scale(1.2); 换成： transform: scale(1.2) rotate(0.1deg); transform:translate();偏移会使图片或文字变得模糊 transform偏移...
CSS3与动画有关的属性transition、animation、transform对比（史上最全版）
12-13
最近应公司需求，需要用css3做动画，终于把以前一直傻傻分不清楚的三个属性理解了。 索性在这里进行一个简单的对比，加深自己的记忆。 浏览器兼容性 CSS3 transform 属性 Internet Explorer 10、Firefox、Opera 支持...
CSS基础选择器
bengbeng2345的博客
04-23 628
h1,p,...所有元素{margin: 0px;}（消除默认边框的影响）标签内容（常用于去除页面标签默认的margin和padding）标签内容优先级：ID选择器>类选择器>标签选择器。
关于__Federico Milano 的电力系统分析工具箱.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
mlab-upenn 研究小组的心脏模型模拟.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
混合图像创建大师matlab代码.zip
最新发布
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
中序遍历二叉树-java版本
04-26
在Java中，实现二叉树的中序遍历同样可以通过递归来完成。中序遍历的顺序是：首先递归地中序遍历左子树，然后访问根节点，最后递归地中序遍历右子树。 在这段代码中，Node类定义了二叉树的节点，BinaryTree类包含一个指向根节点的指针和inOrder方法，用于递归地进行中序遍历。printInOrder方法调用inOrder方法并打印出遍历的结果。 在Main类中，我们创建了一个示例二叉树，并调用printInOrder方法来输出中序遍历的结果。输出应该是：4 2 5 1 3，这表示中序遍历的顺序是左子树（4），然后是根节点（2），接着是右子树的左子树（5），然后是右子树的根节点（1），最后是右子树的右子树（3）。
CSS3的变形transform、过渡transition、动画animation学习
05-25
CSS3的变形(transform)、过渡(transition)、动画(animation)是CSS3中非常重要的特性，可以为网页设计带来更加丰富的交互效果和视觉体验。 1. 变形(transform) 变形是指通过CSS3中的transform属性对元素进行平移、...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值