CSS常用样式(三)
一、2D变换
1、transform 设置或检索对象的转换
取值:
none::以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(<length>[, <length>])。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0。
translateX(<length>):指定对象X轴(水平方向)的平移
translateY(<length>):指定对象Y轴(垂直方向)的平移
rotate(<angle>):指定对象的2D rotation(2D旋转)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scaleX(<number>):指定对象X轴的(水平方向)缩放
scaleY(<number>):指定对象Y轴的(垂直方向)缩放
skew(<angle> [, <angle>]):指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 skewX(<angle>):指定对象X轴的(水平方向)扭曲
skewY(<angle>):指定对象Y轴的(垂直方向)扭曲
注:不同浏览器需写以下前缀。
内核类型 | 写法 |
---|---|
Webkit(Chrome/Safari) | -webkit-transform |
Gecko(Firefox) | -moz-transform |
Presto(Opera) | -o-transform |
Trident(IE) | -ms-transform |
W3C | transform |
例子:
CSS代码:
#transform1
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: mediumvioletred;
-webkit-transform: rotate(15deg);
}
HTML代码:
<div id="transform1">旋转了15度</div>
2、transform-origin 设置或检索对象以某个原点进行转换。
取值:
<percentage>:用百分比指定坐标值。可以为负值。
<length>:用长度值指定坐标值。可以为负值。
left:指定原点的横坐标为leftcenter①:指定原点的横坐标为
centerright:指定原点的横坐标为
righttop:指定原点的纵坐标为
topcenter②:指定原点的纵坐标为
centerbottom:指定原点的纵坐标为bottom
不同浏览器下的写法:
内核类型 | 写法 |
---|---|
Webkit(Chrome/Safari) | -webkit-transform-origin |
Gecko(Firefox) | -moz-transform-origin |
Presto(Opera) | -o-transform-origin |
Trident(IE) | -ms-transform-origin |
W3C | transform-origin |
例子:
CSS代码:
#transform1
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: mediumvioletred;
-webkit-transform: rotate(15deg);/*旋转15度*/
-webkit-transform-origin: left top; /*以左上角为原点旋转*/
}
HTML代码:
<div id="transform1"></div>
二、过渡样式
1、transition-property 检索或设置对象中的参与过渡的属性。
取值:
- all:所有可以进行过渡的css属性
- none:不指定过渡的css属性
- 有过渡效果的属性:
- 例子:
- CSS代码:
#transform1
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
transition-property: background-color; }
#transform1:hover
{
transition-duration:.5s;
transition-timing-function:ease-in;
background-color: yellow;
}
- HTML代码:
<div id="transform1">请将鼠标放在上面</div>
#delay1
{
background-color: antiquewhite;
width:100px;
height:100px;
}
#delay1:hover
{
transition-delay:1s;
transition-timing-function:ease-in;
background-color: black;
}
#delay2
{
background-color: antiquewhite;
width:100px;
height:100px;
}
#delay2:hover
{
transition-delay:4s;
transition-timing-function:ease-in;
background-color: blue;
}
<div id="delay1">延迟1s后开始过渡</div>
<div id="delay2">延迟4s后开始过渡</div>
#all
{
width: 100px;
height: 100px;
background-color: red;
}
#all:hover
{
background-color: yellow;
transition-delay: .5s;
transition-timing-function: ease-in;
transform: scale(1.5,1.5);
transition-duration: 1s;
}
<div id="all">请把鼠标放在上面查看效果</div>
CSS常用样式(三)的更多相关文章
- CSS常用样式(四)之animation
上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
- css常用样式对文本的处理演练
CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...
- CSS常用样式整理
元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...
- CSS常用样式属性
1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...
- css常用样式属性详细介绍
对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...
- CSS常用样式(二)
一.边框样式 1.border:复合属性.设置对象边框的特性. 取值: border-width: 设置或检索对象边框宽度. border-style: 设置或检索对象边框样式. border-col ...
随机推荐
- 给深度学习入门者的Python快速教程 - 番外篇之Python-OpenCV
这次博客园的排版彻底残了..高清版请移步: https://zhuanlan.zhihu.com/p/24425116 本篇是前面两篇教程: 给深度学习入门者的Python快速教程 - 基础篇 给深度 ...
- get与post需要注意的几点
在面试或者笔试时,经常会被问到 HTTP 方法中 get 和 post 的异同点.本文简单整理归纳了一下,以备忘. 1."get/post" VS "web 中的 get ...
- 10个优秀的 HTML5 & CSS3 下拉菜单制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 你真的了解setTimeout和setInterval吗?
博客园的代码排版真难用,编辑时候是好的,一保存就是乱了——本文也同时发表在我另一独立博客上 你真的了解setTimeout和setInterval吗?,可以移步至这里吧 setTimeout和setI ...
- requests模块--python发送http请求
requests模块 在Python内置模块(urllib.urllib2.httplib)的基础上进行了高度的封装,从而使得Pythoner更好的进行http请求,使用Requests可以轻而易举的 ...
- [python基础]关于中文编码和解码那点事儿
我们在用python处理中文的时候,或多或少会遇到这样一些错误 常见错误1: SyntaxError: Non-ASCII character '\xe4' in file C 常见错误2: Unic ...
- asp.net mvc5+Echarts3.0+AspNet.SignalR2.0 实时监控cpu占用率推送
先看看效果: 感谢QQ群18668853的群主,无私的公开课,全是干货,当初学的时候,群主用的是jquery.flot做图表,我这里改成百度的Echarts3.0,这算是自己的修改吧,喜欢的可以去下载 ...
- 2005 TCO Online Round 1 - RectangleError
RectangleError Problem's Link Problem Statement You want to draw a rectangle on a piece of paper. Un ...
- DES加密解密
加密后生成Base64字符串,并去除'='字符. 加密后替换掉'+',这样加密后的字符串可以作为url参数传递. using System; using System.IO; using System ...
- EasyUI datagrid 行编辑
一.HTML: <div class="info"> <div class="info_tt"> <span class=&quo ...