广告
返回顶部
首页 > 资讯 > 前端开发 > node.js >css3过渡与转换的方法
  • 828
分享到

css3过渡与转换的方法

css3 2022-10-19 18:10:44 828人浏览 八月长安
摘要

这篇文章主要介绍“css3过渡与转换的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS3过渡与转换的方法”文章能帮助大家解决问题。一 css3过渡 转换cs

这篇文章主要介绍“css3过渡与转换的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS3过渡与转换的方法”文章能帮助大家解决问题。

一 css3过渡 转换

css3过渡(transition)允许我们在限定的时间内从一个属性值转变到另一个属性值.

●transition-property:指定要转换的属性

●transition-duration:指定转换发生的持续时间

●transition-timing-function:指定转换的速度在其持续时间内如何变化

●transition-delay:指定过渡效果的延迟(以秒为单位)

在下面的例子中,我们将transition属性设置为持续时间为5s的转换效果.并设置ease-in定时函数,该函数有淡入的效果.

css代码:

transition:transfORM 5s ease-in;

过渡效果可以应用于各种css属性,包括:背景颜色,宽度,高度,不透明度等等.

在下面的例子中,div元素的宽度和高度都是100px,并有一个红色的背景.我么为width属性指定一个过渡效果,持续时间为3s.

css代码:

div.transition{ width:100px; height:100px;background:red;color:white;transition:width 3s; }

div.transition:hover{ width:250px;}

效果如下:

如果你将光标悬停在div元素上,则会从左向右移动.

当光标被移出div元素时,它将逐渐变回原来的样式.

transition-timing-function属性指定过渡效果的速度曲线.

它可以有以下值:

ease:动画开始缓慢,然后加速(默认值)

ease-in:缓慢开始,然后加速,突然停止.

ease-out:快速启动,但减速停止.

ease-in-out:类似于缓解,但更加微妙的加速和减速.

linear:匀速转换

cubic-bezier()函数,它允许你在cubic-bezier(立方体-贝塞尔)函数中定义你自己的值.取值范围为0~1之间.

css代码:

transition-timing-function:cubic-bezier(0,0,1,1);

二 css3 transform:rotate()

css3中transform(转换)允许你翻转,旋转,缩放和倾斜元素.

transform(转换)是一种让元素更改形状,大小和位置的效果

css3支持2d和3D转换.

设置15deg的角度旋转(顺时针方向旋转),css代码如下:

transform:totate(15deg);

正值,顺时针旋转;负值,逆时针旋转.

三 css3 transform-origin,translate(),skew()

transition-origin(原点)属性允许你更改要转换元素的位置.该属性的默认值是50% 50%,对应于元素的中间.

在下面的例子中,我们将transform-origin属性和transform-ratate一起使用.x轴(水平)的原点从左侧设定为30%.

y轴(垂直)的原点从上方设定为80%.

css代码:

div.empty-div{position:relative;height:100px;width:100px;margin:30px;padding:10px;border:2px solid black;}

div.green-div{  padding:50px; position:absolute;background-color:LightGreen;border:2px  solid red;transform:rotate(15deg);transform-origin:30% 80%;}

0 0 与左上相同,100% 100%与右下相同.

transform-origin属性必须与transform属性一起使用.

translate()方法从当前位置移动一个元素(根据给定的x轴和y轴的参数).正值会将元素

向下推到其默认位置的右侧.而负值则会将元素向上并拖至其默认位置的左侧.

css代码:

transform:translate(120px,60px);

skew()通过给元素设置x轴和y轴的倾斜角度值来实现倾斜.

以下例子,沿着x轴将<div>元素倾斜45度

css代码:

transform:skew(45deg);

-WEBkit-transform:skew(45deg);

如果没有指定第二个参数,则它的默认值为零.

四 css3 scale()函数和多重变换

scale()方法根据已设定的高度和宽度参数来增加或减少元素的大小.1代表原始大小,2代表原始尺寸的两倍,以此类推.

css代码:

transform:scale(0.7 0.7);

如果只传递一个参数,则默认宽度与高度都使用该参数.

一次可以使用多个转换.比如同时旋转和缩放元素的大小.对元素应用多个变换,只需要用空格隔开它们.

css代码:

transform:rotate(35deg) translate(120px);

五 css3关键帧与动画

动画让一个元素从一种风格变为另一种风格.

你可以根据需要更改任意数量的css属性.

关键帧将保存元素在特定时间的样式

@keyframes规则

当你在@keyframes规则中指定css样式时,动画将在某些时间从当前样式逐渐变为新样式.

要使动画起作用,必须将动画绑定到元素.

以下例子,将更改元素的背景颜色三次:动画完成50%,完成70%,动画完成100%时.

@keyframes animation-name{ 0% {background-color:red;} 50% {background-color:yellow;} 70% {background-color:green;}

100% {background-color:green;} }

animation-name是为动画指定的名字,你可以设置成任意的名字.

作为百分比的替代方法,你可以使用from和to关键字分别代替0%起始点,100%结束点.

要使动画起作用,必须将动画绑定到元素.

在下面的例子中,动画持续一秒钟,并将红色div的背景颜色更改为绿色和蓝色

div.animation{ width:100px;height:100px;background-color:red;animation-name:能否;animation-duration:1s;}

@keyframes 能否{ 0% {background-color:red;} 50%{ background-color:green;} 100%{background-color:blue;} }

背景颜色将在1s内自动变化.

animation-name:指定动画的名字.

animation-duration:指定所选动画的持续时间.

如果为指定animation-duration属性,则动画将不起作用.因为默认值是0.

关于“css3过渡与转换的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网node.js频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: css3过渡与转换的方法

本文链接: https://www.lsjlt.com/news/92365.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • css3过渡与转换的方法
    这篇文章主要介绍“css3过渡与转换的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3过渡与转换的方法”文章能帮助大家解决问题。一 css3过渡 转换cs...
    99+
    2022-10-19
    css3
  • css3过渡图画转换
    css3渐变线性渐变(Linear Gradient)- 向下/向上/向左/向右/对角方向径向渐变(Radial Gradient)- 由它们的中心定义repeating-linear-gradient() 函数用于重复线性渐变:线性渐变:...
    99+
    2023-01-31
    图画
  • Css3过渡渐变的方法怎么使用
    这篇文章主要介绍“ Css3过渡渐变的方法怎么使用”,在日常操作中,相信很多人在 Css3过渡渐变的方法怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答” Css3过渡渐...
    99+
    2022-10-19
    css3
  • 如何使用css3实现转换过渡和动画效果
    这篇文章主要介绍了如何使用css3实现转换过渡和动画效果,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。为什么要用css动画替换js动画  导致JavaScript效...
    99+
    2023-06-08
  • CSS3的3D转换方法是什么
    这篇文章主要介绍了CSS3的3D转换方法是什么的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇CSS3的3D转换方法是什么文章都会有所收获,下面我们一起来看看吧。  ...
    99+
    2022-10-19
    css3
  • 怎么使用CSS实现盒子的转换与过渡效果
    这篇文章主要讲解了“怎么使用CSS实现盒子的转换与过渡效果”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么使用CSS实现盒子的转换与过渡效果”吧!tran...
    99+
    2022-10-19
    css
  • Vue3过渡动画的方法
    本篇内容主要讲解“Vue3过渡动画的方法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue3过渡动画的方法”吧!Vue的transition组件Vue中中提供了transition组件,该组件...
    99+
    2023-06-29
  • torch.utils.data.DataLoader与迭代器转换的方法
    这篇文章主要介绍“torch.utils.data.DataLoader与迭代器转换的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“torch.utils.data.DataLoader与迭代器...
    99+
    2023-06-29
  • iwms access与sql版的安装与转换方法
    本篇内容介绍了“iwms access与sql版的安装与转换方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2022-10-18
    iwms access sql
  • MYSQL与SQLserver之间存储过程的转换方式
    目录mysql与SQLserver之间存储过程的转换mysql存储过程sqlserver存储过程SQLserver转MYSQL存储过程的经验1. 存储过程的定义方式存在区别2. 批处理分隔符存在差异3. 可直接替换的关键...
    99+
    2022-11-28
    MYSQL存储过程 SQLserver存储过程 MYSQL与SQLserver储过程转换
  • 几种常见的HTML与PDF转换方法
    HTML与PDF是两种常见的文档格式,HTML用于在web浏览器中呈现内容,而PDF用于打印和文档共享。有时我们需要将HTML转换成PDF或将PDF转换成HTML以适应不同的需求。本文将介绍几种常见的HTML与PDF转换方法。一、使用在线转...
    99+
    2023-05-14
  • fastjson--对象与JSON之间的转换方法
    1、Java对象–>JSON对象: (JSONObject)JSONObject.toJSON(Java对象实例) public class JSON2JavaTest{ public static...
    99+
    2023-09-04
    json java
  • java中JsonObject与JsonArray转换方法实例
    目录备忘一下,首先JsonArray转换为JsonObjectJsonArrayStr 转换为 JsonObjectStr补充:java中JSONObject和JSONArray解析...
    99+
    2023-05-17
    jsonobject和jsonarray的转换 jsonobject转换成jsonarray jsonarray转jsonstring
  • Python进制转换和ASCLL转换的方法
    这篇文章主要介绍“Python进制转换和ASCLL转换的方法”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“Python进制转换和ASCLL转换的方法”文章能帮助大家解决问题。进制转换进制之间的转换主...
    99+
    2023-06-29
  • Vue.2.0.5过渡效果的实现方法
    小编给大家分享一下Vue.2.0.5过渡效果的实现方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!概述Vue 在插入、更新或者...
    99+
    2022-10-19
    vue
  • go类型转换及与C的类型转换方式
    GO类型转换及与C的类型转换 类型转换 语法 dst := float32(src) 示例 var num int = 520 f32 := float32(num) i6...
    99+
    2022-06-07
    GO
  • ascii码转换的方法
    小编给大家分享一下ascii码转换的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!ascii码的转换方法:1、使用【chr()】函数转换,代码为【>&g...
    99+
    2023-06-06
  • golang 的string与[]byte转换方式
    相对于C语言,golang是类型安全的语言。但是安全的代价就是性能的妥协。 下面我们看看Golang不想让我们看到的“秘密”——string的底层数据。 通过reflect包,我们可...
    99+
    2022-11-12
    golang string []byte
  • java中Calendar与Date类型互相转换的方法
    下文笔者讲述使用Java代码将Calendar与Date类型互转的方法分享,如下所示:Calendar与Date类型是我们日常开发中常用的两种数据类型, 它们用于不同的场景,两者具有...
    99+
    2022-11-13
    java Calendar与Date类型互转 java Calendar与Date类型
  • C语言中QString与QByteArray互相转换的方法
    目录[1] QString与QByteArray互相转换的方法QString转QByteArray方法QByteArray转QString方法QByteArray类同样不以&rsqu...
    99+
    2023-05-20
    C语言 QString与QByteArray QString QByteArray
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作