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
CSS3详解:transform、transition相关推荐
- 放大 旋转 css3,CSS3详解:transform 的旋转、旋转放大、放大、移动
CSS3 transform是什么? transform的含义是:改变,使-变形:转换 CSS3 transform都有哪些常用属性? transform的属性包括:rotate() / skew() ...
- css3transform rotate,CSS3详解:transform [旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix]...
CSS3详解:transform [旋转rotate.扭曲skew.缩放scale和移动translate以及矩阵变形matrix] transform的属性包括:rotate() / skew() ...
- CSS3详解:text-shadow
在CSS3详解的上一篇中我们讲到了 . CSS3 text-shadow是什么? text-shadow的含义是:文本的阴影,给文本添加阴影效果 CSS3 text-shadow书写格式: text- ...
- css3动画模块transform transition animation属性解释
首先来看下对各大浏览器的兼容性 IE Firefox Safari Chrome Opera CSS 2D Transform no 3.5 3.2 2.0 10.5 CSS 3D Transfo ...
- CSS3 新特性transform,transition,animation
一.transform css3引入了一些可以对网页元素进行变换的属性,比如旋转,缩放,移动,或者沿着水平或者垂直方向扭曲(斜切变换)等等. transform属性有一项奇怪的特性,就是它们对于其周围 ...
- 鼠标经过下划线 css3,详解css3和伪元素实现鼠标移入时下划线向两边展开
本文主要介绍了利用css3+伪元素实现鼠标移入时下划线向两边展开效果的相关资料,文中先进行了详细的介绍,方便大家理解,而后给出了完整的实例代码让大家可以参考学习,需要的朋友们下面来一起学习学习吧.希望 ...
- CSS3详解:background
CSS3对于background做了一些修改,最明显的一个就是采用设置多背景,不但添加了4个新属性,并且还对目前的属性进行了调整增强. 1.多个背景图片 在css3里面,你可以再一个标签元素里应用多个 ...
- CSS3详解:border-radius
讲到css3的border-radius这个玩意,可以很好玩.比如:圆角矩形,圆,椭圆等等. CSS3 border-radius是什么? border-radius的含义是:圆角. CSS3 bor ...
- 妙味课堂html css,CSS3详解(妙味课堂)
2017-09-01 1. 属性选择器 属性选择器的链接: E[attr]: div[title]{background:blue;}: E[attr="value"]:div[t ...
最新文章
- android s静态广播,重走android(3)广播 · sk600’s Studio
- 获取手机信息(UIDevice、NSBundle、NSLocale)
- [超享]linux共享3160命令
- 开放才能进步!Angular和Wijmo一起走过的日子
- C++多线程快速入门(四)shared_mutex以及读写锁应用
- 《程序员代码面试指南》第五章 字符串问题 找到字符串的最长无重复字符子串...
- 挖孔屏设计!Moto G8高清渲染图曝光:“奥利奥”摄像头消失
- 大数据之-Hadoop完全分布式_完全分布式配置总结---大数据之hadoop工作笔记0040
- 在DC中误删除ISA计算机后无法连接ISA配置服务器问题
- 红米k50 至尊版 解锁bl 获取root教程步骤
- 少儿编程scratch系统介绍(附网站源码)
- nodejs下载文件
- detectron2训练自己的数据集_从零教你训练自己的数据集实现汽车标志识别,汽车品牌识别源码
- LAMMPS分子动力学模拟技术与应用 第一性原理计算方法及应用
- 布线工程-认识光纤和光缆
- matlab读取txt函数,matlab读取txt某一行
- Educational Codeforces Round 91 (Rated for Div. 2) . d Berserk And Fireball
- 微信 openid = hash(uid + app_id) 也就是说,对每个app可以做到用户id唯一
- PyScripter显示行号
- NLP领域大语言模型汇总
热门文章
- display:table-cell的集中应用
- python 绘图与可视化 Graphviz 二叉树 、 error: Microsoft Visual C++ 14.0 is required
- oracle中出现会话被锁
- 【iCore1S 双核心板_FPGA】例程十六:基于SPI的ARM与FPGA通信实验
- VFP参考资料word版
- 1.0 C++远征:数据的封装
- Ubuntu下一个openldapserver部署步骤
- autolisp 列表 resbuf
- HDOJ2567 ( 寻梦 ) 【切水题,很欢乐~】
- 单片机c语言应用100例第3版课后答案,单片机C语言应用100例(第3版)(含光盘1张)...