CSS3阴影
box-shadow:h-shadow v-shadow blur spread color inset
分别设置阴影:水平偏移 垂直偏移 羽化大小 扩展大小 颜色 是否内阴影
1、盒子透明度表示法:opacity:0.1filter:alpha(opacity=10)(兼容IE)
2、rgba(0,0,0,0.1) 前三个数值表示颜色,第四个数值表示颜色的透明度
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线
为了让CSS3样式兼容,需要将某些样式加上浏览器前缀:
-ms- 兼容IE浏览器
-moz- 兼容firefox
-o- 兼容opera
-webkit- 兼容chrome 和 safari
目前的状况是,有些CSS3属性需要加前缀,有些不需要加,有些只需要加一部分,这些加前缀的工作可以交给插件来完成,比如安装: autoprefixer
Sublime text 中安装 autoprefixer 执行 preferences/key Bindings-Users 设置快捷键 { "keys": ["ctrl+alt+x"], "command": "autoprefixer" } 通过此工具可以按照最新的前缀使用情况给样式自动加前缀。
在web设计中使用js可以实现很多的页面特效,然而很多人却忽视了HTML标签中META标签的强大功效,其实meta标签也可以实现很多漂亮的页面过渡效果。META标签是HTML语言HEAD区的一个辅助性标签,Meta 标签放在每个网页的<head>...</head>
中间,我们大家比较熟悉的如:
<meta name="GENERATOR" content="Microsoft FrontPage
3.0">//说明编辑工具;
<meta name="KEYWORDS" content="...">//说明关键词;
<meta name="DESCRIPTION" content="...">//说明主页描述;
它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以
根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等
用法:
<Meta http-equiv="Page-Enter" Content="blendTrans(Duration=0.5)">
<Meta http-equiv="Page-Exit" Content="blendTrans(Duration=0.5)">
blendTrans是css动态滤镜的一种,产生渐隐效果。另一种动态滤镜RevealTrans也可以用于页面进入与退出效果:
动态滤镜可以为页面添加动人的淡入淡出、图象转化效果,它可以分为两种blend(混合)和reveal(显示),
前者可以使对象渐渐消失或出现,后者提供了24种图象转化的效果......
<Meta http-equiv="Page-Enter"
Content="revealTrans(duration=x, transition=y)">
<Meta
http-equiv="Page-Exit" Content="revealTrans(duration=x, transition=y)">
Duration:表示滤镜特效的持续时间(单位:秒)
Transition:滤镜类型。表示使用哪种特效,取值为0-23。