Css3炫酷总结使用

2019-05-23 11:32 来源:未知

韦德娱乐1946网页版 1

    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的用法

先从CSS3的选择器说起: E F:所有的子孙元素; EF: E中的子元素; E F:E元素之后的最近的选择器; E~F:E中...

 

聊聊 Transform  引用 

  1. border-x-x-radius属性

    2D Transform转换属性

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

首先你得安装IE9,,,,

Css3炫酷总结使用,css3炫酷总结

先从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: 

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/> user-scalable:0不允许手动缩放

<link rel="stylesheet" media="screen and(min-width:600px) and(max-width:900px)" href="small.css"/>  当屏幕的可视区域的宽度长度在600px和900px之间时,应用该样式文件

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

<link rel="stylesheet" media="all and(orientation:portrait)" href="portrait.css"/>当移动设备处于纵向(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://www.dongyuqing.com/uploads/allimg/190523/113219D41-1.png">
    </body>

</html>

 

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

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

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

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

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

    大家应该都知道用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;
    }

 

 这里注意几点:

  • height高度是line-height的倍数,几行就是几倍;
  • 结束的省略好用了半透明的png做了减淡的效果,或者设置背景颜色;
  • IE6-7不显示content内容,所以要兼容IE6-7可以是在内容中加入一个标签,比如用...去模拟;
  • 要支持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。在你点击一个<a>或者利用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 背景色,在自带浏览器中背景色溢出到圆角以外部分=>使用四个拓展最后一个合并

 

5.圆角文本输入框

韦德娱乐1946网页版 2

韦德娱乐1946网页版 3

韦德娱乐1946网页版 4

Css Html:

韦德娱乐1946网页版 5

韦德娱乐1946网页版 6

或者是FireFox3.1版本以上,Opera9.5版本以上。(我只是在IE9下面测试)。

韦德娱乐1946网页版 7

Nic

Css:

两个div的显示:

 

无意中看到CSS3的强大功能,比较感兴趣,分享下先。。。呵呵

 

效果:

 div              {                  border: solid black;                  border-radius: 40px;                  height: 1in;                  width: 2in;                  overflow: hidden;              }

韦德娱乐1946网页版 8

效果:

 

CSS Html:

韦德娱乐1946网页版 9

4.background-clip 父子结构的div使用

x代表top,right,left,bottom,想让哪边有圆角就可以把x设置为哪边,例如top-right就是右上角,top-left就是左上角,。。。。。,另外后面还可以添加百分比来设置圆角的显示弧度。

效果:

很好看的形状不再需要image来实现啦。。我们看看如何让一个DIV显示为不规则。并在里面存放一些文本。使用CSS3中的border-radius属性:

韦德娱乐1946网页版 10

Css Html:

韦德娱乐1946网页版 11

2.background-clip属性:

  1. border-radius属性:

 

CSS:

6、CSS3使用border属性画圆画方:

确实很强大,以后很多的图片都可以用CSS来取代了。。。。。。而且不需要为了一个圆角写那么多CSS和js了。

background=clip结合border-radius使用,可以设计出不错的形状。

 

 

韦德娱乐1946网页版,如果你没安装IE9 beata,来这里试试。。。

选择语言和版本,

 

div显示:


Cheers

韦德娱乐1946网页版 12

TAG标签: 韦德娱乐1946
版权声明:本文由韦德娱乐1946_韦德娱乐1946网页版|韦德国际1946官网发布于韦德娱乐1946网页版,转载请注明出处:Css3炫酷总结使用