Heim  >  Artikel  >  Web-Frontend  >  Css3炫酷总结使用_html/css_WEB-ITnose

Css3炫酷总结使用_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:38:351262Durchsuche

先从CSS3的选择器说起:    

  E F:所有的子孙元素;

  E>F: E中的子元素;

  E+F:E元素之后的最近的选择器;

  E~F:E中所以后面兄弟元素(CSS3 不包括自己本身,前面也不包括)

  att*=val:只要包含指定的元素符(val1 val2 等等都算);

  att^=val:首字符匹配;

  att$=val:尾字符匹配;

  att~=val:用空格分隔,且其中一个是val;

  att|=val:以val开头并用"-"连接符;

  CSS3伪类选择器: first-line first-letter root not empty target before after first-child last-child nth-child(2) nth-last-child(odd) ;

 

      阴影: box-shadow:水平偏移px 垂直偏移px 阴影模糊值 color

         box-shadow:3px 4px 2px #000;

         text-shadow: 5px -10px 5px red;

      背景: background-size:10px 5px; background-clip: 背景的裁剪区域;background-origin:是指定background-position属性的参考坐标的起始位置;

            background: -webkit-gradient(linear, 0, 0, 0, 100%, from(#fff), to(#000));

      圆角边框:border-radius:10px 15px 20px 25px;

           border-top-right-radius:水平半径 垂直半径(10px/30px)

          border-radius:10px/20px 25px;//水平四个为10,垂直两个20两个25

          椭圆形画法:把宽度的一半当水平半径,把高度的一半当垂直半径

      媒体查询: Media Query: 

             user-scalable:0不允许手动缩放

              当屏幕的可视区域的宽度长度在600px和900px之间时,应用该样式文件

            small.css中: @media screen and (min-width:600px) and (max-width:900px) {//...}

            当移动设备处于纵向(portrait) 模式下应用该模式; 横向为landscape

 

    边框属性 border-image-source:url(./***.png);//设图为81*81,九分法后 每个是27*27

       border-image-width: 27px;

       border-image-slice:27;//四个角只显示九分中的一个;若为27*2=54,则显示九分中的四个;若为81则显示9个,切割为宽度的三倍

       border-image-outset:0px;//边框向外扩展的大小

       border-image-repeat:strench;//拉伸 repeat 重复模式,中间的2468进行不停重复

  倒影属性 -webkit-box-reflect:above/below/left/right 100px -webkit-linear-gradient(top,transparent,#fff)

   transition 过度: 慢慢的从一个到另一个的效果 transition -webkit-transition:padding 1s ease-out,color 1s linear 1s;

    四个参数(过度属性-property,过渡时间-duration,过度形式-timing-function,延迟时间-delay)

  animation 动画 参数(名字-name,-duration过渡时间,timing-function过渡形式,-delay延迟时间,-iteration-count循环次数,-direction是否反向,-play-state动画状态,-fill-mode动画时间之外的状态)

        -webkit-animation:demo 2s linear 3s 3

        @-webkit-keyframes demo {

        0% {opacity:0;transform:translate(0px)}   //透明度 平移

        20% {opacity:0.2;transform:translate(20px)}

        40% {opacity:0.4;transform:translate(40px)}

        60% {opacity:0.6;transform:translate(60px)}

        100% {opacity:1;transform:translate(100px)}       

}

附上弹窗的一个animation动画

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">        <title>tan</title>        <meta name="description" content="">        <meta name="keywords" content="">        <link href="" rel="stylesheet">        <style> .result-bg{ position:fixed;top:0;left:0; width:100%;height:100%; background-color:rgba(0,0,0,0.5); z-index:20 } .result{ display:block; position:absolute;top:0;left:0; z-index:21; width:16rem } .result.tan{ -webkit-animation:bouncein .8s ease-out backwards; -moz-animation:bouncein .8s ease-out backwards; -ms-animation:bouncein .8s ease-out backwards; animation:bouncein .8s ease-out backwards} @-webkit-keyframes bouncein{ 0%{opacity:0;-webkit-transform:scale(0.3)} 50%{opacity:1;-webkit-transform:scale(1.05)} 70%{-webkit-transform:scale(0.9)} 100%{-webkit-transform:scale(1)} } @keyframes bouncein{ 0%{opacity:0;transform:scale(0.3)} 50%{opacity:1;transform:scale(1.05)} 70%{transform:scale(0.9)} 100%{transform:scale(1)} } </style>    </head>    <body>        <div class="result-bg J-result-bg"></div>        <img  class="result J-result tan" src="http://b0.hucdn.com/party/default/89f818525d6539038a89e21235c3dd59.png" alt="Css3炫酷总结使用_html/css_WEB-ITnose" >    </body></html>

 

      这里聊聊炫酷的-webkit-css:

          -webkit-user-select:none     可以用它禁止被选中页面的内容:被用来保护网站的内容,不被用户复制和转载,从而保护资讯的版权;

              在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。

        -webkit-touch-callout:none    在iPhone或者iPad上,当你触摸并按住触摸的目标,这个属性可以让你禁用系统默认菜单。  为default 是默认弹出系统框

        -webkit-line-clamp:  多行文本溢出显示省略号 

              大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。

              如何解决多行显示省略号呢?

              WebKit浏览器或移动端的页面可以采取 -webkit-line-clamp 它是一个 不规范的属性,它没有出现在 CSS 规范草案中。 它需要组合其他外来的WebKit属性。常见结合属性:

                A. display: -webkit-box; 必须结合的属性 ,将对象作为弹性伸缩盒子模型显示 。

                B. -webkit-box-orient :vertical;必须结合的属性 ,设置或检索伸缩盒对象的子元素的排列方式

                C. text-overflow:ellipsis,可以用来多行文本的情况下,用省略号“…”隐藏超出范围的文本 。

              跨浏览器兼容的方案: 

                

 p { position:relative; line-height:1.4em;        /* 3 times the line-height to show 3 lines */ height:4.2em; overflow:hidden;    } p::after { content:"..."; font-weight:bold; position:absolute; bottom:0; right:0; padding:0 20px 1px 45px; background:url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;    }

 

 

 

                这里注意几点:

        1. height高度是line-height的倍数,几行就是几倍;
        2. 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
        3. IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用...去模拟;
        4. 要支持IE8,需要将::after替换成:after;

 

        -webkit-overflow-scrolling:touch  滑动很顺滑    在iOS 5+上促使一个元素类似Native的快速滚动和回弹的效果

.selector { overflow: auto;/* auto | scroll */ -webkit-overflow-scrolling: touch;}

 

        -webkit-text-size-adjust:100%      iOS浏览器横屏时会重置字体大小 横竖屏时候字体自己跟着自适应,PC端此属性已经除去  

        -webkit-tap-highlight-color           -webkit-tap-highlight-color 只用于iOS (iPhone和iPad)和Android。在你点击一个或者利用Javascript生成的可点击元素的时候,它就会出现一个半透明的灰色背景。

                          通过-webkit-tap-highlight-color,可以设置该属性为任何颜色。:-webkit-tap-highlight-color:transparent在Android下无效,透明可以通过rgba(0,0,0,0)实现。

        -webkit-appearance:none           内阴影    为none改变按钮在iPhone下的默认风格   在IE系列和Opera浏览器上不支持“appearance”,而且Safari也只有3.0版本以上支持,而在Chrome和Firefox以及移动设置浏览器上得到较好的支持。

                         appearance的属性值   checkbox  radio  button  listbox  listitem等等  例如设置button的话 会让一段文字看起来像个button

          border-radius          Android 2.3:border-radius 在自带浏览器中不支持 %

                        Android 4.2.x:border-radius + border + 背景色,在自带浏览器中背景色溢出到圆角以外部分=>使用四个拓展最后一个合并

 

聊聊 Transform  引用 http://www.cnblogs.com/jingwhale/p/4639541.html

                               2D Transform转换属性

属性 描述 CSS
transform 向元素应用 2D 或 3D 转换。 3
transform-origin 允许你改变被转换元素的位置。 3

                                   2D Transform 方法

函数 描述 实例  
转换      
translateX(n)
translateY(n)
沿着 X 或Y 轴移动元素。    
translate(x,y) 沿着 X 和 Y 轴移动元素。

值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

div{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px);        /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
-o-transform: translate(50px,100px);        /* Opera */
-moz-transform: translate(50px,100px);     /* Firefox */
}

 
缩放      
scaleX(n)
scaleY(n)
改变元素的宽或高度。    
scale(x,y) 改变元素的宽度和高度。

值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高度的 4 倍。

div{
transform: scale(2,4);
-ms-transform: scale(2,4);    /* IE 9 */
-webkit-transform: scale(2,4);    /* Safari 和 Chrome */
-o-transform: scale(2,4);    /* Opera */
-moz-transform: scale(2,4);    /* Firefox */
}

 
定义 2D 旋转      
rotate(angle) 在参数中规定角度。turn是圈,1turn = 360deg;另外还有弧度rad,2πrad = 1turn = 360deg。如,transform:rotate(2turn); //旋转两圈

值 rotate(30deg) 把元素顺时针旋转 30 度。

div{
transform: rotate(30deg);
-ms-transform: rotate(30deg);        /* IE 9 */
-webkit-transform: rotate(30deg);    /* Safari and Chrome */
-o-transform: rotate(30deg);        /* Opera */
-moz-transform: rotate(30deg);        /* Firefox */
}

 
倾斜      
skewX(angle)
skewY(angle)
沿着 X 、或Y轴。    
skew(x-angle,y-angle) 沿着 X 和 Y 轴。

值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 20 度。

div{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg);    /* IE 9 */
-webkit-transform: skew(30deg,20deg);    /* Safari and Chrome */
-o-transform: skew(30deg,20deg);    /* Opera */
-moz-transform: skew(30deg,20deg);    /* Firefox */
}

 
使用六个值的矩阵。      
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。

matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。

使用 matrix 方法将 div 元素旋转 30 度

div{
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* IE 9 */
-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Firefox */
-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0);    /* Safari and Chrome */
-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0);        /* Opera */
}

 

最好大家自己都去试试这些css3的用法

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn