CSS3的过渡和转换

CSS3的过渡和转换

1.过渡

  什么是过渡呢?过渡通俗的来说就是从一个样式到另一个样式的逐渐转换改变的效果。

  过渡的属性:

属性 描述css
transition简写属性,用于在一个属性中设置4个过渡属性3
transition-property规定应用过渡的css属性的名称3
transition-duration定义过渡效果所花费的时间。默认为03
transition-timing-function规定过渡效果的时间曲线。默认是“ease”3
transition-delay规定过渡效果何时开始。默认是 0 3

 

 

 

 

 

  transition:是一个简写属性,用于设置四个过渡属性,所以说我们用的时候只写这个属性就行了。

  transition-property:规定应用过渡效果的属性(可以设置单个属性,也可以写所有属性(all))。请始终设置这个属性,否则忽略这个属性。(就像你想给你的心上人打电话,但是你不知道TA的手机号你能给他打电话吗?)

  transition-duration:规定完成效果所需要的时间(以秒或者毫秒来计算)。这个也是必须写的属性(假如没有就不执行,因为默认值为 0 )

  transition-timing-function:规定过渡效果的速度曲线。默认是“ease”。他有6个字属性:

    linear        规定以相同的速度开始至结束的过渡效果。

    ease         规定慢速开始,然后变快,然后慢速结束的过渡效果。

    ease-in       规定以慢速开始的过渡效果

    ease-out       规定以慢速结束的过渡效果

    ease-in-out     规定以慢速开始和结束的过渡效果

    cubic-bizier(n,n,n,n)  在cubic-bezier函数中定义自己的值。可能是值范围为 0~1 之间

  transition-delay:规定过渡效果从何时开始,即我们常说的延时。

  效果:0.6s后开始执行过渡效果。

  代码

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>过渡效果</title>
 6     <style type="text/css">
 7         .square{
 8             width: 100px;
 9             height: 100px;
10             background: red;
11             transition: width 0.4s linear 0.6s;/*规定属性width 0.4s 匀速 完成过渡效果 延时0.6s完成*/
12         }
13         .square:hover{width: 300px;}
14     </style>
15 </head>
16 <body>
17     <div class="square"></div>
18 </body>
19 </html>

2.转换

  转换:向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动、或者倾斜

  属性:

    1.转换

        nooe              不进行转换

        matirx(n,n,n,n,n,n)        定义转换,使用6个值的距阵

        matirx3d(n,n,n,n,n,n,n,n,n,n,n,n)  定义3d转换,使用16个4*4的矩阵

      二维矩阵:matirx(n,n,n,n,n,n) ,就是基于水平方向和垂直方向重新定位元素

      三维矩阵:matirx(n,n,n,n,n,n) ,就是基于 X,Y,Z 三个方向重新定位元素

      此属性涉及数学中的矩阵,我在这里这是点一下就好。 

    2.移动

        translate(x,y)          定义2d移动,即可向左右、上下移动

        translate3d(x,y,z)        定义3d移动,x y z 3个方向转动

      translate(x,y) 平面移动,X为x轴方形移动,正为向右,负为向左。Y为y轴移动,正为向下,负为向上

            

      translate3d(x,y,z) 同 translate(x,y)一样只不过多了一个z轴移动

    3.缩放

        scale(x,y)           定义2d缩放

        scale3d (x,y,z)          定义3d缩放

    4.旋转

        rotate(x,y)           定义2d旋转

        rotate3d(x,y,z)         定义3d旋转

  缩放和移动就很简单了,大家从字面上就可以理解。

  

  因为这个只是在给大家举例子,所一说我就没有加前缀,希望大家在写的时候加上前缀。谢谢大家!!

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369479.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

zookeeper选举

什么时候开始进行选举 1.服务器初始化启动的时候2.服务器运行期间连接不上leader的时候 初始化选举过程 进行leader选举至少需要两台服务器&#xff0c;我们这里举例为5台服务器&#xff08;1,2,3,4,5&#xff09;1.启动服务器1&#xff0c;第一次投票都先投给自己[1,0]。投票内…

Java,如果这是一个更好的世界

只是梦想着有一个更好的世界&#xff0c;在该世界中&#xff0c;Java平台中的一些旧错误已得到纠正&#xff0c;而某些令人敬畏的缺失功能也已实现。 不要误会我的意思。 我认为Java很棒。 但是它仍然存在一些问题&#xff0c;就像其他平台一样。 我希望没有这些特定的命令&…

参数到不进oracle,Oracle对于启动参数检查不严格

偶然发现Oracle对于pfile启动参数的检查并不严格。比如修改参数文件如下&#xff1a;[oracleyans1 ~]$ vi initprimary.oraprimary.__db_cache_size1644167168primary.__java_pool_size16777216primary.__large_pool_size16777216...*.sga_target2147483648*.standby_file_mana…

使用PLSQL-Developer导出Oracle表及数据pdf版

《使用PLSQL-Developer导出Oracle表及数据pdf版》下载地址&#xff1a; 网盘下载 转载于:https://www.cnblogs.com/long12365/p/9731340.html

C 语言实例 - 使用结构体(struct)

C 语言实例 - 使用结构体&#xff08;struct&#xff09;C 语言实例 C 语言实例 使用结构体&#xff08;struct&#xff09;存储学生信息。 实例 #include <stdio.h> struct student {char name[50];int roll;float marks; } s;int main() {printf("输入信息:\n&quo…

oracle10g的rat模拟,Oracle 10g Logminer 研究及测试

LogMiner提供了一个处理重做日志文件并将其内容翻译成代表对数据库的逻辑操作的SQL语句的过程。LogMiner运行在Oracle版本8.1或者更高版本中。一&#xff0c;如何使用Logminer:先要安装logminer的两个包&#xff1b;以SYS用户运行下面两个脚本,其中第一个脚本dbmslm.sql用来创建…

JavaEE概念简介

这篇文章旨在澄清J2EE范例中使用的首字母缩写词和概念。 J2EE代表Java to Platform&#xff0c;Entreprise Edition。 它使创建模块化Java应用程序成为可能&#xff0c;并将其部署在应用程序服务器上。 它依赖于Java SE&#xff0c;Java SE是一组Java库的核心&#xff0c;所有J…

编程新手的疑惑:代码循环如何画出一个简单的三角形

对一个编程新手来说&#xff0c;最先知道了解的莫过于代码执行的三种结构&#xff0c;顺序结构、循环结构和选择结构。 其中个人认为相对难以理解的是循环结构&#xff0c;而针对循环结构的练习题最多的就是循环画出一种简单图形&#xff0c;比如三角形。 当初我在学习写三角形…

解析PHP跳出循环的方法以及continue、break、exit的区别介绍

PHP中的循环结构大致有for循环&#xff0c;while循环&#xff0c;do{} while 循环以及foreach循环几种&#xff0c;不管哪种循环中&#xff0c;在PHP中跳出循环大致有这么几种方式&#xff1a; 代码&#xff1a; <?php$i 1;while (true) { // 这里看上去这个循环会一直执行…

js php 数据类型判断,【js基础】变量类型判断

类型判断方法比较&#xff1a;如果需要想详细了解&#xff0c;请看下文:注&#xff1a;原封不动复制备份&#xff0c;防止删帖在JavaScript中&#xff0c;有5种基本数据类型和1种复杂数据类型&#xff0c;基本数据类型有&#xff1a;Undefined, Null, Boolean, Number和String&…

HTML阻止iframe跳转页面并使用iframe在页面内嵌微信网页版

昨天看到这篇文章[置顶]开源组件NanUI一周年 - 使用HTML/CSS/JS来构建.Net Winform应用程序界面 就想弄一个winform结合html5的一个小东西&#xff0c;突有兴致&#xff0c;想在里面嵌套一个微信网页版。 好了&#xff0c;想法一出来&#xff0c;就行动吧&#xff0c;最终效果…

使用Spring Data Redis进行缓存

在下面的示例中&#xff0c;我将向您展示如何使用Spring Data – Redis项目作为Spring 3.1中引入的Spring Cache Abstraction的缓存提供程序。 我对如何使用Spring的基于Java的配置有很多疑问&#xff0c;因此我将同时提供基于XML和Java的配置供您查看。 依存关系 在此示例中使…

标准模板库(STL)学习指南之set集合

set是关联容器。其键值就是实值&#xff0c;实值就是键值&#xff0c;不可以有重复&#xff0c;所以我们不能通过set的迭代器来改变set的元素的值&#xff0c;set拥有和list相同的特性&#xff1a;当对他进行插入和删除操作的时候&#xff0c;操作之前的迭代器依然有效。当然删…

搜狗语料库数据整编

1 #!/bin/bash2 if [ -z "$1" ] ; then3 echo "请指定输入目录"4 exit 15 elif [ ! -d $1 ] ; then6 echo "[$1]不是一个合法的输入路径"7 exit 18 fi9 if [ -z "$2" ] ; then 10 echo "请指定输出目录" 11 exi…

linux oracle swd.oui,centos7安装oracle11g报错,请问怎么解?

centos7安装oracle11g报错&#xff0c;请问怎么解&#xff1f;在centos7下安装oracle11g到85%时报错提示Error in invoking target install of makefile ins_ctxm.mk查了log提示如下INFO: Start output from spawned process:INFO: ----------------------------------INFO:INF…

CSS布局技巧之——各种居中

居中是我们使用css来布局时常遇到的情况。使用css来进行居中时&#xff0c;有时一个属性就能搞定&#xff0c;有时则需要一定的技巧才能兼容到所有浏览器&#xff0c;本文就居中的一些常用方法做个简单的介绍。 注&#xff1a;本文所讲方法除了特别说明外&#xff0c;都是兼容…

OpenJPA:内存泄漏案例研究

本文将提供完整的根本原因分析详细信息以及解决影响Oracle Weblogic Server 10.0生产环境的Java堆内存泄漏&#xff08;Apache OpenJPA泄漏&#xff09;的方法。 这篇文章还将演示在管理javax.persistence.EntityManagerFactory生命周期时遵循Java Persistence API最佳实践的重…

了解真实的rem手机屏幕适配

rem 作为一个低调的长度单位&#xff0c;由于手机端网页的兴起&#xff0c;在屏幕适配中得到重用。使用 rem 前端开发者可以很方便的在各种屏幕尺寸下&#xff0c;通过等比缩放的方式达到设计图要求的效果。 rem 的官方定义『The font size of the root element.』&#xff0c;…

JDBC查询Oracle全部表名称,如何使用JDBC API从Oracle数据库中的现有表中检索记录?...

您可以使用UPDATE查询来更新/修改表中记录的现有内容。使用此功能&#xff0c;您可以更新表的所有记录或特定记录。语法UPDATE table_nameSET column1 value1, column2 value2...., columnN valueNWHERE [condition];要使用JDBC API更新表中记录的内容&#xff0c;您需要-注…

JUnit与EasyMock合作

开发人员始终需要注意所产生的代码。 在实施新功能或修复某些错误之后&#xff0c;应确保它们能够正常工作。 至少可以借助单元测试来实现。 由于此博客致力于Java编程语言&#xff0c;因此今天我将撰写有关JUnit 4.1和EasyMock 3. 1框架的文章。 这些框架的主要目的是简化单元…