牛逼的css3:动态过渡与图形变换
写css3的属性的时候,最好加上浏览器内核标识,进行兼容。-ms-transform:scale(2,4); /* IE 9 */-moz-transform:scale(2,4); /* Firefox */-webkit-transform:scale(2,4); /* Safari and Chrome */-o-transform:scale(2,4); /* Opera */
1.圆角(常用:略)
box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值
blur 可选。模糊距离。
spread 可选。阴影的尺寸
color 可选。阴影的颜色
inset 可选。将外部阴影 (outset) 改为内部阴影。
例子:

div
{
box-shadow: 10px 10px 5px 5px #888888;
}
三个值:background-clip: border-box|padding-box|content-box;
div
{
background-color:yellow;
background-clip:content-box;
}

div
{
background-color:yellow;
background-clip:padding-box;
}


div
{
background-color:yellow;
background-clip:border-box;
}

在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。
background-size: length|percentage|cover|contain;
length:设置背景图像的高度和宽度。第一个值为宽度,第二只是高度
div
{
background:url(img_flwr.gif);
background-size:80px 60px;
background-repeat:no-repeat;
}
在新的 @font-face 规则中,您必须首先定义字体的名称(比如 myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
} div
{
font-family:myFirstFont;
}
</style>
要实现这一点,必须规定两项内容:
div
{
width:100px;
height:100px;
transition:width 2s;
}
div:hover
{
width:300px;
}
div
{
width:100px;
height:100px;
background:yellow;
transition:margin-left 2s;
} div:hover
{
margin-left:300px;
}
</style>
div
{
width:100px;
height:100px;
background:yellow;
transition:margin-left 2s,width 1s; //多个要改变的属性之间用,分割
} div:hover
{
margin-left:300px;
width:300px;
}



div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
transition:transform 2s; //只是加了一个过渡效果
}
div:hover{
transform:rotate(9deg); //这是最终状态
}


div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
transition:transform 2s;
}
div:hover{
transform:translate(50px,100px); //left(x 坐标) 和 top(y 坐标)
}



div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
transition:transform 1s;
}
div:hover{
transform:scale(2,2); //宽度,高度
}



div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
transition:transform 2S;
}
div:hover{
transform:skew(30deg,20deg); //围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度
}
牛逼的css3:动态过渡与图形变换的更多相关文章
- Animate.css 一款牛逼的css3动画库
Animate.css是一款很牛逼的,跨浏览器的css3动画库,使用方法也很简单只要引入一个animate.min.css就可以了, 简单使用 1 首先引入 animate的 css 文件样式 cdn ...
- CSS3之过渡及2D变换
transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...
- 我喜欢ASP.NET的MVC因为它牛逼的9大理由(转载)
我很早就关注ASP.NET的mvc的,因为最开始是学了Java的MVC,由于工作的原因一直在做.Net开发,最近的几个新项目我采用了MVC做了,我个一直都非常喜欢.Net的MVC.我们为什么使用MVC ...
- 最牛逼android上的图表库MpChart(二) 折线图
最牛逼android上的图表库MpChart二 折线图 MpChart折线图介绍 MpChart折线图实例 MpChart效果 最牛逼android上的图表库MpChart(二) 折线图 最近工作中, ...
- 从苦逼到牛逼,详解Linux运维工程师的打怪升级之路
做运维也快四年多了,就像游戏打怪升级,升级后知识体系和运维体系也相对变化挺大,学习了很多新的知识点. 运维工程师是从一个呆逼进化为苦逼再成长为牛逼的过程,前提在于你要能忍能干能拼,还要具有敏锐的嗅觉感 ...
- 关于HTML5,最牛逼的10本书!
关于HTML5,最牛逼的10本书! 关于HTML5,最牛逼的10本书.rar HTML5+CSS3从入门到精通 李东博 著 推荐指数:★★★☆ 简介:本书通过基础知识+中小实例+综合案例的方式,讲述了 ...
- douban_转自熊博网——牛逼顿
转自熊博网——牛逼顿 来自: 天云之叶(大道易得,小术难求) 2010-04-21 18:32:27 牛逼顿 作者:singularitys 3月28号是牛顿的忌日,但是知道的人很少,我们毕竟更关心沈 ...
- 不用 Notepad++,还有更牛逼的选择!
来源:oschina.net/news/110987/no-notepad-plus-plus 这两天 Notepad++ 牛逼了,然后引发了大家的关注,具体事件内容请大家自行百度,其实作为文本编辑工 ...
- 为什么我会认为SAP是世界上最好用最牛逼的ERP系统,没有之一?
为什么我认为SAP是世界上最好用最牛逼的ERP系统,没有之一?玩过QAD.Tiptop.用友等产品,深深觉得SAP是贵的有道理! 一套好的ERP系统,不仅能够最大程度承接适配企业的管理和业务流程,在技 ...
随机推荐
- 一起学微软Power BI系列-使用技巧(4)Power BI中国版企业环境搭建和帐号问题
千呼万唤的Power BI中国版终于落地了,相信12月初的微软技术大会之后已经铺天盖地的新闻出现了,不错,Power BI中国版真的来了,但还有些遗憾,国际版的一些重量级服务如power bi emb ...
- “.Net 社区虚拟大会”(dotnetConf) 2016 Day 3 Keynote: Scott Hanselman
美国时间 6月7日--9日,为期三天的微软.NET社区虚拟大会正式在 Channel9 上召开,美国时间6.9 是第三天, Scott Hanselman 做Keynote.今天主题围绕的是.NET ...
- 干货分享:SQLSERVER使用裸设备
干货分享:SQLSERVER使用裸设备 这篇文章也适合ORACLE DBA和MYSQL DBA 阅读 裸设备适用于Linux和Windows 在ORACLE和MYSQL里也是支持裸设备的!! 介绍 大 ...
- HTML5新特性有哪些,你都知道吗
一.画布(Canvas) 画布是网页中的一块区域,可所以用JavaScript在上面绘图.下面我们来创建一个画布并在上面绘制一个坦克(后面将用HTML5做一个坦克大战游戏),代码如下: <!DO ...
- canvas与html5实现视频截图功能
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频 在使用canvas制作这个截图功能时,首先必须保证页面上 ...
- javascript设计模式:策略模式
前言 策略模式有效利用组合.委托.多态等技术和思想,可以有效避免多重条件选择语句. 策略模式对开放-封闭原则提供了很好的支持,将算法封装在strategy中,使得他们易于切换.理解.扩展. 策略模式中 ...
- javascript中变量提升的理解
网上找了两个经典的例子 var foo = 1; function bar() { if (!foo) { var foo = 10; } alert(foo); } bar(); // 10 var ...
- VS2015常用快捷键总结
生成解决方案 F6,生成项目Shift+F6 调试执行F5,终止调试执行Shift+F5 执行调试Ctrl+F5 查找下一个F3,查找上一个Shift+F3 附加到进程Ctrl+Alt+P,逐过程F1 ...
- C# 自定义控件VS用户控件
1 自定义控件与用户控件区别 WinForm中, 用户控件(User Control):继承自 UserControl,主要用于开发 Container 控件,Container控件可以添加其他Con ...
- [Hadoop in Action] 第5章 高阶MapReduce
链接多个MapReduce作业 执行多个数据集的联结 生成Bloom filter 1.链接MapReduce作业 [顺序链接MapReduce作业] mapreduce-1 | mapr ...