博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
css 动画 和 响应式布局和兼容性
阅读量:6187 次
发布时间:2019-06-21

本文共 1421 字,大约阅读时间需要 4 分钟。

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

transform旋转

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

 
transform:rotate(40deg) scale(1.2) translate(40px) skew(30deg); 

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)} } 

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

 

左边
中间
右边

16.css兼容性

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

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

 

 

转载于:https://www.cnblogs.com/colorful-paopao1/p/8158190.html

你可能感兴趣的文章
IIS7.5中asp.net 区域 area中的路径 URLRewriter报错 .. 在顶级目录上退出
查看>>
javascript的apply和call,执行环境,垃圾回收,闭包
查看>>
用手机wifi看你电脑里视频听MP3的方法
查看>>
JavaScript实现按键精灵
查看>>
REMOTE HOST IDENTIFICATION HAS CHANGED
查看>>
mysql查看是否区分大小写
查看>>
css关于常规流和浮动的两个疑问
查看>>
获取登录地区
查看>>
十年只为一个摧残的梦
查看>>
45、BGP配置实验之Local preference选路
查看>>
我的友情链接
查看>>
人体自身的神奇补肾法 ——你在外面花多少钱都学不到的<转>
查看>>
Linux查CC***
查看>>
JSP里的9大内置对象,背过,应聘笔试会用。
查看>>
取消单元格的点击事件
查看>>
SWF 文件不能本地访问 只有仅限于文件系统的 SWF 文件
查看>>
Bootstrap3 栅格系统-实例:响应列重置(Responsive column resets)
查看>>
(转载)理解C#对象生命周期
查看>>
详解cookie与session的区别,讲得最透彻的一篇文章
查看>>
如何下载scp、wget、inotify及如何偷包
查看>>