CSS3渐变_倒影_过渡_2D变形_3D变形__第十天

请各位读者添加一下作者的微信公众号,以后有新的文章,将在微信公众号直接推送给各位,非常感谢。


如果您觉得这篇文章还不错,可以去H5专题中查看更多相关文章。

CSS3高级属性

这里写图片描述

今日课程预览

这里写图片描述

这里写图片描述

1. 渐变

1.1 线性渐变

为了创建一个线性渐变,你必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

同时,你也可以设置一个起点和一个方向(或一个角度)。

语法:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变 - 从上到下(默认情况下)

下面的实例演示了从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, blue); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 从上到下</h3>
    <p>从顶部开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

线性渐变 - 从左到右

下面的实例演示了从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(left, red , blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red , blue); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 从左到右</h3>
    <p>从左边开始的线性渐变。起点是红色,慢慢过渡到蓝色:</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

线性渐变 - 对角

你可以通过指定水平和垂直的起始位置来制作一个对角渐变。

下面的实例演示了从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(to bottom right, red , blue); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 对角</h3>
    <p>从左上角开始(到右下角)的线性渐变。起点是红色,慢慢过渡到蓝色:</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

使用角度

如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,

而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。

语法

background: linear-gradient(angle, color-stop1, color-stop2);

角度是指水平线和渐变线之间的角度,逆时针方向计算。

换句话说,0deg 将创建一个从下到上的渐变,90deg 将创建一个从左到右的渐变。

但是,请注意很多浏览器(Chrome,Safari,fiefox等)的使用了旧的标准,

即 0deg 将创建一个从左到右的渐变,90deg 将创建一个从下到上的渐变。

换算公式 90 - x = y 其中 x 为标准角度,y为非标准角度。

下面的实例演示了如何在线性渐变上使用角度:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 100px;
        background: -webkit-linear-gradient(0deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(0deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(0deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(0deg, red, blue); /* 标准的语法(必须放在最后) */
    }
    
    #grad2 {
        height: 100px;
        background: -webkit-linear-gradient(90deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(90deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(90deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(90deg, red, blue); /* 标准的语法(必须放在最后) */
    }
    
    #grad3 {
        height: 100px;
        background: -webkit-linear-gradient(180deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(180deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(180deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(180deg, red, blue); /* 标准的语法(必须放在最后) */
    }
    
    #grad4 {
        height: 100px;
        background: -webkit-linear-gradient(-90deg, red, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(-90deg, red, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(-90deg, red, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(-90deg, red, blue); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 使用不同的角度</h3>
    <div id="grad1" style="color:white;text-align:center;">0deg</div><br>
    <div id="grad2" style="color:white;text-align:center;">90deg</div><br>
    <div id="grad3" style="color:white;text-align:center;">180deg</div><br>
    <div id="grad4" style="color:white;text-align:center;">-90deg</div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

使用多个颜色结点

下面的实例演示了如何设置多个颜色结点:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, green, blue); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, green, blue); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, green, blue); /* 标准的语法(必须放在最后) */
    }
    
    #grad2 {
        height: 200px;
        background: -webkit-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
        background: linear-gradient(red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */
    }
    
    #grad3 {
        height: 200px;
        background: -webkit-linear-gradient(red 10%, green 85%, blue 90%); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(red 10%, green 85%, blue 90%); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(red 10%, green 85%, blue 90%); /* Firefox 3.6 - 15 */
        background: linear-gradient(red 10%, green 85%, blue 90%); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>3 个颜色结点(均匀分布)</h3>
    <div id="grad1"></div>
    
    <h3>7 个颜色结点(均匀分布)</h3>
    <div id="grad2"></div>
    
    <h3>3 个颜色结点(不均匀分布)</h3>
    <div id="grad3"></div>
    
    <p><strong>注意:</strong> 当未指定百分比时,颜色结点不会自动均匀分布。</p>
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

下面的实例演示了如何创建一个带有彩虹颜色和文本的线性渐变:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 55px;
        background: -webkit-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(left, red, orange, yellow, green, blue, indigo, violet); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
    渐变背景
    </div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

使用透明度(Transparency)

CSS3 渐变也支持透明度(transparency),可用于创建减弱变淡的效果。

为了添加透明度,我们使用 rgba() 函数来定义颜色结点。

rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:

0 表示完全透明,1 表示完全不透明。

下面的实例演示了从左边开始的线性渐变。起点是完全透明,慢慢过渡到完全不透明的红色:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-linear-gradient(left, rgba(255,0,0,0), rgba(255,0,0,1)); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(right, rgba(255,0,0,0), rgba(255,0,0,1)); /* Firefox 3.6 - 15 */
        background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>线性渐变 - 透明度</h3>
    <p>为了添加透明度,我们使用 rgba() 函数来定义颜色结点。rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。</p>
    
    <div id="grad1"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

重复的线性渐变

repeating-linear-gradient() 函数用于重复线性渐变:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 200px;
        background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /* Safari 5.1 - 6.0 */
        background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera 11.1 - 12.0 */
        background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /* Firefox 3.6 - 15 */
        background: repeating-linear-gradient(red, yellow 10%, green 20%); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>重复的线性渐变</h3>
    
    <div id="grad1"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

1.2 CSS3 径向渐变

径向渐变由它的中心定义。

为了创建一个径向渐变,你也必须至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。

同时,你也可以指定渐变的中心、形状(原型或椭圆形)、大小。

默认情况下,渐变的中心是 center(表示在中心点),渐变的形状是 ellipse(表示椭圆形),

渐变的大小是 farthest-corner(表示到最远的角落)。

径向渐变的实例:

background: radial-gradient(center, shape size, start-color, ..., last-color);

径向渐变 - 颜色结点均匀分布(默认情况下)

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red, green, blue); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red, green, blue); /* Firefox 3.6 - 15 */
        background: radial-gradient(red, green, blue); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>径向渐变 - 颜色结点均匀分布</h3>
    <div id="grad1"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

径向渐变 - 颜色结点不均匀分布

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(red 5%, green 15%, blue 60%); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red 5%, green 15%, blue 60%); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red 5%, green 15%, blue 60%); /* Firefox 3.6 - 15 */
        background: radial-gradient(red 5%, green 15%, blue 60%); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>径向渐变 - 颜色结点不均匀分布</h3>
    <div id="grad1"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

设置形状

shape 参数定义了形状。

它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。

默认值是 ellipse。

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(red, yellow, green); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6 - 15 */
        background: radial-gradient(red, yellow, green); /* 标准的语法(必须放在最后) */
    }
    
    #grad2 {
        height: 150px;
        width: 200px;
        background: -webkit-radial-gradient(circle, red, yellow, green); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(circle, red, yellow, green); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(circle, red, yellow, green); /* Firefox 3.6 - 15 */
        background: radial-gradient(circle, red, yellow, green); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>径向渐变 - 形状</h3>
    
    <p><strong>椭圆形 Ellipse(默认):</strong></p>
    <div id="grad1"></div>
    
    <p><strong>圆形 Circle:</strong></p>
    <div id="grad2"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

不同尺寸大小关键字的使用

size 参数定义了渐变的大小。它可以是以下四个值:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 150px;
        background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
    }
    
    #grad2 {
        height: 150px;
        width: 150px;
        background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
    }
    
    #grad3 {
        height: 150px;
        width: 150px;
        background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
    }
    
    #grad4 {
        height: 150px;
        width: 150px;
        background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */
        background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */
        background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */
        background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>径向渐变 - 不同尺寸大小关键字的使用</h3>
    
    <p><strong>closest-side:</strong></p>
    <div id="grad1"></div>
    
    <p><strong>farthest-side:</strong></p>
    <div id="grad2"></div>
    
    <p><strong>closest-corner:</strong></p>
    <div id="grad3"></div>
    
    <p><strong>farthest-corner(默认):</strong></p>
    <div id="grad4"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

重复的径向渐变

repeating-radial-gradient() 函数用于重复径向渐变:

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #grad1 {
        height: 150px;
        width: 200px;
        background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /* Safari 5.1 - 6.0 */
        background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera 11.6 - 12.0 */
        background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /* Firefox 3.6 - 15 */
        background: repeating-radial-gradient(red, yellow 10%, green 15%); /* 标准的语法(必须放在最后) */
    }
    </style>
    </head>
    <body>
    
    <h3>重复的径向渐变</h3>
    
    <div id="grad1"></div>
    
    <p><strong>注意:</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>
    
    </body>
    </html>

2. 倒影

倒影的特点:

  • 不占内容宽高
  • 倒影的层级比文档流的高
  • 倒影是相对标签进行倒影
    例如:场景一个div标签里面嵌套一个img标签;
    设置img图片标签的属性
    
    img{
        width: 100px;
    }
    设置div标签的属性
    div{
    
    <!-- 记得设置div浮动,为的是可以将块属性标签div当做一个行标签来使用,清浮动,而且默认宽度不是100%;-->
    float: left;
    <!--设置倒影-->     
    -webkit-box-reflect:left 0px -webkit-linear-gradient(left,rgba(0,0,0,.2) 30%,rgba(0,0,0,.6) 90%);
    
    }

显示效果如下图所示:

倒影展示效果

3. 过渡

通过 CSS3transition,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。

要实现这一点,必须规定两项内容:

  • 指定要添加效果的CSS属性
  • 指定效果的持续时间。

应用于宽度属性的过渡效果,时长为 2 秒:

div
{
transition: width 2s;
-webkit-transition: width 2s; /* Safari */
}

注意: 如果未指定的期限,transition将没有任何效果,因为默认值是0。

指定的CSS属性的值更改时效果会发生变化。一个典型CSS属性的变化是用户鼠标放在一个元素上时:

规定当鼠标指针悬浮(:hover)于 <div>元素上时:

样例代码:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
    }
    
    div:hover
    {
    width:300px;
    }
    </style>
    </head>
    <body>
    
    <p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    
    <div></div>
    
    <p>鼠标移动到 div 元素上,查看过渡效果。</p>
    
    </body>
    </html>

多项改变

要添加多个样式的变换效果,添加的属性由逗号分隔:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div {
        width: 100px;
        height: 100px;
        background: red;
        -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
        transition: width 2s, height 2s, transform 2s;
    }
    
    div:hover {
        width: 200px;
        height: 200px;
        -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
        transform: rotate(180deg);
    }
    </style>
    </head>
    <body>
    <p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    
    <div>鼠标移动到 div 元素上,查看过渡效果。</div>
    </body>
    </html>

属性 描述
transition 简写属性,用于在一个属性中设置四个过渡属性。
transition-property 规定应用过渡的 CSS 属性的名称。
transition-duration 定义过渡效果花费的时间。默认是 0。
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
transition-delay 规定过渡效果何时开始。默认是 0。
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition-property:width;
    transition-duration:1s;
    transition-timing-function:linear;
    transition-delay:2s;
    /* Safari */
    -webkit-transition-property:width;
    -webkit-transition-duration:1s;
    -webkit-transition-timing-function:linear;
    -webkit-transition-delay:2s;
    }
    
    div:hover
    {
    width:200px;
    }
    </style>
    </head>
    <body>
    
    <p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    
    
    
    <div></div>
    
    <p>鼠标移动到 div 元素上,查看过渡效果。</p>
    <p><b>注意:</b> 过渡效果需要等待两秒后才开始。</p>
    
    </body>
    </html>

与上面的例子相同的过渡效果,但是使用了简写的 transition 属性:

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:100px;
    background:red;
    transition:width 1s linear 2s;
    /* Safari */
    -webkit-transition:width 1s linear 2s;
    }
    
    div:hover
    {
    width:200px;
    }
    </style>
    </head>
    <body>
    
    <p><b>注意:</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
    
    <div></div>
    
    <p>鼠标移动到 div 元素上,查看过渡效果。</p>
    <p><b>注意:</b> 过渡效果需要等待两秒后才开始。</p>
    
    </body>
    </html>


    例如:一个div标签嵌套了一个img标签和span标签(img和span是同级标签)
    <!--设置图片高度-->
    img{
       height: 218px;
      }
     <!--设置span标签的属性--> 
    span{
        height: 30px;
        width: 100%;
        font-size: 16px;
        color: white;
        text-align: center;;
        line-height: 30px;
        position: absolute;
        left: 0;
        bottom: 0;
        <!--设置开始透明度为0,也就是不显示-->
        opacity: 0;
        <!--设置0.5过渡-->
        transition:all .5s;
      }
      hover 伪类选择器用于选择鼠标指针浮动在上面的元素时触发;对于此时而言,就是鼠标指针浮动在div标签上时,显示span标签上的字体;
    div:hover span{
       <!--设置透明度为1,也就是显示-->
       opacity: 1;
      }

显示效果如下图所示:

transition展示效果

扩展属性:

  • transition-property 规定应用过渡的 CSS 属性的名称。
  • transition-duration 定义过渡效果花费的时间。默认是 0。
  • transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。
  • transition-delay 规定过渡效果何时开始。默认是 0。
  • transition 简写属性,用于在一个属性中设置四个过渡属性。

4.CSS3变形

4.1 2D 转换

主要使用下面五个方法:

  • translate()
  • rotate()
  • scale()
  • skew()
  • matrix()

新转换属性

以下列出了所有的转换属性:

Property 描述 CSS
transform 适用于2D或3D转换的元素 3
transform-origin 允许您更改转化元素位置 3

2D 转换方法

函数 描述
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
translate(x,y) 定义 2D 转换,沿着 X 和 Y 轴移动元素。
translateX(n) 定义 2D 转换,沿着 X 轴移动元素。
translateY(n) 定义 2D 转换,沿着 Y 轴移动元素。
scale(x,y) 定义 2D 缩放转换,改变元素的宽度和高度。
scaleX(n) 定义 2D 缩放转换,改变元素的宽度。
scaleY(n) 定义 2D 缩放转换,改变元素的高度。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
skew(x-angle,y-angle) 定义 2D 倾斜转换,沿着 X 和 Y 轴。
skewX(angle) 定义 2D 倾斜转换,沿着 X 轴。
skewY(angle) 定义 2D 倾斜转换,沿着 Y 轴。

4.1.1 translate() 方法

translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:translate(50px,100px);
    -ms-transform:translate(50px,100px); /* IE 9 */
    -webkit-transform:translate(50px,100px); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.1.2 rotate() 方法

rotate()方法,在一个给定度数顺时针旋转的元素。负值是允许的,这样是元素逆时针旋转。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:rotate(30deg);
    -ms-transform:rotate(30deg); /* IE 9 */
    -webkit-transform:rotate(30deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>你好。这是一个 DIV 元素。</div>
    
    <div id="div2">你好。这是一个 DIV 元素。</div>
    
    </body>
    </html>

4.1.3 scale() 方法

scale()方法,该元素增加或减少的大小,取决于宽度(X轴)和高度(Y轴)的参数:

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

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    margin:100px;
    transform:scale(2,4);
    -ms-transform:scale(2,4); /* IE 9 */
    -webkit-transform:scale(2,4); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.1.4 skew() 方法

skew()方法,该元素会根据横向(X轴)和垂直(Y轴)线参数给定角度:

skew(30deg,20deg)是绕X轴和Y轴周围20度30度的元素。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:skew(30deg,20deg);
    -ms-transform:skew(30deg,20deg); /* IE 9 */
    -webkit-transform:skew(30deg,20deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.1.5 matrix() 方法

matrix()方法和2D变换方法合并成一个。

matrix 方法有六个参数,包含旋转,缩放,移动(平移)和倾斜功能。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    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 */
    -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.1.6 CSS3 transform 属性

Transform属性应用于元素的2D或3D转换。

这个属性允许你将元素旋转,缩放,移动,倾斜等。

transform: none|transform-functions;

描述
none 定义不进行转换。
matrix(n,n,n,n,n,n) 定义 2D 转换,使用六个值的矩阵。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate(x,y) 定义 2D 转换。
translate3d(x,y,z) 定义 3D 转换。
translateX(x) 定义转换,只是用 X 轴的值。
translateY(y) 定义转换,只是用 Y 轴的值。
translateZ(z) 定义 3D 转换,只是用 Z 轴的值。
scale(x[,y]?) 定义 2D 缩放转换。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 通过设置 X 轴的值来定义缩放转换。
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。
scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。 测试
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
perspective(n) 为 3D 转换元素定义透视视图。
    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:200px;
    height:100px;
    background-color:yellow;
    /* Rotate div */
    transform:rotate(7deg);
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <div>Hello</div>
    
    </body>
    </html>

案例:旋转图片

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    body
    {
    margin:30px;
    background-color:#E9E9E9;
    }
    
    div.polaroid
    {
    width:294px;
    padding:10px 10px 20px 10px;
    border:1px solid #BFBFBF;
    background-color:white;
    /* Add box-shadow */
    box-shadow:2px 2px 3px #aaaaaa;
    }
    
    div.rotate_left
    {
    float:left;
    -ms-transform:rotate(7deg); /* IE 9 */
    -webkit-transform:rotate(7deg); /* Safari and Chrome */
    transform:rotate(7deg);
    }
    
    div.rotate_right
    {
    float:left;
    -ms-transform:rotate(-8deg); /* IE 9 */
    -webkit-transform:rotate(-8deg); /* Safari and Chrome */
    transform:rotate(-8deg);
    }
    </style>
    </head>
    <body>
    
    <div class="polaroid rotate_left">
    [站外图片上传中……(30)]
    <p class="caption">The pulpit rock in Lysefjorden, Norway.</p>
    </div>
    
    <div class="polaroid rotate_right">
    [站外图片上传中……(31)]
    <p class="caption">Monterosso al Mare. One of the five villages in Cinque Terre.</p>
    </div>
    
    
    </body>
    </html>

4.1.7 CSS3 transform-origin 属性

transform-Origin属性允许您更改转换元素的位置。

2D转换元素可以改变元素的X和Y轴。 3D转换元素,还可以更改元素的Z轴。

为了更好地理解Transform-Origin属性,请查看这个演示.

注意: 使用此属性必须先使用 transform 属性。

transform-origin: x-axis y-axis z-axis;

描述
x-axis 定义视图被置于 X 轴的何处。可能的值:left/center/right/length/%
y-axis 定义视图被置于 Y 轴的何处。可能的值:top/center/bottom/length/%
z-axis 定义视图被置于 Z 轴的何处。可能的值:length
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    #div1
    {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 100px;
    padding:10px;
    border: 1px solid black;
    }
    
    #div2
    {
    padding:50px;
    position: absolute;
    border: 1px solid black;
    background-color: red;
    transform: rotate(45deg);
    transform-origin:20% 40%;
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin:20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Safari and Chrome */
    -webkit-transform-origin:20% 40%; /* Safari and Chrome */
    }
    </style>
    </head>
    
    <body>
    
    <div id="div1">
      <div id="div2">HELLO</div>
    </div>
    
    </body>
    </html>

4.1.8 transition补充

transition当中也可以使用贝塞尔曲线。

例如:transition: all 1s cubic-bezier(0,0,0.8,1.8);

如下图所示:

  • CSS3贝塞尔曲线(cubic-bezier)参数详解

  • 预留的几个特效:

  • ease: cubic-bezier(0.25, 0.1, 0.25, 1.0)

  • linear: cubic-bezier(0.0, 0.0, 1.0, 1.0)

  • ease-in: cubic-bezier(0.42, 0, 1.0, 1.0)

  • ease-out: cubic-bezier(0, 0, 0.58, 1.0)

  • ease-in-out: cubic-bezier(0.42, 0, 0.58, 1.0)

    首先,我们来学习几个3D变形当中的几个属性知识点;学习3D效果之前,我们来看一张三维空间图片,这是一张三维空间的基本图,分别有x轴、y轴、z轴三个方向;

3D平移 translate

3D平移分别有三个方向:

第一个方向:translateX(x) 定义 3D 转化,仅使用用于 X 轴的值,以X轴平移;

看下代码中所示,例如我们创建了一个div标签(我们在div上添加一行字,叫做"我是文字",方便待会儿查看角度),然后设置其属性为:


然后,我们来看一下3D平移,该场景下的运行效果(注意:主要看下鼠标滑到div上时的一个平移效果);

  • 第二个方向:translateX(Y) 定义 3D 转化,仅使用用于 Y 轴的值,以Y轴平移;这个和以X轴方向差不多,也就是上下平移,如果平移的负值,则往Y轴的负方向,也就是往下平移,反之,向上平移(这个地方就不做图解演示说明);
  • 第三个方向:translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值,以Z轴平移;对于这个角度的值,就得有三维空间的想象力了,那么,往Z周的正方向来平移,也就是相当于与我们眼睛目视前方的距离越来越近;做个实例,我们来看一下;
    我们还是使用上面这个已经创建好的div标签,稍作修改,看下效果;

注意:在使用translateZ平移时,一定要定义一个透视点作为参照物以及开启3D视图;



同样,我们来看一下3D平移,该场景下的运行效果(注意:主要看下鼠标滑到div上时的一个距离我们越来越近的平移效果 Z轴正方向);

  • 3D旋转 rotate
  • rotateX(angle) 定义沿 X 轴的 3D 旋转。

同样,我们还是以上面这个div为例,只需要将里面的transform部分修改为rotateX,沿X轴旋转;(只看修改代码的部分)


我们来看下沿X轴旋转的效果;

  • rotateY(angle) 定义沿 Y 轴的 3D 旋转。(这个只需要将上面代码中的rotateX修改为rotateY即可,我们看下沿Y轴旋转的效果);
  • rotateZ(angle) 定义沿 Z 轴的 3D 旋转。(这个只需要将上面代码中的rotateY修改为rotateZ即可,我们看下沿Z轴旋转的效果)注意:Z轴的空间是哪个角度;

4.2 3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化。

  • rotateX()
  • rotateY()

转换属性

下表列出了所有的转换属性:

属性 描述
transform 向元素应用 2D 或 3D 转换。
transform-origin 允许你改变被转换元素的位置。
transform-style 规定被嵌套元素如何在 3D 空间中显示。
perspective 规定 3D 元素的透视效果。
perspective-origin 规定 3D 元素的底部位置。
backface-visibility 定义元素在不面对屏幕时是否可见。

3D 转换方法

函数 描述
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换,使用 16 个值的 4x4 矩阵。
translate3d(x,y,z) 定义 3D 转化。
translateX(x) 定义 3D 转化,仅使用用于 X 轴的值。
translateY(y) 定义 3D 转化,仅使用用于 Y 轴的值。
translateZ(z) 定义 3D 转化,仅使用用于 Z 轴的值。
scale3d(x,y,z) 定义 3D 缩放转换。
scaleX(x) 定义 3D 缩放转换,通过给定一个 X 轴的值。
scaleY(y) 定义 3D 缩放转换,通过给定一个 Y 轴的值。
scaleZ(z) 定义 3D 缩放转换,通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿 X 轴的 3D 旋转。
rotateY(angle) 定义沿 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿 Z 轴的 3D 旋转。
perspective(n) 定义 3D 转换元素的透视视图。

4.2.1 rotateX() 方法

rotateX()方法,围绕其在一个给定度数X轴旋转的元素。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:rotateX(120deg);
    -webkit-transform:rotateX(120deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera does not support the rotateX method.</p>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

4.2.2 rotateY() 方法

rotateY()方法,围绕其在一个给定度数Y轴旋转的元素。

    <!DOCTYPE html>
    <html>
    <head>
    <style> 
    div
    {
    width:100px;
    height:75px;
    background-color:red;
    border:1px solid black;
    }
    div#div2
    {
    transform:rotateY(130deg);
    -webkit-transform:rotateY(130deg); /* Safari and Chrome */
    }
    </style>
    </head>
    <body>
    
    <p><b>Note:</b> Internet Explorer 9 (and earlier versions) and Opera does not support the rotateY method.</p>
    
    <div>Hello. This is a DIV element.</div>
    
    <div id="div2">Hello. This is a DIV element.</div>
    
    </body>
    </html>

推荐阅读更多精彩内容

  • css3渐变生成工具 文本 text-overflow clip 隐藏超出文本 ellipsis 超出部分使用省略...
    DeeJay_Y阅读 194评论 0 0
  • 1、属性选择器:id选择器 # 通过id 来选择类名选择器 . 通过类名来选择属性选择器 ...
    圆圆和方方阅读 413评论 0 7
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 562评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 580评论 0 9
  • 看了很多视频、文章,最后却通通忘记了,别人的知识依旧是别人的,自己却什么都没获得。此系列文章旨在加深自己的印象,因...
    DCbryant阅读 519评论 0 3