zoukankan      html  css  js  c++  java
  • css 动画 和 响应式布局和兼容性

    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{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{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{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-900px){
    	#header,#footer{800px;}
    	#main{800px;height:400px;}
    	#main-left{200px;height:400px;border:1px solid red;float:left;}
    	#main-center{394px;height:400px;border:1px solid red;float:left;}
    	#main-right{200px;height:400px;border:1px solid red;float:left;}
    	}
    @media screen and (min-600px) and (max-900px){
    	#header,#footer{600px;}
    	#main{600px;height:400px;}
    	#main-left{200px;height:400px;border:1px solid red;float:left;}
    	#main-center{394px;height:400px;border:1px solid red;float:left;}
    	#main-right{display:none;}
    	}
    @media screen and (max-600px){
    #header,#footer{300px;} #main{300px;height:400px;} #main-left{display:none;} #main-center{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>

     

  • 相关阅读:
    Linux设备驱动第六篇:高级字符驱动操作之iotcl
    Stack的三种含义
    用vs2013+velt-0.1.4进行嵌入式开发 进行海思平台 UBOOT 开发
    学会思考技术背后的那些思想和本质
    Rails 4.0.0 开发环境一切正常,到生成环境发现 无法找到 css 和 js
    一加手机,迟到的惊喜
    附近的人计算方法-----使用mysql脚本计算方法
    如何将Superset嵌入后台系统之实践
    这里是纯干货!2018年深度学习的10个发展预测
    这里是纯干货!2018年深度学习的10个发展预测
  • 原文地址:https://www.cnblogs.com/colorful-paopao1/p/8158190.html
Copyright © 2011-2022 走看看