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,一经查实,立即删除!

相关文章

JavaEE概念简介

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

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;最终效果…

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

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

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最佳实践的重…

以A表中的值快速更新B表中记录的方法

1、问题描述 有两张表&#xff0c;A表记录了某些实体的新属性&#xff0c;B表记录了每个实体的旧属性&#xff0c;现在打算用A中的属性值去更新B中相同实体的旧属性&#xff0c;如下图所示&#xff1a; 类似这样的需求&#xff0c;怎样做比较高效呢&#xff1f; 2、制作模拟数…

JAXB教程–入门

注意&#xff1a;请查看我们的Java XML绑定JAXB教程– ULTIMATE指南 什么是JAXB&#xff1f; JAXB代表用于XML绑定的Java体系结构。它用于将XML转换为java对象&#xff0c;并将java对象转换为XML。JAXB定义了一个用于在XML文档中读写Java对象的API。与SAX和DOM不同&#xff0c…

《Kubernetes权威指南第2版》学习(二)一个简单的例子

1&#xff1a; 安装VirtualBox, 并下载CentOS-7-x86_64-DVD-1708.iso&#xff0c; 安装centOS7,具体过程可以百度。 2&#xff1a;开启centOS的SSH&#xff0c; 步骤如下&#xff1a; &#xff08;1&#xff09; yum list installed | grep openssh-server查看是否已经安装了SS…

linux 安装ftp下载,LINUX FTP安装与配置

转载了一篇配置vsftpd服务器的文章&#xff0c;经过自己的配置&#xff0c;终于搞定了&#xff01;1.安装vsftpdXml代码 yum install vsftpd2.启动/重启/关闭vsftpd服务器Xml代码 [rootlocalhost ftp]# /sbin/service vsftpd restartShutting down vsftpd: [ OK ]Starting vs…

使用Hibernate批量获取

如果需要从Java处理大型数据库结果集&#xff0c;则可以选择JDBC&#xff0c;以提供所需的低级控制。 另一方面&#xff0c;如果您已在应用程序中使用ORM&#xff0c;则回退到JDBC可能意味着额外的麻烦。 在域模型中导航时&#xff0c;您将失去乐观锁定&#xff0c;缓存&#x…

前端经典面试题 不经典不要star!

前言 (以下内容为一个朋友所述)今天我想跟大家分享几个前端经典的面试题,为什么我突然想写这么一篇文章呢?今天我应公司要求去面试了下几位招聘者,然后又现场整不出几个难题,就搜了一下前端变态面试题! HAHA&#xff0c;前提我并不是一个变态,欺负人的面试官.只是我希望看看对…

Web前端开发学习误区,你掉进去了没?

从接触网站开发以来到现在&#xff0c;已经有五个年头了吧&#xff0c;今天偶然整理电脑资料看到当时为参加系里面一个比赛而做的第一个网站时&#xff0c;勾起了在这网站开发道路上的一串串回忆&#xff0c;成功与喜悦、烦恼与纠结都历历在目&#xff0c;感慨颇多。 先从大家学…

spring mvc的工作原理

该文转载自&#xff1a;http://blog.csdn.net/u012191627/article/details/41943393 SpringMVC框架介绍 1) spring MVC属于SpringFrameWork的后续产品&#xff0c;已经融合在Spring Web Flow里面。 Spring 框架提供了构建 Web 应用程序的全功能 MVC 模块。使用 Spring 可插入的…

使用IntelliJ IDEA的原因

介绍 我经常遇到一个问题&#xff0c;为什么我使用Intellij来支持另一个IDE&#xff08;在本例中为Eclipse&#xff09;。 大多数时候&#xff0c;我会通过演示IntelliJ的某些功能并展示一切的集成程度来回答这个问题。 这让我开始思考使用它的真正原因是什么。 这篇文章将试图…

linux光标美化包,使用 [ powerlevel10k ] 美化你的WSL (Linux)

使用 [ powerlevel10k ] 美化你的WSL (Linux)使用 [ powerlevel10k ] 美化你的WSL (Linux)前言关于linux终端的美化&#xff0c;网上的教程有很多&#xff0c;但对于国内的用户来说&#xff0c;效果往往是这样的&#xff1a;教程中通过以下命令安装 oh-my-zshsh -c "$(cur…

HashMap实现原理分析

1 HashMap的数据结构 数据结构中有数组和链表来实现对数据的存储&#xff0c;但这两者基本上是两个极端。 数组 数组存储区间是连续的&#xff0c;占用内存严重&#xff0c;故空间复杂的很大。但数组的二分查找时间复杂度小&#xff0c;为O(1)&#xff1b;数组的特点是&#xf…

opencv3.2.0在vs2015下安装与配置

准备工作 VS2015OpenCV 3.2.0OpenCV配置环境变量&#xff0c;path下添加\opencv\build\x64\vc14\bin&#xff0c;新设置的环境变量需要重启才能使用测试工程 新建VC控制台空项目修改平台为x64&#xff0c;这一步先做源文件中加入main.cpp&#xff0c;测试代码&#xff1a;#incl…

如何使用字节序列化双精度数组(二进制增量编码,用于低差单调浮点数据集)...

低延迟系统需要高性能的消息处理和传递。 由于在大多数情况下&#xff0c;数据必须通过有线传输或进行序列化才能保持持久性&#xff0c;因此编码和解码消息已成为处理管道的重要组成部分。 高性能数据编码的最佳结果通常涉及应用程序数据细节的知识。 本文介绍的技术是一个很好…

微信小程序 引入公共页面的几种情况

1、不带参数 首先在pages文件夹中新建一个template文件夹&#xff0c;文件夹中新建一个template.wxml文件&#xff0c;代码如下 <!--template.wxml--> <template name"msgItem"><view><text>This is template.wxml文件&#xff0c;我是一个…