过渡效果和变形详细图示

最新推荐文章于 2024-09-02 10:11:50 发布
最新推荐文章于 2024-09-02 10:11:50 发布
阅读量127 收藏
点赞数
分类专栏： # HTML/CSS 正在路上的前端攻城狮的烂笔记 文章标签： css css3 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45660621/article/details/121022388
版权

目录

过渡效果(transition)

在css3中发布了三种新添加的特性，可以让静止的网站变得动起来，而且不需要借助js脚本就能实现。
这便是其中的一种，过渡。

transition-duration

transition-duration 属性规定完成过渡效果需要花费的时间。

    <style>
        div {
            width: 100px;
            height: 100px;
            background: lightblue;
            transition-property: width;
            transition-duration: 5s;
        }

        div:hover {
            width: 333px;
        }
    </style>
<body>
    <div></div>
    <p>将鼠标移动至块上即可看到过渡动画效果.</p>
    <p><b>注意:</b> 该过渡效果会持续5s.</p>
</body>

过渡经常和:hover一起使用，效果为：
在这里插入图片描述

transition-property

transition-property 属性规定应用过渡效果的 CSS 属性的名称。

<style>
    div
    {
        width:100px;
        height:100px;
        background:green;
        transition-duration:3s;
       
        transition-property:width,height,background-color;
    }
    div:hover
    {
        width:333px;
        height: 222px;
        background-color: #2ebb96;
    }
</style>
<body>
   <div></div>
   <p>将鼠标移动至块上即可看到过渡动画效果.</p>
   <p><b>注意:</b> 该过渡效果会持续3s.指定的width,height,background-color会发生改变</p>
</body>

效果为
在这里插入图片描述

transition-delay

transition-delay 属性指定何时将开始切换效果。

<style>
    div
    {
        width:100px;
        height:100px;
        background:green;
        transition-duration:3s;
        transition-property:width,height,background-color;
        transition-delay: 1s;
    }
    div:hover
    {
        width:333px;
        height: 222px;
        background-color: #2ebb96;
    }
</style>
<body>
   <div></div>
   <p>将鼠标移动至块上即可看到过渡动画效果.</p>
   <p><b>注意:</b> 该过渡效果会持续3s.指定的width,height,background-color会发生改变</p>
</body>

效果为
在这里插入图片描述

transition-timing-function

transition-timing-function属性指定切换效果的速度。
该属性使用贝塞尔曲线来设置，css提供了一些特定的效果，当然也可以自己自定义贝塞尔曲线函数。

  1. linear： 线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
  2. ease：默认值,平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
  3. ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
  4. ease-out： 由快到慢。等同于贝塞尔曲线(0, 0,0.58, 1.0)
  5. ease-in-out： 由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)
  6. cubic-bezier(, , , )：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内
    在这里插入图片描述
    然后我自定义了一个贝塞尔曲线cubic-bezier(0.71,1.8,1,-0.74);
    在这里插入图片描述
<style>
    div
    {
        width:100px;
        height:50px;
        background:green;
        color:white;
        font-weight:bold;
        transition:width 3s;
        margin-bottom: 10px;
    }

    #div1 {transition-timing-function: linear;}
    #div2 {transition-timing-function: ease;}
    #div3 {transition-timing-function: ease-in;}
    #div4 {transition-timing-function: ease-out;}
    #div5 {transition-timing-function: ease-in-out;}
    #div6 {transition-timing-function: cubic-bezier(0.71,1.8,1,-0.74);}
    div:hover
    {
        width:333px;
    }
</style>
<body>
    <p>将鼠标移至相应块上即可查看过渡动画.</p>
    <div id="div1" style="top:100px">linear</div>
    <div id="div2" style="top:150px">ease</div>
    <div id="div3" style="top:200px">ease-in</div>
    <div id="div4" style="top:250px">ease-out</div>
    <div id="div5" style="top:300px">ease-in-out</div>
    <div id="div6" style="top:300px">我的自定义</div>
</body>

效果：
在这里插入图片描述

transition

transition同样可以缩小

transition:[ transition-property ] || [ transition-duration ] ||
 [ transition-timing-function ] || [ transition-delay ];

变形（transition）

transform属性应用于元素的2D或3D转换。
指定相应的变形函数就能达到相应的效果。

旋转函数rotate

rotate(angle):旋转,参数angle表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转， 否则，按照逆时针旋转。

  • rotate(angle) 定义 2D 旋转，在参数中规定角度。
  • rotateX(angle) 定义沿着 X 轴的 3D 旋转。
  • rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
  • rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
  • rotate3d(x,y,z,angle) 定义 3D 旋转。
 <style>
        div
        {
            display: inline-block;
            margin: 30px;
            font-size: 14px;
            text-align: center;
            line-height: 150px;
            width:150px;
            height:150px;
            background:lightskyblue;
            color:white;
            transition:all 3s;
            margin-bottom: 10px;
        }

        #div1:hover {transform: rotate(360deg);}
        #div2:hover {transform: rotate(-360deg);}
        #div3:hover {transform: rotateX(360deg);}
        #div4:hover {transform: rotateY(360deg);}
        #div5:hover {transform: rotateZ(360deg);}
        #div6:hover {transform: rotate3D(1,1,1,180deg);}
        
    </style>
<body>
    <p>将鼠标移至相应块上即可查看过渡动画.</p>
    <p>这是2D的旋转</p>
    <div id="div1" >rotate(360deg)</div>
    <div id="div2" >rotate(-360deg)</div>
    <br>
    <p>这是3D的旋转</p>
    <div id="div3" >rotateX(360deg)</div>
    <div id="div4" >rotateY(360deg)</div>
    <div id="div5" >rotateZ(360deg)</div>
    <div id="div6" >rotate3D(1,1,1,180deg)</div>
</body>

为了效果上的直观，所以添加了过渡属性，让方块的改变更加清晰。
效果为：
在这里插入图片描述

移动translate

  • translate(x,y) 定义 2D 转换。
  • translateX(x) 定义转换，只是用 X 轴的值。
  • translateY(y) 定义转换，只是用 Y 轴的值。
  • translateZ(z) 定义 3D 转换，只是用 Z 轴的值。
  • translate3d(x,y,z) 定义 3D 转换。

这是2D的移动

<style>
    div
    {
        display: inline-block;
        margin: 30px;
        font-size: 14px;
        text-align: center;
        line-height: 150px;
        width:150px;
        height:150px;
        background:lightskyblue;
        color:white;
        transition:all 3s;
        margin-bottom: 10px;
    }

    #div1:hover {transform: translateX(200px);}
    #div2:hover {transform: translateY(200px);}
    #div3:hover {transform: translate(200px,200px);}
    
</style>
<body>
    <p>将鼠标移至相应块上即可查看过渡动画.</p>
    <p>这是2D的移动</p>
    <div id="div1" >X轴移动:translateX</div>
    <div id="div2" >Y轴移动:translateY</div>
    <br>
    <div id="div3" >XY轴移动:translate</div>
    <br>
</body>

效果为：
在这里插入图片描述

缩放scale

  • scaleX(x) 通过设置 X 轴的值来定义缩放转换。
  • scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
  • scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
  • scale(x[,y]?) 定义 2D 缩放转换。
  • scale3d(x,y,z) 定义 3D 缩放转换。
    2D方向的缩放
<style>
    div
    {
        display: inline-block;
        margin: 30px;
        font-size: 14px;
        text-align: center;
        line-height: 150px;
        width:150px;
        height:150px;
        background:lightskyblue;
        color:white;
        transition:all 3s;
        margin-bottom: 10px;
        margin-left: 50px;
    }

    #div1:hover {transform: scaleX(1.5);}
    #div2:hover {transform: scaleY(0.5);}
    #div3:hover {transform: scale(1.5,.5);}
</style>
<body>
    <p>将鼠标移至相应块上即可查看过渡动画.</p>
    <p>这是2D的缩放</p>
    <div id="div1" >X轴放大:scaleX(1.5)</div>
    <div id="div2" >Y轴缩小:scaleY(0.5)</div>
    <br>
    <div id="div3" >XY轴缩放:scale(1.5,.5)</div>
</body>

效果为：
在这里插入图片描述

倾斜skew

  • skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
  • skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
  • skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
 <style>
     div
     {
         display: inline-block;
         margin: 30px;
         font-size: 14px;
         text-align: center;
         line-height: 150px;
         width:150px;
         height:150px;
         background:lightskyblue;
         color:white;
         transition:all 3s;
         margin-bottom: 10px;
         margin-left: 50px;
     }

     #div1:hover {transform: skewX(45deg);}
     #div2:hover {transform: skewY(45deg);}
     #div3:hover {transform: skew(15deg,30deg);}
     
 </style>
<body>
    <p>将鼠标移至相应块上即可查看过渡动画.</p>
    <p>这是2D的缩放</p>
    <div id="div1" >X轴倾斜45度:skewX(45deg)</div>
    <div id="div2" >Y轴倾斜45度:skewY(45deg)</div>
    <br>
    <div id="div3" >XY轴倾斜:skew(15deg,30deg)</div>
</body>

效果为：
在这里插入图片描述

1900's 88 keys
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
球面数据的几何深度学习--球形 CNN
gongdiwudu的专栏
03-22 1953
球面数据的几何深度学习--球形 CNN。通过对物理世界的平移对称性进行编码，卷积神经网络 （CNN） 彻底改变了计算机视觉。
CSS3过渡
YourLie_in_April的博客
04-10 1040
transition： 过渡属性。（如果两个状态发生改变，没有过渡，效果是瞬间变化的。如果加上了过渡，那么这个过程就会有动画的效果。） transition-property：过渡或动态模拟的CSS属性。（可以是width,height等，一般使用all） transition-duration： 完成过渡所需要的时间。（单位s） transition-timing-function： 指定过渡速度函数。（ linear 线性过渡、ease 平滑过渡、ease-in 由慢到快、ease-out 由快
过度Transition与transform 转换
qq_39366219的博客
07-20 778
过度Transition css的transition允许css的属性值在一定的时间区间内平滑的过渡 语法格式 transition：属性名 时间 速度曲线 何时开始 transition：width 2s ease-in 2s; -webkit-transition:width 2s ease-in 3s;  width 因为我们是为宽度写了hover后的值，所以如果这里写h
卷积神经网络超详细介绍
热门推荐
呆呆的猫的博客
09-19 61万+
海量的有标记的训练数据，也就是李飞飞团队提供的大规模有标记的数据集ImageNet计算机硬件的支持，尤其是GPU的出现，为复杂的计算提供了强大的支持算法的改进，包括网络结构加深、数据增强（数据扩充）、ReLU、Dropout等AlexNet之后，深度学习便一发不可收拾，分类准确率每年都被刷榜，下图展示了模型的变化情况，随着模型的变深，Top-5的错误率也越来越低，目前已经降低到了3.5%左右，同样的ImageNet数据集，人眼的辨识错误率大概为5.1%，也就是深度学习的识别能力已经超过了人类。
好用的css3特性-过渡和2D变换
hello ice cream
04-21 211
css3中有很多非常好用的特性，今天来总结一下与动画相关，包括过渡、2D变化、以及设置动画。 首先来介绍一下过渡，过渡是在进行变化的时候进行的一个缓冲，如果没有过渡，当变更了元素的位置、大小的数据时，会一瞬间完成变化，增加了过渡之后，变化的过程会展现出来。比如以下gif，我们想要在鼠标移入盒子的时候，将盒子的宽和高增大一倍，并且更改颜色，没有过渡和过渡明显在用户体验上就不一样。 过渡的写法也简单，只需要在变化的基础上增加一个 transition 就行 transition: 过渡属性 过渡时.
图像变形：约束Wasserstein重心
以色列电子邮件：dror.cs.technion.ac.ilAviadAberdamTechnionHaifa，以色列aaberdam@cs.technion.ac.il摘要图像插值或图像变形是指两个（或更多个）输入图像之间的视觉过渡。为了使这种过渡看起来在视觉上吸引人，...
Core Animation：动画和CALayer子类（代码示例和图示）
rccrx的博客
09-27 386
CALayer和CAShapeLayer； CATextLayer； CAGradientLayer； CAEmitterLayer； CAScrollLayer； CATiledLayer； CAReplicatorLayer； CABasicAnimation； CAKeyframeAnimation； CASpringAnimation； CATransition； CAAnimationGroup； CADisplayLink； CAMediaTimingFunction
Chrome的hack写法以及CSS的支持程度图示
10-30
- **Transforms**与**Transitions**：这些特性使得元素可以平滑过渡或变形，Chrome提供了优秀的支持，并且性能表现优异。 - **Animations**：动画支持包括关键帧动画和属性动画等，Chrome在这方面的支持也非常成熟。...
使用SNARF实现适应铰接3D形状的神经隐式动画
Black3OtmarHilliges1Andreas Geiger2，31ETHZürich，DepartmentofComputerScience2Un i versityofTübingen3德国图宾根马克斯·普朗克智能系统研究所摘要神经隐式表面表示已经成为以连续和分辨率无关的方式捕获3D...
CSS中禁用DOM事件
bingmoujs的博客
08-26 985
表示元素不应对鼠标事件进行响应。这包括鼠标的点击、悬停和其他鼠标相关的动作。这个属性指定当鼠标指针设备（如鼠标）在元素上时，事件应该有什么表现。
css画个熊猫
此博客内容主要是小可日常工作中的一些问题解决的记录整理而成
08-29 770
【html源码-一键复制查看效果】/* 不规则的圆形写法 *//* 半圆线条 */
CSS基础 什么是盒模型
呼叫6945的博客
08-28 801
当对一个文档进行布局（layout）的时候，浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型（CSS basic box model），将所有元素表示为一个个矩形的盒（box）一个盒子由四个部分组成：content、padding、border、margin在css中盒模型可以分为假设一个盒子的css如下。
css重置样式表 reset.css 格式化默认css样式
weixin_47121832的博客
08-30 591
css重置样式表 reset.css 格式化默认css样式
CSS实现水滴效果图
N201871643的博客
08-26 1054
水滴效果：指在网页上呈现出水滴从上方滴落的效果，通常伴随着水波纹扩散的动画效果。CSS：层叠样式表（Cascading Style Sheets），是一种用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档呈现的样式语言。
在React中使用TypeScript和Material-UI v5时，要为单个.tsx文件创建一个局部作用域的.scss文件如何做? 另外主题如何获取呢?
qq_42391246的博客
08-30 807
使用CSS模块的好处是你可以编写普通的CSS（或SCSS），并且所有类名都会自动转换为唯一的局部作用域名。这意味着你可以在不同的组件中自由地使用相同的类名，而不用担心它们之间的样式冲突。使用CSS变量的好处是你可以在SCSS文件中保持样式的封装，同时能够利用React的上下文来动态地更改这些值。文件中使用MUI的主题，你需要采取不同的方法，因为SCSS文件不直接访问到React的上下文中的主题对象。另一种方法是在你的JSX中定义CSS变量，并在SCSS文件中使用这些变量。文件中，编写你的样式。
css实现卡片右上角的状态
最新发布
时漂亮的博客
09-02 344
【代码】css实现卡片右上角的状态。
CSS3动画——飞行的小精灵
懒羊羊大王的博客
08-25 2600
通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。
css-functions-属性函数
Jinuss的博客
08-29 887
CSS Functions之属性函数
LDAP安装和配置详细步骤图示指南
本文将详细介绍LDAP的安装和配置过程，以及相关的步骤图，以便读者能够更快速地完成该过程。 在进行LDAP安装之前，需要按照以下步骤创建用户： 1. 在/portal/install/A-6目录下运行setup程序。 2. 选择简体中文并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值