CSS3详解:transform、transition

CSS3 transform是什么?

transform的含义是:改变,使…变形;转换

 

CSS3 transform都有哪些常用属性?

transform的属性包括:rotate() / skew() / scale() / translate(,) ,分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

下面我们来分解各个属性的用法:

transform:rotate():

含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”。

.demo_transform1{transform:rotate(10deg);-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg);
}

 

transform:skew():

含义:倾斜;其中“deg”是“度”的意思,如“20deg”表示“10度”。

.demo_transform2{transform:skew(20deg);-webkit-transform:skew(20deg);-moz-transform:skew(20deg);
}

 

transform:scale(x,y):

含义:比例;可传2个值,当写一个时,表示xy都一样,“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。

.demo_transform2{transform:scale(1.5);-webkit-transform:scale(1.5);-moz-transform:scale(1.5);
}

 

transform:translate(x,y):

含义:变动,位移;可以传3个值,x、y。

也可以写成 translateX( ), translateY( ).

如表示向右位移100像素,即第一个值为100px,如果向上位移,把后面的“0”改个值就行,向左向下位移则为负“-”。

.demo_transform2{transform:translate(100px,0);-webkit-transform:translate(100px,0);-moz-transform:translate(100px,0);
}

或者

.demo_transform2{transform:translateX(100px);-webkit-transform:translateX(100px);-moz-transform:translateX(100px);
}

 

CSS3 transition 过度效果

当鼠标经过时,宽度边为300px,时长为 2 秒:

div{
width:200px;
}
div{
transition: width 2s;
-moz-transition: width 2s;    /* Firefox 4 */
-webkit-transition: width 2s;    /* Safari 和 Chrome */
}
div:hover {
width:300px;
}

transition有4个属性:

1、transition-property:规定应用过渡的 CSS 属性的名称。with可获得宽度属性,height可获得高度属性,transform可获得动画属性,all 可以获取所有属性,所以推荐写all

2、transition-duration:定义过渡效果花费的时间。默认是 0。

3、transition-timing-function:规定过渡效果的时间曲线。默认是 "ease"。有5个属性,分别为:

  • linear--匀速   规定以相同速度开始至结束的过渡效果   
  • ease--慢-快-慢   规定慢速开始,然后变快,然后慢速结束的过渡效果
  • ease-in--慢-快   规定以慢速开始的过渡效果
  • ease-out--快-慢   规定以慢速结束的过渡效果
  • ease-in-out--慢-快-慢   规定以慢速开始和结束的过渡效果

4、transition-delay:规定过渡效果何时开始。默认是 0。

4个属性可以合起来写

div{transition: all 1s linear .5s;/*4个属性分别表示:所有属性都有动作效果、动作时间为1S、速度为匀速、延迟0.5S开始动画*/
}

 

转载于:https://www.cnblogs.com/shiweida/p/7785185.html

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

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

相关文章

D. Flowers

D. Flowers 一个简单线性dp#include <bits/stdc.h> using namespace std; #define int long long const int mod 1e9 7; int a[(int)2e6]; signed main() {int t, k;cin >> t >> k;a[0] 1;for (int i 1; i < 1e5 5; i){a[i] a[i - 1];a[i] % mod;i…

逆向映射是干嘛的anon_vma, vma, anon_vma_chain

逆向映射是为了从page得到进程信息&#xff0c;里面有三个比较重要的结构体&#xff1a; mm_area_struct, anon_vma_chain, anon_vma 想象一种复杂的场景 所以其实一个进程对应着很多anon_vma才对 进程A&#xff1a;mmap了16K的匿名页出来&#xff0c;这16k应该是有一个vma&…

1359C. Mixing Water

C. Mixing Water 一个简单的思维。 因为是一隔一的&#xff0c;所以要么热水多放一个&#xff0c;要么冷水和热水一样多。 设热水与要求的差为cou1&#xff0c;冷水与要求的差为cou2。 所以我们先考虑两种情况&#xff1a; 1&#xff0c;cou1大于cou2&#xff0c;那么肯定是要…

读取txt文件赋值到DataGridView中

先查看txt是每条信息之间是通过什么分割&#xff0c;我是通过换行符&#xff08;\n&#xff09;分割的, 然后再看每一条信息中字段是通过什么分割&#xff0c;我的字段是通过 tab键&#xff08;\t&#xff09;分割。 第一步 先获取到txt文件的路径&#xff1a; //获取绝对路径v…

Combobox报错:row[opts.textField].toLowerCase is not a function。

使用easyui框架加载combobox。 html页面&#xff1a; <span class"search_item"><span class"item_text">账号ID:</span><span class"item_obj"><input class"easyui-textbox" type"text" name&…

c++ 线程什么时候run_多线程并发支撑基础之JAVA内存模型

Java内存模型可以说是Java并发的底层支持&#xff0c;了解Java内存模型才能正在了解Java并发。内存模型在内存中设置一个变量"value 1&#xff1b;"那么其他线程能在什么时候读取到这个结果呢&#xff1f;有可能不能立即甚至永远都读不到。比如指令顺序与源代码中的…

1476D. Journey

D. Journey 一道简单线性dp#include <bits/stdc.h> using namespace std; const int N 5e5 3; char str[N]; int a[N],b[N]; int main() {int t;cin>>t;while (t--){int n;cin>>n;cin>>str1;for (int i0;i<n;i) a[i] b[i] 1;if (str[1]L) a[1]…

润乾报表 数据集ds1中,数据源xmglxt_x3无数据库连接,且未设定数据连接工厂,请检查数据源设定:...

一、润乾报表错误内容 产生数据工厂: com.runqian.report4.dataset.SQLDataSetFactory 失败 错误来源&#xff1a;: 数据集ds1中&#xff0c;数据源xmglxt_x3无数据库连接&#xff0c;且未设定数据连接工厂&#xff0c;请检查数据源设定&#xff1a; 二、解决方法 同事做的润乾…

1388C. Uncle Bogdan and Country Happiness

C. Uncle Bogdan and Country Happiness 纯纯DFS#include <bits/stdc.h> using namespace std; const int N 1e5 3; #define int long long int a[N], b[N], c[N]; vector<int> cun[N]; int vis[N]; int ff 1; void DFS(int x) {int res 0;int xx a[x];for (…

WPF中的数据绑定Data Binding使用小结

完整的数据绑定的语法说明可以在这里查看&#xff1a; http://www.nbdtech.com/Free/WpfBinding.pdf MSDN资料&#xff1a; Data Binding: Part 1 http://msdn.microsoft.com/en-us/library/aa480224.aspx Data Binding: Part 2 http://msdn.microsoft.com/en-us/library/aa480…

awr报告分析 mysql_AWR报告的生成和简单分析方法

生成AWR报告方法&#xff1a; 第一步&#xff1a;数据库压力测试卡开始时&#xff1a;生成第一个快照&#xff1a; Sqlexec dbms_workload_repository.create_snapshot(); 第二步&#xff1a;数据库压力测试结束时&#xff1a;生成第二个快照 Sqlexec dbms_workload_repository…

1560F1. Nearest Beautiful Number (easy version)

F1. Nearest Beautiful Number (easy version) 预处理加二分#include <bits/stdc.h> using namespace std; const int N 3e5 3; #define int long long set<int>cun1,cun2; signed main() {//单个for (int i1;i<9;i){int res 0;for (int j0;j<9;j) {res …

sqlserver 微信昵称_sql server用户名和登录名的区别和联系

在SQLSERVER数据库中&#xff0c;guest帐户是特殊的用户帐户。如果用户使用USE database语句访问的数据库中没有与此用户关联的帐户&#xff0c;此用户就与guest用户相关联。另外SQLSERVER采取登录名-用户名的安全规则&#xff0c;和Oracle里面的schema有点像。SQLSERVER使用所…

1506G. Maximize the Remaining String

G. Maximize the Remaining String 贪心&#xff0c;放置时&#xff0c;如果前面一个小比他小&#xff0c;并且后面还有&#xff0c;那么就把前面的删除#include <bits/stdc.h> using namespace std; const int N 3e5 3; #define int long long string str; char ans[…

bzoj 1208

1208: [HNOI2004]宠物收养所 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 9775 Solved: 3918[Submit][Status][Discuss]Description 最近&#xff0c;阿Q开了一间宠物收养所。收养所提供两种服务&#xff1a;收养被主人遗弃的宠物和让新的主人领养这些宠物。每个领养者都…

.net千万级数据导出_记一次解决docker下oracle数据库故障事例

一、问题背景&#xff1a;某个项目的线上环境oracle数据库挂了&#xff0c;同事急匆匆来找我救火。我简单咨询了一些基本情况&#xff1a;线上环境&#xff0c;docker部署&#xff0c;已正常运行半年。由于宿主机的根目录硬盘空间不够&#xff0c;运维的同事想把oracle数据文件…

1644E. Expand the Path

E. Expand the Path 一道灯下黑的题目。 我们很显然知道&#xff0c;要让每个列的上限最小&#xff0c;下限最大&#xff08;同理计算行也可以&#xff09;。 所以图形应该是一个中心对称图形 所以空白部分是一个矩形&#xff08;除了一开始的地方&#xff09;&#xff0c;但是…

Swift 将日期转化为字符串,显示上午还是下午

let dateF DateFormatter() // aaa 用于显示上午还是下午&#xff0c;mm和MM 分别表示12小时制和24小时制 dateF.dateFormat "yyyy-MM-dd aaa hh:mm:ss" dateF.amSymbol "上午" dateF.pmSymbol "下午" let str dateF.string(from: Date()) …

车间生产能耗管控方案_如何给生产车间降温 环保空调的这些方案一定能帮到你...

生产车间闷热如何降温&#xff1f;高温闷热带来的影响是非常大&#xff0c;在厂房车间闷热的环境会影响作业人员的情绪&#xff0c;增加燥热感&#xff0c;使工作效率下降&#xff0c;生产力降低&#xff0c;产品质量变差&#xff0c;蕞严重的结果导致客户流失&#xff0c;所以…

1612D. X-Magic Pair

D. X-Magic Pair 一道数学题&#xff0c;我们让a>b&#xff0c;那么如果x在a到a%b之间就可以通过a-n*b得到 然后辗转相余#include <bits/stdc.h> using namespace std; #define int long long const int mod 998244353; const int N 2e5 9; map<int, int> m…