14.动画 -moz-:火狐, -ms-:IE,-webkit-:谷歌,-o-:欧朋

transform旋转

rotate旋转 scale放大 translate偏移量 skew倾斜度


transform:rotate(40deg) scale(1.2) translate(40px) skew(30deg);
<div id="d1"></div>

transition 平滑过渡

#d1{width:100px;height:100px;background-color:red;}
#d1:hover{background:blue;transition:background-color 1s ease-in;}

transition:background-color ease-in 1s;背景由红--蓝过渡

<div id="d1"></div>

transition: all ease-in 1s; all代表所有 

animation 动画

#d1{width:100px;height:100px;background-color:red;animation:haha 20s infinite linear;}/*动画名称,经历时间,播放次数(为infinite则一直播放),播放方式
*/ @keyframes haha{ 0%{transform:rotatex(0deg);} 50%{transform:rotatex(180deg)} 100%{transform:rotatex(360deg)} }
<div id="d1"></div>

gradient渐变

开始位置,结束位置,开始颜色,结束颜色,色标(色标位置,色标颜色,可以有多个色标,色标即颜色的过渡点)

#d1{width:100px;height:100px;border:1px solid red;background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));}

径向渐变,内圆圆心位置,内圆半径,外圆圆心半径,外圆半径,开始颜色,结束颜色,色标

background:-webkit-gradient(radial, center center, 0, center center, 460, from(blue), to(red),color-stop(0.6,#fff));

15.响应式布局

           

大于900                                                    600—900                              小于600

<style type="text/css">
*{padding:0px;margin:0;}
#header{height:100px;border:solid 1px red;margin:0 auto;}
#main{margin:10px auto;height:400px;}
#footer{margin:0 auto;height:100px;border:1px solid red;}
@media screen and (min-width:900px){
#header,#footer{width:800px;}
#main{width:800px;height:400px;}
#main-left{width:200px;height:400px;border:1px solid red;float:left;}
#main-center{width:394px;height:400px;border:1px solid red;float:left;}
#main-right{width:200px;height:400px;border:1px solid red;float:left;}
}
@media screen and (min-width:600px) and (max-width:900px){
#header,#footer{width:600px;}
#main{width:600px;height:400px;}
#main-left{width:200px;height:400px;border:1px solid red;float:left;}
#main-center{width:394px;height:400px;border:1px solid red;float:left;}
#main-right{display:none;}
}
@media screen and (max-width:600px){
#header,#footer{width:300px;}
#main{width:300px;height:400px;}
#main-left{display:none;}
#main-center{width:300px;height:400px;border:1px solid red;float:left;}
#main-right{display:none;}
}
</style> <div id="header">头部</div>
<div id="main">
<div id="main-left">左边</div>
<div id="main-center">中间</div>
<div id="main-right">右边</div>
</div>
<div id="footer">底部</div>

16.css兼容性

参考:http://www.cnblogs.com/zhutianxiang/archive/2012/01/19/2320349.html

<iframe src="xx.html" frameborder="0" width='200' height='200'></iframe>

 

css 动画 和 响应式布局和兼容性的更多相关文章

  1. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  2. CSS学习笔记——响应式布局

    响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站能够 ...

  3. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  4. html自己写响应式布局(说起来很高大上的样子,但是其实很简单)

    第一步,打开电脑中安装的Sublime Text3,新建demo文件夹用来存放文件,在里面新建一个HTML文件,通过Tab快捷键迅速创建一个HTML模板,并命名标题. 第二步,在Body标签里添加三个 ...

  5. css的响应式布局和动画

    把响应式布局和动画放在一起写是因为他们有个共同点@符号 先讲讲响应式布局@media 响应式布局==曾经==非常的流行,这种布局方式可以做出一也兼容一切设备的页面,但是当页面的功能越来越多,css文件 ...

  6. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  7. 响应式布局中的CSS相对量

    一个响应式布局,要能够根据设备屏幕尺寸的改变,动态的调整页面内容,展现不同的设计风格. 在进行响应式的 CSS 代码编写过程中,经常会用到一些相对尺寸,以达到相对定位的目的.例如,常见的响应式布局中需 ...

  8. 【css】响应式布局入门【转】

    最近研究响应式设计框架的时候,发现网上很多相关的属性介绍,却很少有系统的入门级使用的文章,我自己整理了一篇入门知识,并没有什么高深的理论,也不牵扯到框架. 目前已经越来越多的站点以及wap站点使用响应 ...

  9. css响应式布局RWD

    响应式布局结合了三大理念: 1)用于布局的弹性网络(百分比定义宽度) 2)用于图片和视频的弹性媒体 3)媒体查询 在布局中,需要注意的点有: 1)尽量用min-width/max-width,max- ...

随机推荐

  1. linux配置环境变量 - 认识

    环境 ubuntu17.04 终端(就是黑框) 认识  环境变量:$PATH 在 ×××/bin 下的命令,可以不用到指定目录下, 比如:安装hbase后,hbase提供一些shell命令在habse ...

  2. sql开发技巧总结-1

    1.数据库分类 关系型 非关系型 2.sql语句分类 sql: ddl数据库定义语言  tpl事物处理语言 dcl数据控制语言  dml数据操作语言(insert delete update sele ...

  3. P2245 星际导航 瓶颈路

    \(\color{#0066ff}{ 题目描述 }\) sideman 做好了回到 \(\text{Gliese}\) 星球的硬件准备,但是 \(\text{sideman}\) 的导航系统还没有完全 ...

  4. SSKeychain的使用 钥匙串

    一.首先要理解keychain与userdefaults的区别: 1.keychain是将数据加密后存储在本地,更安全.路径:Library/Application Support/iPhone Si ...

  5. github的使用 sourceTree

    http://www.cnblogs.com/Jenaral/p/5655958.html

  6. mongoDB副本集+分片集群

    首先搭建一个副本集(三台机器) 主,从,仲裁 然后搭建分片shard1,在每台机子上启用shard1(这里就写一个分片吧!!如果写多了怕初学者会混乱,先写一个.然后可以按照同样的方法写第二个,第三个) ...

  7. springboot整合xxl-mq学习笔记

    首先xxl-mq是大神xuxueli开发的一个消息中间件框架: 与springboot整合过程: <?xml version="1.0" encoding="UTF ...

  8. Exadata LVM snapshot备份失败

    一台X4-2 的计算节点进行image升级,在正式升级之前利用LVM snapshot备份操作系统时备份失败,并且报大量IO错误,提示无法找到LVM snapshot的挂载点.检查文件系统状态: [r ...

  9. Qt 学习之路 2(18):事件

    Home / Qt 学习之路 2 / Qt 学习之路 2(18):事件 Qt 学习之路 2(18):事件  豆子  2012年9月27日  Qt 学习之路 2  60条评论 事件(event)是由系统 ...

  10. Java 目录和文件的复制

    1.复制一个目录及其子目录.文件到另外一个目录 //复制一个目录及其子目录.文件到另外一个目录 public void copyFolder(File src, File dest) throws I ...