金沙棋牌官方平台

当前位置:金沙棋牌 > 金沙棋牌官方平台 > css过渡动画,学习笔记css3

css过渡动画,学习笔记css3

来源:http://www.logblo.com 作者:金沙棋牌 时间:2019-11-29 12:46

探索 CSS3 中的 box-shadow 属性

2016/09/19 · CSS · box-shadow

本文由 伯乐在线 - 年迈的程序猿 翻译,刘唱 校稿。未经许可,禁止转载!
英文出处:Ire Aderinokun。欢迎加入翻译组。

挖掘你之前未曾见过的一些应用。
PS:文章末尾的 codepen 有8个不错的案例。

A . 学习内容

1.下拉菜单的实现(float,position,display的应用)
2.css常用样式的的补充
3.公共样式的提取
4.css 2D转换

具体代码:
1、水平翻转
-moz-transform:scale(-1,1);
-webkit-transform:scale(-1,1);
-o-transform:scale(-1,1);
transform:scale(-1,1);
filter:FlipH;

CSS3与页面布局学习笔记(六)——CSS3新特性(阴影、动画、渐变、变形、伪元素等),学习笔记css3

“box-shadow”属性

box-shadow属性是一个CSS3属性,允许我们在几乎任何元素上来创建阴影效果,类似于在设计软件中的”drop shadow”。这些阴影效果允许我们在原本平面的、二维的页面上面创建出深度(第三维)的错觉。

B . 学习到的要点总结

2、垂直翻转
-moz-transform:scale(1,-1);
-webkit-transform:scale(1,-1);
-o-transform:scale(1,-1);
transform:scale(1,-1);
filter:FlipV;

一、阴影

语法

box-shadow属性接收一个由5个部分组成的值

JavaScript

box-shadow: offset-x offset-y blur spread color position;

1
2
box-shadow: offset-x offset-y blur spread color position;
 

不像 border等属性值可以拆分成子属性,box-shadow属性是独立的。这意味着记录下属性值的顺序更加重要,特别是长度值。

1.下拉菜单的实现

html内容如下:

<div class="header">
    <ul class="row">
        <li class="dropDown">
            <a  href="#">收藏夹</a>
            <div class="dropContent">
                <a href="#">收藏宝贝</a>
                <a href="#">收藏店铺</a>
            </div>
        </li>
        <li><a href="#">卖家中心</a></li>
        <li><a href="#">联系客服</a></li>
    </ul>
</div>~~~
css样式如下:

*{margin: 0;padding:0}
.header{
width: 1000px;
background: pink;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.row:before{content:"";display: table;}
.row:after{content: "";display: table;clear: both;}

ul{list-style: none;}
li{
float: left;
width: 140px;
}
li a{
display: block;
text-decoration: none;
color: #ffffff;
font-size: 20px;
line-height: 60px;
}
.dropDown{
position: relative;
}
.dropContent{
position: absolute;
background-color: #ffacb1;
width: 140px;
display: none;
}
.dropDown:hover .dropContent{
display: block;
}
a:hover{
background-color: #ff6b81;
}~~~

3、顺时针旋转90度
-moz-transform:rotate(90deg);
-webkit-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

1.1、文字阴影

text-shadow
<length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<color>: 设置对象的阴影的颜色。

示例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .text{
                font: bold 100px/1.5 georgia, sans-serif;
                color: dodgerblue;
                text-shadow: 10px 10px 50px #000;
                /*text-shadow: 20px 30px 50px #000,-20px -30px 50px #f00;*/
            }
        </style>
    </head>
    <body>
        <div class="text">
            Shadow Text
        </div>
    </body>
</html>

运行效果:

 金沙棋牌官方平台 1

示例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <style>
            body {
                background: #000;
                color: #fff;
            }
            .neon{
                font: bold 100px/1.5 georgia, sans-serif;
                text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
            }
        </style>
        <div class="neon">
            Hello NEON Text
        </div>
    </body>
</html>

 

运行结果:

金沙棋牌官方平台 2

offset-x

第一个长度值指定了阴影的水平偏移量。即在x轴上阴影的位置。正值使阴影出现在元素的边,而负值使阴影出现在元素的边。

JavaScript

.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) } .right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }

1
2
3
4
.left { box-shadow: 20px 0px 10px 0px rgba(0,0,0,0.5) }
 
.right { box-shadow: -20px 0px 10px 0px rgba(0,0,0,0.5) }
 

 

2.border-radius属性

可单独改变一边:
border-top-left-radius: value;
border-top-right-radius:value;
border-bottom-left-radius:value;
border-bottom-right-radius:value

transition:all 0.4s linear;
-moz-transition:all 0.4s linear;
-webkit-transition:all 0.4s linear;
-o-transition:all 0.4s linear;

1.2、盒子阴影

box-shadow
<length>①: 第1个长度值用来设置对象的阴影水平偏移值。可以为负值
<length>②: 第2个长度值用来设置对象的阴影垂直偏移值。可以为负值
<length>③: 如果提供了第3个长度值则用来设置对象的阴影模糊值。不允许负值
<length>④: 如果提供了第4个长度值则用来设置对象的阴影外延值。可以为负值
<color>: 设置对象的阴影的颜色。
inset: 设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影

金沙棋牌官方平台 3

示例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .shadow1{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 10px 10px 30px 0 #1E90FF,-10px -10px 30px 0 #1E90FF;
            }
            .shadow2{
                margin: 30px;
                border: 10px solid #fff;
                box-shadow: 0 0 30px 0 #1E90FF;
            }
        </style>
    </head>
    <body>
        <p>
        <img src="img/7.jpg" class="shadow2"/>
        </p>
    </body>
</html>

运行效果:

金沙棋牌官方平台 4

练习:

金沙棋牌官方平台 5

金沙棋牌官方平台 6

3.box-shadow可以给元素添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow
必需 水平阴影的位置。允许负值。
v-shadow
必需。垂直阴影的位置。允许负值。
blur
可选。模糊距离。
spread
可选。阴影的尺寸。
color
可选。阴影的颜色。请参阅 CSS 颜色值。
inset
可选。将外部阴影 (outset) 改为内部阴影

倾斜
transform:skew(20deg);

二、背景

offset-y

第二个长度值指定了阴影的垂直偏移量。即在y轴上阴影的位置。正值使阴影出现在元素的边,而负值使阴影出现在元素的边。

JavaScript

.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) } .right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }

1
2
3
4
.left { box-shadow: 0px 20px 10px 0px rgba(0,0,0,0.5) }
 
.right { box-shadow: 0px -20px 10px 0px rgba(0,0,0,0.5) }
 

金沙棋牌官方平台 7

4.文字效果

//设置文字的阴影
text-shadow: h-shadow v-shadow blur color;
//用的不多,但面试的时候碰到过

text-overflow 文本溢出属性指定如何显示溢出内容
p{
金沙棋牌官方平台,overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
//white-space指定文字是否换行
}

{ -moz-transform:rotate(720deg); -webkit-transform:rotate(720deg); -o-transform:rotate(720deg); transform:rotate(720deg); transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -moz-transition:all 0.4s linear; -o-transition:all 0.4s linear;}

2.1、背景图像尺寸

background-size:指定对象的背景图像的尺寸大小

background-size:<bg-size> [ , <bg-size> ]* 

<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain

<length>: 用长度值指定背景图像大小。不允许负值。
<percentage>: 用百分比指定背景图像大小。不允许负值。
auto: 背景图像的真实大小。
cover: 将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain: 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。

示例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 500px;
                height: 300px;
                border: 10px solid rgba(0,0,255,.3);
                margin: 100px;

                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                /*background-size:100px 50px;*/
                /*background-size:contain;*/
            }
        </style>
    </head>
    <body>
        <div id="div1">

        </div>
    </body>
</html>

运行结果:

金沙棋牌官方平台 8

金沙棋牌官方平台 9

blur

第三个长度值代表阴影的模糊半径,举例说明,就像你在设计软件中使用高斯模糊滤镜。0值意味着阴影是完全实心和尖锐的,没有任何模糊。模糊数值越大,尖锐度越小,阴影越朦胧和模糊。负值是不被允许的,并会被处理成0。

JavaScript

.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) } .middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) } .right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }

1
2
3
4
5
6
.left { box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.5) }
 
.middle { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
 
.right { box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.5) }
 

金沙棋牌官方平台 10

5.translate位移

该元素移动的位置,取决于宽度(X轴)和高度(Y)
translate(x,y) x表示移动的宽度,y轴表示移动的高度

div
{
    transform:translate(50px,100px);
    -ms-transform:translate(50px,100px); /* IE 9 */
    -webkit-transform:translate(50px,100px); /* Safari and Chrome */
}~~~
######6.旋转rotate

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

阴影动画
<style>
.box { position: relative; left:10px; top:20px; display: inline-block; width: 100px; height: 100px; border-radius: 5px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: all 0.3s ease-in-out; }
.box::after { content: ''; position: absolute; z-index: -1; width: 100%; height: 100%; opacity: 0; border-radius: 5px; box-shadow: 0 5px 15px rgba(0,0,0,0.6); transition: all 0.3s ease-in-out;}
.box:hover::after{ opacity:1;}
.box:hover{ left:20px; top:40px; transform: scale(1.2, 1.2); transition: all 0.3s ease-in-out;}
</style>
<div class="box"></div>

2.2、背景图像显示的原点

background-origin:指定对象的背景图像显示的原点。

background-origin:<box> [ , <box> ]*
<box> = border-box | padding-box | content-box

padding-box: 从padding区域(含padding)开始显示背景图像。
border-box: 从border区域(含border)开始显示背景图像。
content-box: 从content区域开始显示背景图像。

示例代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #div1{
                width: 400px;
                height: 200px;
                border: 20px solid rgba(0,0,255,.2);
                margin: 100px;
                padding: 20px;

                background: url(img/7.jpg) no-repeat;
                background-size:100% 100%;
                background-origin:padding-box;
            }
        </style>
    </head>
    <body>
        <div id="div1">

        </div>
    </body>
</html>

 border-box效果:

金沙棋牌官方平台 11

 content-box效果:

金沙棋牌官方平台 12

padding-box效果:(默认)

金沙棋牌官方平台 13

spread

第四个,同时也是最后一个长度值代表着阴影的尺寸。这个值可以被想象成从元素到阴影的距离。正值会在元素的各个方向按指定的数值延伸阴影。负值会使阴影收缩得比元素本身尺寸还小。默认值0会让阴影伸展得和元素的大小一样。

JavaScript

.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) } .middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) } .right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }

1
2
3
4
5
6
.left { box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.5) }
 
.middle { box-shadow: 0px 0px 20px 20px rgba(0,0,0,0.5) }
 
.right { box-shadow: 0px 50px 20px -20px rgba(0,0,0,0.5) }
 

金沙棋牌官方平台 14

7.缩放scale

//scale(2,3)转变宽度为原来的大小的2倍,和其原始大小3倍的高度。

-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */~~~

######8. 倾斜skew(x,y)
skew(x,y) 方法,x表示水平方向,y表示垂直方向

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

IE滤镜特性:

三、伪元素

伪元素不是真的元素是通过CSS虚拟出的一个元素,CSS3的语法为了区分伪元素与伪类,使用“::”表示,但是前期为了兼容“:”仍然可以使用。

color

颜色值,正如你期望的,是阴影的颜色。它可以是任何颜色单位。(参考 Working with Colour in CSS)

JavaScript

.left { box-shadow: 0px 0px 20px 10px #67b3dd } .right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }

1
2
3
4
.left { box-shadow: 0px 0px 20px 10px #67b3dd }
 
.right { box-shadow: 0px 0px 20px 10px rgba(0,0,0,0.5) }
 

金沙棋牌官方平台 15

9.transition过渡

CSS3 过渡(transition) 配合hover使用

//改变宽度时长为2秒
div
{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover{ 
    width:100px;
}~~~
多项改变

div
{
transition: width 2s, height 2s, transform 2s;
-webkit-transition: width 2s, height 2s, -webkit-transform 2s;
}
div:hover{
width:200px;
height:200px;
transform:rotate(30deg)
}~~~
全部改变 可用all 即 ————transition: all 2s;

Alpha 透明效果
Blend Trans 渐隐渐现需结合javascript
Blur 动态模糊
Chrome 透明色效果
DropShadow 投影效果
FlipH 水平翻转
qlow 光晕效果
Gray 滤色效果
Invert 底片效果
FlipV 垂直效果
Light 灯光效果需结合javascript
Mask 遮罩效果
RevealTrans 图像切换效果产生百叶窗、溶解等动态效果需结合javascript
Shadow 阴影效果
Wave 波浪效果
X-ray X光片效果

3.1、before

在应用样式的元素内的前部虚拟一个元素可以指定元素的内容与样式。

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1 {
                margin: 100px;
                width: 300px;
                height: 180px;
                border: 5px solid lightcoral;
            }
            a{
                color:blue;
                text-decoration: none;
            }

            #div1:before {
                content: '这是before伪元素的内容';
                display: block;
                color: white;
                background: lightgreen;
            }

            #link1:before {
                content: attr(href);
            }

            #link2:before {
                content: url(img/link.png);
            }
        </style>
    </head>

    <body>
        <div id="div1">
            <hr />
        </div>

        <p>
            <a href="http://best.cnblogs.com" id="link1">博客园</a>
        </p>

        <p>
            <a href="http://best.cnblogs.com" id="link2">张果 - 博客园</a>
        </p>
    </body>

</html>

效果:

金沙棋牌官方平台 16

在上面的示例中伪元素可以当成一个正常的元素写所有样式,attr可以取出元素的属性,img可以指定图片。

position

box-shadow属性的最后一个值是一个可选的关键字,它代表着阴影的位置。默认情况下,这个值并而没有给出,这意味着阴影是一个外部阴影。我们能通过关键字inset使阴影变成内部阴影

JavaScript

.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset } .right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }

1
2
3
4
.left { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset }
 
.right { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) }
 

金沙棋牌官方平台 17

C . 熟练知识点

 

3.2、after

after也是一个与before类似的伪元素,不同的是他的位置是在内部的尾部,示例如下:

金沙棋牌官方平台 18<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1 { width: 300px; height: 180px; border: 5px solid lightcoral; } a{ color:blue; text-decoration: none; } #div1:after { content: '这是before伪元素的内容'; display: block; color: white; background: lightgreen; } #link1:after { content: attr(href); } #link2:after { content: url(img/link.png); } </style> </head> <body> <div id="div1"> <hr /> </div> <p> <a href="" id="link1">博客园</a> </p> <p> <a href="" id="link2">张果 - 博客园</a> </p> </body> </html> View Code

运行效果:

金沙棋牌官方平台 19

 注意:

a)、本质上并不支持伪元素的双冒号(::)写法,而是忽略掉了其中的一个冒号,仍以单冒号来解析,所以等同变相支持了E::after。
b)、不支持设置属性position, float, list-style-*和一些display值,Firefox3.5开始取消这些限制。
c)、IE10在使用伪元素动画有一个问题:
.test:hover {}
.test:hover::after { /* 这时animation和transition才生效 */ }需要使用一个空的:hover来激活

多重阴影

box-shadow属性能在单个元素上接受多个阴影。每个阴影通过用逗号分隔的 box-shadow 属性列表来加载。

JavaScript

.foo { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */ 20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */ }

1
2
3
4
5
.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5) inset, /* inner shadow */
                20px 20px 10px 0px rgba(0,0,0,0.5); /* outer shadow */
}
 

金沙棋牌官方平台 20

1.position的使用

rotate

3.3、清除浮动

方法一:

.clearfix:before, .clearfix:after {
    content:"";
    display:table;
}
.clearfix:after{
    clear:both;
    overflow:hidden;
}
.clearfix{
    *zoom:1;
}

方法二:

            .clearfix {
                *zoom: 1;
                /*在旧版本的IE浏览器缩放大小,触发haslayout(类似BFC)*/
            }

            .clearfix:after {
                /*伪元素,在应用该元素后添加一个伪元素*/
                content: "";
                /*内容为空*/
                display: table;
                /*BFC,清除内部浮动*/
                clear: both;
                /*清除外部浮动*/
            }

圆形阴影

box-shadow属性的边界半径是通过该元素的 border-radius属性来控制的。

JavaScript

.foo { box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5); border-radius: 50%; }

1
2
3
4
5
.foo {
    box-shadow: 20px 20px 10px 0px rgba(0,0,0,0.5);
    border-radius: 50%;
}
 

金沙棋牌官方平台 21

2.float的使用与清除

设置元素顺时针旋转的角度,用法是:

四、圆角与边框

圆角可能是我们最迫切需要的CSS3样式了,在CSS2.1中想尽各种办法都不算理想,实现方法如下:

把它们放在一起

把所有的部分放在一起,我们能通过使用box-shadow属性创造出一些奇妙的效果。

3.正确的锁定选择器,不会出现样式混乱

transform: rotate(x);

4.1、border-radius 圆角

border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?

<length>: 用长度值设置对象的圆角半径长度。不允许负值
<percentage>: 用百分比设置对象的圆角半径长度。不允许负值

这里有两部分,第一个角度是水平角度,第二个角度是垂直角度。

a)、提供2个参数,2个参数以“/”分隔,每个参数允许设置1~4个参数值,第1个参数表示水平半径,第2个参数表示垂直半径,如第2个参数省略,则默认等于第1个参数
b)、水平半径:如果提供全部四个参数值,将按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
c)、如果只提供一个参数,将用于全部的于四个角。
d)、如果提供两个,第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
e)、如果提供三个,第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
垂直半径也遵循以上4点。 对应的脚本特性为borderRadius。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-radius</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 180px;
                margin: 100px;
                padding: 10px;
                border: 5px solid lightgreen;

                /*border-radius: 20px;  4个角水平与垂直都为10px*/

                 /*border-radius: 30px 0 30px 0;  上右下左4个角*/

                /*border-radius: 190px; 4个角圆角是高宽一半*/

                border-radius: 165px 105px;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        border-radius: 165px 105px;
        </div>
    </body>
</html>

效果:

金沙棋牌官方平台 22

金沙棋牌官方平台 23

金沙棋牌官方平台 24

金沙棋牌官方平台 25

金沙棋牌官方平台 26

一种非布局模块边界的替代品

我们可以使用box-shadow属性来创建一种元素,这种元素是边界环绕的,但是它不干扰盒子模型或者页面上面的其他布局。更有甚者,用它来创造出多个阴影,我们可以在元素不同的边上拥有不同样式的边界。

JavaScript

.simple { box-shadow: 0px 0px 0px 40px indianred; } .multiple { box-shadow: 20px 20px 0px 20px lightcoral, -20px -20px 0px 20px mediumvioletred, 0px 0px 0px 40px rgb(200,200,200); }

1
2
3
4
5
6
7
8
9
10
.simple {
    box-shadow: 0px 0px 0px 40px indianred;
}
 
.multiple {
    box-shadow: 20px 20px 0px 20px lightcoral,
                -20px -20px 0px 20px mediumvioletred,
                0px 0px 0px 40px rgb(200,200,200);
}
 

金沙棋牌官方平台 27

D . 生疏知识点

参数x必须是以deg结尾的角度数或0,可为负数表示反向。

4.2、边框图片border-image

border-image:<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> | / <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>

<' border-image-source '>: 设置或检索对象的边框是否用图像定义样式或图像来源路径。
<' border-image-slice '>: 设置或检索对象的边框背景图的分割方式。
<' border-image-width '>: 设置或检索对象的边框厚度。
<' border-image-outset '>: 设置或检索对象的边框背景图的扩展。
<' border-image-repeat '>: 设置或检索对象的边框图像的平铺方式。

金沙棋牌官方平台 28

金沙棋牌官方平台 29

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>border-image</title>
        <style type="text/css">
            #div1 {
                width: 300px;
                height: 167px;
                margin: 100px;
                padding: 10px;
                border: 27px solid lightgreen;

                border-image: url(img/border.png);
                border-image-slice: 27;
            }
        </style>
    </head>
    <body>
        <div id="div1">
                border-image: url(img/border.png);<br/>
                border-image-slice: 27;<br />
        </div>

    </body>
</html>

效果:

金沙棋牌官方平台 30

金沙棋牌官方平台 31

弹出效果

box-shadow(和transform)属性上进行变形,我们能创造出一个元素靠近或者远离使用者的假象。

JavaScript

.popup { transform: scale(1); box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s; } .popup:hover { transform: scale(1.3); box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3); transition: box-shadow 0.5s, transform 0.5s; }

1
2
3
4
5
6
7
8
9
10
11
.popup {
    transform: scale(1);
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}
.popup:hover {
    transform: scale(1.3);
    box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.5s, transform 0.5s;
}
 

金沙棋牌官方平台 32

1.使用较少的文字溢出处理

scale

五、变形 transform

CSS3中使用transform对元素进行变形,可以是2D的也可以是3D(效果)的,transform的参数有许多,多数是函数的形式,具体如下:

transform:none | <transform-function>+

2D Transform Functions:
matrix(): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵
translate(): 指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
translatex(): 指定对象X轴(水平方向)的平移
translatey(): 指定对象Y轴(垂直方向)的平移
rotate(): 指定对象的2D rotation(2D旋转),需先有 <' transform-origin '> 属性的定义
scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值
scalex(): 指定对象X轴的(水平方向)缩放
scaley(): 指定对象Y轴的(垂直方向)缩放
skew(): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0
skewx(): 指定对象X轴的(水平方向)扭曲
skewy(): 指定对象Y轴的(垂直方向)扭曲 3D Transform Functions:
matrix3d(): 以一个4x4矩阵的形式指定一个3D变换
translate3d(): 指定对象的3D位移。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
translatez(): 指定对象Z轴的平移
rotate3d(): 指定对象的3D旋转角度,其中前3个参数分别表示旋转的方向x,y,z,第4个参数表示旋转的角度,参数不允许省略
rotatex(): 指定对象在x轴上的旋转角度
rotatey(): 指定对象在y轴上的旋转角度
rotatez(): 指定对象在z轴上的旋转角度
scale3d(): 指定对象的3D缩放。第1个参数对应X轴,第2个参数对应Y轴,第3个参数对应Z轴,参数不允许省略
scalez(): 指定对象的z轴缩放
perspective(): 指定透视距离

浮动效果

我们能在:after这样的伪元素上增加box-shadow的效果。我们能使用这个来创建出元素底部的阴影,给予元素浮起或者掉落下来的假象。

JavaScript

.floating { position: relative; transform: translateY(0); transition: transform 1s; } .floating:after { content: ""; display: block; position: absolute; bottom: -30px; left: 50%; height: 8px; width: 100%; box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4); border-radius: 50%; background-color: rgba(0, 0, 0, 0.2); transform: translate(-50%, 0); transition: transform 1s; } /* Hover States */ .floating:hover { transform: translateY(-40px); transition: transform 1s; } .floating:hover:after { transform: translate(-50%, 40px) scale(0.75); transition: transform 1s; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.floating {
    position: relative;
 
    transform: translateY(0);
    transition: transform 1s;
}
.floating:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -30px;
    left: 50%;
    height: 8px;
    width: 100%;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.2);
 
    transform: translate(-50%, 0);
    transition: transform 1s;
}
 
/* Hover States */
.floating:hover {
    transform: translateY(-40px);
    transition: transform 1s;
}
.floating:hover:after {
    transform: translate(-50%, 40px) scale(0.75);
    transition: transform 1s;
}
 

金沙棋牌官方平台 33

我们能通过box-shadow属性达成许多其他的特效。举个例子,this popular pen 使用这个属性创造出8种类似纸张的效果。即使表面上看起来它是一个用于创建简单阴影的工具,实际上它可远比那个功能强大的多。

打赏支持我翻译更多好文章,谢谢!

打赏译者

2.新学习的2D转换的处理

设置元素放大或缩小的倍数,用法包括:

5.1、rotate()2D旋转

transform:rotate(<angle>)

angle是角度的意思,单位可以是:

deg  度(Degrees)
grad 梯度(Gradians)
rad   弧度(Radians)
turn  转、圈(Turns)

示例:

金沙棋牌官方平台 34<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box-wrapper { width: 200px; height: 200px; border: 5px dashed lightgreen; padding: 5px; margin: 50px; } .box { width: 200px; height: 200px; background: lightblue; transform: rotate(45deg); } </style> </head> <body> <div class="box-wrapper"> <div class="box"> </div> </div> transform: rotate(45deg); </body> </html> View Code

效果:

金沙棋牌官方平台 35

打赏支持我翻译更多好文章,谢谢!

金沙棋牌官方平台 36

2 赞 8 收藏 评论

transform: scale(a); 元素x和y方向均缩放a倍

5.2、设置原点 transform-origin 

transform-origin用于设置变形时的原点,从5.1可以看出转动时默认的原点在中心,这里使用该属性修改原点位置。

transform-origin:[ <percentage> | <length> | left | center | right ] [ <percentage> | <length> | top | center | bottom ]
默认值:50% 50%,效果等同于center center

transform-origin:水平(left | center | right) 垂直(top | center | bottom)

示例:

金沙棋牌官方平台 37<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box-wrapper { width: 200px; height: 200px; border: 5px dashed lightgreen; padding: 5px; margin: 50px 0 0 150px; } .box { width: 200px; height: 200px; background: lightblue; transform: rotate(30deg); transform-origin: left top; /*旋转的原点为左上角*/ } </style> </head> <body> <div class="box-wrapper"> <div class="box"> </div> </div> </body> </html> View Code

效果:

金沙棋牌官方平台 38

一般情况下我们会在9个关键点转动,也可以使用具体的数字指定一个特殊的位置。

关于作者:年迈的程序猿

金沙棋牌官方平台 39

简介还没来得及写 :) 个人主页 · 我的文章 · 11

金沙棋牌官方平台 40

transform: scale(a, b); 元素x方向缩放a倍,y方向缩放b倍

5.3、平移 translate() 

transform:translate(x,y) = translate(<translation-value>[,<translation-value>]?),指定对象的2D translation(2D平移)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0 。

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px 0 0 150px;
            }

            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: translate(50%,-50px);
            }
        </style>
    </head>

    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
    </body>

</html>

效果:

金沙棋牌官方平台 41

可以使用该方法实现垂直居中,需要使用定位。

transform: scaleX(a); 元素x方向缩放a倍,y方向不变

5.4、缩放 scale

transform:scale(x,y)

scale(): 指定对象的2D scale(2D缩放)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .box-wrapper {
                width: 200px;
                height: 200px;
                border: 5px dashed lightgreen;
                padding: 5px;
                margin: 50px 0 0 150px;
            }

            .box {
                width: 200px;
                height: 200px;
                background: lightblue;
                transform: scale(0.5,1.5);  /*宽度缩小到1半,高度放大到1.5倍*/
            }
        </style>
    </head>

    <body>
        <div class="box-wrapper">
            <div class="box">
            </div>
        </div>
    </body>

</html>

效果:

金沙棋牌官方平台 42

transform: scaleY(b); 元素y方向缩放b倍,x方向不变

5.5、斜切扭曲skew 

transform:skew(x,y): 指定对象skew transformation(斜切扭曲)。第一个参数对应X轴 角度,第二个参数对应Y轴角度。如果第二个参数未提供,则默认值为0 

示例:

x30度角时效果:

金沙棋牌官方平台 43

y30度角时效果:

金沙棋牌官方平台 44

x30度角,y30度角时的效果:

金沙棋牌官方平台 45

练习1:

金沙棋牌官方平台 46

只允许一个div,可以使用CSS3

练习2:

请实现如下效果,可以使用CSS3

金沙棋牌官方平台 47

金沙棋牌官方平台 48

金沙棋牌官方平台 49

金沙棋牌官方平台 50

金沙棋牌官方平台 51<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box { width: 500px; height: 200px; background: lightblue; font: 43px/200px "microsoft yahei"; color: darkblue; text-align: center; margin: 0 auto; text-shadow: 0 1px 1px #fff; position: relative; } .box:before, .box:after { content: ' '; position: absolute; bottom: 10px; left: 5px; width: 50%; height: 20%; box-shadow: 0 10px 20px #ccc; transform: rotate(-3deg); z-index: -1; } .box:after { left: auto; right: 5px; transform: rotate(3deg); } </style> </head> <body> <div class="box"> Hello World By CSS3 </div> </body> </html> View Code

translate

六、渐变

在早期IE浏览中的滤镜中就有渐变,Photoshop中也有渐变,可简单的认为渐变就是颜色的平滑过度,CSS3的渐变语法如下:

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

<angle>: 用角度值指定渐变的方向(或角度)。
to left: 设置渐变为从右到左。相当于: 270deg
to right: 设置渐变从左到右。相当于: 90deg
to top: 设置渐变从下到上。相当于: 0deg
to bottom: 设置渐变从上到下。相当于: 180deg。这是默认值,等同于留空不写。 <color-stop> 用于指定渐变的起止颜色:
<color>: 指定颜色。
<length>: 用长度值指定起止色位置。不允许负值
<percentage>: 用百分比指定起止色位置。

渐变一般应用于需要指定颜色的地方。

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>linear-gradient</title>
        <style>
            .box {
                height: 200px;
                width: 200px;
                float: left;
                margin: 20px;
            }
            #div1{
                background: linear-gradient(orange,navy);
                /*从上到下橙色到蓝色渐变*/
            }
            #div2{
                background: linear-gradient(lightgreen,lightcoral 40%,lightblue);
                /*绿红蓝从上到下渐变,中间的40%表示红出现的位置,如果不指定则均匀分配*/
            }

            #div3{
                background: linear-gradient(0deg,red 20%,yellow 50%,green 80%);
                /*0度角方向(从下向上)*/
            }

            #div4{
                background: linear-gradient(45deg,blue,pink);
                /*目标方向45度角方向*/
            }

            #div5{
                background: linear-gradient(to top left,#000,#fff);
                /*从右下到左上的渐变*/
            }
            span{
                font: 50px/50px "microsoft yahei";
                color: linear-gradient(to left,red,blue);
                /*前景色无效,背景有效*/
            }
        </style>
    </head>

    <body>
        <div class="box" id="div1">
        </div>
        <div class="box" id="div2">
        </div>
        <div class="box" id="div3">
        </div>
        <div class="box" id="div4">
        </div>
        <div class="box" id="div5">
        </div>

            Hello Linear-Gradient

    </body>
</html>

效果:

金沙棋牌官方平台 52

如果要考虑兼容IE浏览器,可以使用IE中特有的滤镜。

filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="orange", EndColorStr="navy");
/*老IE中的渐变*/

IE中常用的滤镜:

金沙棋牌官方平台 53透明效果:filter:alpha(opacity=50); 黑白照片:filter: gray; X光照片:filter: Xray; 风动模糊:filter: blur(add=true,direction=45,strength=30); 正弦波纹:filter: Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3); 半透明效果:filter: Alpha(Opacity=50); 线型透明:filter: Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=140); 放射透明:filter: Alpha(Opacity=10, FinishOpacity=100, Style=2, StartX=30, StartY=30, FinishX=200, FinishY=200); 白色透明:filter: Chroma(Color=#FFFFFF); 降低色彩:filter: grays; 底片效果:filter: invert; 左右翻转:filter: fliph; 垂直翻转:filter: flipv; 投影效果:filter:progid:dXImageTransform.Microsoft.DropShadow(color=#cccccc,offX=5,offY=5,positives=true); 马赛克:filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3); 发光效果:filter:progid:dXImageTransform.Microsoft.Glow(color=#cccccc,Strength=5); 柔边效果:filter:alpha(opacity=100, finishOpacity=0,style=2; 许多 Filter 中的特效均已进入了 CSS3 草案,并在新版的非 IE 浏览器中得到了很好的支持。 View Code

设置元素的位移,用法为:

七、透明

transform: translate(a, b); 元素x方向位移a,y方向位移b

7.1、opacity

设置对象的不透明度。

opacity:<number>

<number>: 使用浮点数指定对象的不透明度。值被约束在[0.0-1.0]范围内,如果超过了这个范围,其计算结果将截取到与之最相近的值。 0表示完全透明,1表示完全不透明。

示例:

            .box {
                height: 180px;
                width: 300px;
                float: left;
                margin: 20px;
                background: url(img/7.jpg);
            }
            #div1{
                opacity: 0.5;  /*设置半透明*/
                filter:alpha(opacity=50); /*兼容IE,使用滤镜,0-100 */
                background: blue;
                height: 100px;
            }

        <div class="box">
            <div id="div1">
            </div>
        </div>

效果:

金沙棋牌官方平台 54

transform: translateX(a); 元素x方向位移a,y方向不变

7.2、transparent与图片透明

用来指定全透明色彩
transparent是全透明黑色(black)的速记法,即一个类似rgba(0,0,0,0)这样的值。
在CSS1中,transparent被用来作为background-color的一个参数值,用于表示背景透明。
在CSS2中,border-color也开始接受transparent作为参数值,《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
在CSS3中,transparent被延伸到任何一个有color值的属性上。

    color: transparent;
    border: 1px solid transparent;
    background: transparent;

常见互联网图片格式,压缩格式:

gif:只255种颜色,透明,动画效果

jpg:色彩丰富(65536),不透明,不支持动画

png:色彩更加丰富,支持透明,不支持动画

金沙棋牌官方平台 55

transform: translateY(b); 元素y方向位移b,x方向不变

7.3、RGBA

RGBA是CSS3中新增用于设置颜色的方法,语法:

RGBA(R,G,B,A)
取值:
R: 红色值。正整数 | 百分数
G: 绿色值。正整数 | 百分数
B: 蓝色值。正整数 | 百分数
A: Alpha透明度。取值0 - 1之间。

此色彩模式与RGB相同,只是在RGB模式上新增了Alpha透明度。
IE6.0-8.0不支持使用 rgba 模式实现透明度,可使用 IE 滤镜处理,如:

filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#80000000,endColorStr=#80000000);
background: rgba(0, 0, 0, 0.5);

示例:

            #div3 {
                /*兼容IE,使用滤镜,0-100 */
                filter: alpha(opacity=50);
                background: blue;
                background: rgba(0,0,255,.5);
                height: 100px;
            }

        <div class="box">
            <div id="div3">
            </div>
        </div>

效果:

金沙棋牌官方平台 56

代码:

金沙棋牌官方平台 57<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>linear-gradient</title> <style> .box { height: 180px; width: 300px; float: left; margin: 20px; background: url(img/7.jpg); } #div1 { opacity: 0.5; /*设置半透明*/ filter: alpha(opacity=50); /*兼容IE,使用滤镜,0-100 */ background: blue; height: 100px; } #div2 { background: url(img/border.png); height: 160px; width: 280px; border: 10px solid transparent; background-origin: content-box; } #div3 { /*兼容IE,使用滤镜,0-100 */ filter: alpha(opacity=50); background: blue; background: rgba(0,0,255,.5); height: 100px; } #div4 {} #div5 {} </style> </head> <body> <div class="box"> <div id="div1"> </div> </div> <div class="box"> <div id="div2"> </div> </div> <div class="box"> <div id="div3"> </div> </div> <div class="box" id="div4"> </div> <div class="box" id="div5"> </div> </body> </html> View Code

作业:

请完成如下效果,要求兼容IE8:

金沙棋牌官方平台 58

skew

八、动画

前端可以使用javascript实现一些简单的动画,但是有很大局限;jQuery解决了部分问题,对于一些小的动画jQuery表示不错,但复杂的过渡效果也无能为力;CSS3中引入了2种动画效果表现不错,分别是过渡动画与帧动画。

设置元素倾斜的角度,用法包括:

8.1、过渡动画

过渡动画可简单理解为是从一个状态过渡到另一个状态间自动生成的动画效果,相对简单。

transition语法:

transition:<single-transition>[,<single-transition>]*
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

<' transition-property '>: 检索或设置对象中的参与过渡的属性
<' transition-duration '>: 检索或设置对象过渡的持续时间
<' transition-timing-function '>: 检索或设置对象中过渡的动画类型
<' transition-delay '>: 检索或设置对象延迟过渡的时间

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>动画</title>
        <style>
            body {
                padding: 100px;
            }

            #img1 {
                /*所有过渡动画的时间都为1秒*/
                transition: all 1s;
            }

            #img1:hover {
                transform: rotate(360deg);
            }

            #img2 {
                /*当动画针对width时时间为0.5秒,高度为2秒*/
                transition: width 0.5s, height 2s ease-in;
            }

            #img2:hover {
                width: 100px;
                height: 50px;
            }
        </style>
    </head>

    <body>
        <img src="img/7.jpg" id="img1" />
        <img src="img/7.jpg" id="img2" width="300" height="200" />
    </body>

</html>

效果:

金沙棋牌官方平台 59

过度动画基本可以针对元素的种属性为尺寸、透明度、颜色等。

transform: skew(a, b); 元素x方向逆时针倾斜角度a,y方向顺时针倾斜角度b

8.2、帧动画

也称为补间动画,过度动画中的效果是根据原始状态与目标状态生成的,如果需要控制中间过程则可以使用帧动画。

帧动画需要先定义再使用,使用@keyframes定义,animation调用定义好的动画。

@keyframes语法:

@keyframes <identifier> { <keyframes-blocks> }
<keyframes-blocks>:[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*

<identifier>: identifier定义一个动画名称

<keyframes-blocks>: 定义动画在每个阶段的样式,即帧动画。

@keyframes testanimations {
    from { opacity: 1; }
    to { opacity: 0; }
}

animation语法:
animation:<single-animation>[,<single-animation>]*
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

animation-name : 检索或设置对象所应用的动画名称
animation-duration: 检索或设置对象动画的持续时间
animation-timing-function: 检索或设置对象动画的过渡类型
animation-delay: 检索或设置对象动画延迟的时间
animation-iteration-count '>: 检索或设置对象动画的循环次数
animation-direction: 检索或设置对象动画在循环中是否反向运动
animation-fill-mode: 检索或设置对象动画时间之外的状态
animation-play-state: 检索或设置对象动画的状态。w3c正考虑是否将该属性移除,因为动画的状态可以通过其它的方式实现,比如重设样式

示例:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>动画</title>
        <style>
            /*定义动画 名称为animate1*/
            @keyframes animate1 {
                /*第一帧样式*/
                from {
                    margin-left: 100%;
                    background: orangered;
                }
                /*动画执行到30%时样式*/
                30% {
                    background: lightblue;
                    width: 200px;
                    height: 200px;
                    border-radius: 100px;
                }
                /*动画执行到60%时样式*/
                60% {
                    background: lightgreen;
                    width: 300px;
                    height: 300px;
                    border-radius: 150px;
                }
                /*结束时样式*/
                to {
                    margin-left: 0;
                }
            }
            #div1 {
                width: 100px;
                height: 100px;
                border-radius: 50px;
                background: lightcoral;
                /*调用定义的动画,infinite无限制执行,linear动画函数线性动画*/
                animation: animate1 2s infinite linear;
            }
        </style>
    </head>
    <body>
        <div id="div1">
        </div>
    </body>
</html>

效果:

 金沙棋牌官方平台 60

infinite表示动画一直执行,如果只想执行一次,可以删除该关键字。虽然多数动画使用CSS3可以完成,但是动画非常耗资源,特别是在移动端,不建议多用。更加复杂的动画可以使用Canvas。

练习与测试:

金沙棋牌官方平台 61<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>练习</title> <style type="text/css"> #div1 { position: relative; font-size: 50px; text-shadow: 5px 5px 15px black; transition: all 1s; } @keyframes aaa{ from{ background: linear-gradient(to top left,red,green,blue); } 33%{ background: linear-gradient(to top left,blue,red,green); } 66%{ background: linear-gradient(to top left,green,blue,red); } to{ background: linear-gradient(to top left,red,green,blue); } } #div1:before { position: absolute; content: " "; width: 50px; height: 50px; background: red; display: inline-block; transform: rotate(-30deg) translate(100%, 100%); left:280px; z-index: 100; opacity: .5; filter:alpha(opacity=50); } #div1:after { content: "Hello World"; font-size: 50px; text-shadow: 5px 5px 15px black; } #div1:hover{ transform: rotate(180deg); } #img1 { width: 400px; height: 300px; box-shadow: 5px 5px 10px lightblue; border-radius: 200px/150px; } #div2 { width: 300px; height: 200px; float: left; border: 2px solid lightcoral; background: url(img/3.jpg); background-repeat: no-repeat; background-size: 100% 100%; } #div3 { width: 300px; height: 200px; float: left; border: 2px solid lightseagreen; background: linear-gradient(to top left,red,green,blue); animation: aaa 2s infinite linear; } </style> </head> <body> <div id="div1"> Hello World! <img src="img/3.jpg" id="img1" width="300" height="300" /> </div> <div id="div2"> </div> <div id="div3"> </div> </body> </html> View Code

transform: skewX(a); 元素x方向逆时针倾斜角度a,y方向不变

九、示例下载

参照:

金沙棋牌官方平台 62

一、阴影 1.1、文字阴影 text-shadow len...

transform: skewY(b); 元素y方向顺时针倾斜角度b,想方向不变

以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。

matrix

设置元素的变形矩阵,因为矩阵变形过于复杂,暂略。

origin

设置元素的悬挂点,用法包括:

transform-origin: a b; 元素的悬挂点为(a, b)

元素的悬挂点即为它旋转和倾斜时的中心点。取值中的a、b可以是长度值、以%结尾的百分比或者left、top、right、bottom四个值。

 

过渡效果
transition-property: width;
transition-duration: 2s;
圆角:border-radius:2px;
阴影:box-shadow:1px 1px 2px #FFF;

 

css渐变背景
background:-webkit-gradient(linear,left top,right bottom,color-stop(0,#972D20),color-stop(1,#A92400));
background:-moz-linear-gradient(left, #972D20, #A92400);
filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#972D20',endColorStr='#A92400',gradientType='1');

 

图片动画
@keyframes aabb {
0% {
transform: rotate(0deg);
border:5px solid red;
}
50% {
transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
@-webkit-keyframes aabb {
0% {
-webkit-transform: rotate(0deg);
border:5px solid red;
}
50% {
-webkit-transform: rotate(180deg);
background:black;
border:5px solid yellow;
}
100% {
-webkit-transform: rotate(360deg);
background:white;
border:5px solid red;
}
}
.loading {
border: 5px solid black;
border-radius: 40px;
width: 28px;
height: 188px;
animation: aabb 2s infinite linear;
-webkit-animation: aabb 2s infinite linear;
margin: 100px;
}

animation:load 0.6s steps(12, end) infinite; -webkit-animation:load 0.6s steps(12, end) infinite;

本文由金沙棋牌发布于金沙棋牌官方平台,转载请注明出处:css过渡动画,学习笔记css3

关键词: