CSS3 02. 边框、边框圆角、边框阴影、边框图片、渐变、线性渐变、径向渐变、背景、过渡transition、2D转换(缩放、位移、旋转、倾斜)

边框圆角　border-radius

　　每个角可以设置两个值，x值、y值

　　　　border-top-left-radius：水平半径　　垂直半径

　　　　border-radius：水平半径/垂直半径

　　　　border-radius:60px 30px 120px 160px/160px 120px 30px 60px ;

　　　　单位：百分比和像素。最好使用%

　　　　练习(重要）　　

盒子阴影　box-shadow

　　可设置多重边框阴影，增强立体感

　　box-shadow: 5px 　　5px　　 27px red,-5px -5px 27px green;

　　box-shadow:水平位移垂直位移模糊度阴影大小阴影颜色内阴影(inset)／外阴影(outset 默认) ；

　　　　　　　　　水平位移：正值向右；

　　　　　　　　　垂直偏移：正值向下；

　　边框阴影不会改变盒子的大小，不会影响兄弟元素的布局　　

边框图片　border-image

　　border-image:url("images/border.png") 27/20px round ;

　　border-image设置边框的背景图片

　　border-image-source:url("地址")设置边框图片的地址。

　　border-image-slice:27,27,27,27;　　裁剪图片

　　border-image-width: 20px;　　指定边框的宽度

　　border-image-repeat: stretch; 边框的样式： stretch 拉升／ round 自动调整缩放比例／repeat重复；

“切割”完成后生成虚拟的9块图形，然后按对应位置设置背景，

其中四个角位置、形状保持不变，中心位置水平垂直两个方向平铺。如下图

渐变

　　通过渐变可实现许多绚丽的教过，有效减少图片的使用数量，并且具有很强的适应性和可扩展性。

线性渐变 linear-gradient

　　linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果。

　　上图是从黄色渐变到绿色

　　　　background:linear-gradient(

　　　　　　　　　　　　　　　　　　to right ,

　　　　　　　　　　　　　　　　　　red 0%,red25%,

　　　　　　　　　　　　　　　　　　blue 25%,blue 25%,

　　　　　　　　　　　　　　　　　　green 50%,green50%

　　　　　　　　　　　　　　　　　　pink 75%,ping100%);　　　

　　　　background:linear-gradient( 方向to(left\right\top\bottom，也可以使用度数), 渐变起始颜色, 渐变终止颜色)

to top	0 deg	360 deg	底部到顶部
to bottom	180 deg	-180 deg	顶部到底部
to left	-90 deg	270 deg	从右向左
to right	90 deg	-270 deg	从左向右
to top left	315 deg	-45 deg	右下角到左上角
to top right	-315 deg	45 deg	左下角到右上角
to bottom left	225 deg	-135 deg	右上角到左下角
to bottom right	-225 deg	135 deg	左上角到右下角

径向渐变（radial径向）

radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果　　

background:radial-gradient( 150px at center, yellow,green);围绕中心点渐变，半径是150px，从黄到绿做渐变

必要的元素：

　　辐射范围即圆半径（半径越大，渐变效果越大。半径可以不等，即可以是椭圆）

　　中心点即圆的中心（中心点的位置是以盒子自身），中心位置参照的是盒子的左上角

径向渐变

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            width: 250px;
            height: 250px;
            border: 1px solid #000;
            margin: 20px auto;
        }
        /*
            径向渐变：
            radial-gradient（辐射半径, 中心的位置，起始颜色，终止颜色）;
            中心点位置：at  left  right  center bottom  top
        */
        div:nth-child(1){
            background-image: radial-gradient(at left top,yellow,green);
        }

        div:nth-child(2){
            background-image: radial-gradient(at 50px 50px,yellow,green);
        }

        div:nth-child(3){
            background-image: radial-gradient(100px at center,yellow ,green);
        }

        div:nth-child(4){
            background-image: radial-gradient(100px at center,
            yellow 0% ,
            green 30%,
            blue 60%,
            red 100%);
        }

        div:nth-child(5){
            background-image: radial-gradient(100px 50px  at center,yellow ,green);
        }


    </style>
</head>
<body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</body>
</html>

径向渐变练习

背景：

背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。

background-size:width,height 可以设置背景图片的宽高和高度

background-size: 600px ,auto; 自动适应盒子的宽度也可以设置为百分比

background-size: cover(覆盖)/ contain(包含)

　　cover 会自动调整缩放比例，保证图片始终填充满背景区域，若有溢出则隐藏

　　contain 自动调整缩放比例，保证图片始终完整显示在背景区域

背景原点background-origin：

　　调整背景位置的参照点，默认从padding开始平铺

　　background-origin： border-box (以边框做为参考原点)／padding-box（以内边距作为参考原点）／content-box（以内容区作为参考点）

背景裁剪background-clip：

　　属性值若比原点的范围大，不起作用

　　border-box:最大，裁切边框以内为背景区域；

　　padding-box ：裁切内边距以内为背景区域

　　content-box：裁切内容区域做为背景区域裁减去border-box和padding-box部分县市的背景图片

以逗号分隔可以设置多背景，可以用于自适应

        .box{
            width: 623px;
            height: 416px;
            border: 1px solid #000;
            margin:100px auto;
            /* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
            background: url(images/bg1.png) no-repeat left top
                        ,url(images/bg2.png) no-repeat right top
                        ,url(images/bg3.png) no-repeat right bottom
                        ,url(images/bg4.png) no-repeat left bottom
                        ,url(images/bg5.png) no-repeat center;
        }

过渡transition：要过渡的属性过渡的时间速度曲线延迟时间；

过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。

补间动画：自动完成从起始状态到终止状态的的过渡。不用管中间的状态

帧动画：扑克牌切换.通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片

特点：当前元素只要有“属性”发生变化时，可以平滑的进行过渡。

      .box{
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            margin:100px auto;
            background-color: red;

            /* 过渡属性*/
            /*transition:width 2s,background-color 2s;*/
            /* 如果多个过度的 特性是一样的 可以简写*/
            /* transition: 过渡属性 持续时间  运动曲线 延迟时间*/
            transition:all 4s linear 1s ;

            /* 过渡必须加给盒子本身*/
        }

        .box:hover{
            width: 600px;
            background-color: blue;
            /*height:400px;*/
        }

transition: [过渡属性 | 过渡时间 | 速度曲线 | 延迟时间]

　　可简写

　　transition-porperty: 过渡属性。所有属性都需要则填写all

　　transition-duration:过渡持续时间

　　transition-timing-function:运动曲线

　　　　linear匀速／ease减速／ease-in 加速／ease-out减速／ease-in-out 先加速后减速

　　transition-delay: 过渡延迟

气泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 过渡</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }

        .pop {
            width: 300px;
            height: 120px;
            margin: 30px auto;
            background: url("images/paopao.png") left bottom no-repeat,
            url("images/paopao.png") right top no-repeat;
            background-color: #036;
            border-radius: 6px;
            transition: all 1s linear;
        }

        .pop:hover{
            background-position:left top, right bottom;
        }

        



    </style>
</head>
<body>
    <div class="pop"></div>
</body>
</html>

气泡

手风琴菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3 过渡</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #F7F7F7;
        }
        h3 {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 500px;
            margin:0 auto;
        }
        .list h3 {
            height: 35px;
            line-height: 35px;
            padding-left: 30px;
            border-bottom: 2px solid #690;
            font-size: 14px;
            color: #FFF;
            background: #369;
            transition: all 0.3s ease 0s;
        }
        .list .pictxt {
            height: 0px;
            background: pink;
            transition: all 0.3s ease 0s;;
        }
        .list:hover h3 {
            background: #036;
        }
        .list:hover .pictxt {
            height: 150px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="list">
            <h3>今日新闻</h3>
            <div class="pictxt"></div>
        </div>
        <div class="list">
            <h3>今日新闻</h3>
            <div class="pictxt"></div>
        </div>
        <div class="list">
            <h3>今日新闻</h3>
            <div class="pictxt"></div>
        </div>
        <div class="list">
            <h3>今日新闻</h3>
            <div class="pictxt"></div>
        </div>
    </div>
</body>
</html>

手风琴菜单

2D 转换

转换是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式，配合即将学习的过渡和动画知识，可以取代大量之前只能靠Flash才可以实现的效果。在css3 当中，通过transform(变形) 来实现2d 或者3D 转换,其中2D 有，缩放，移动，旋转。　　

缩放 scale（X，Y）

　　对元素进行水平和垂直方向的缩放，x，y的取值可为小数，不可为负值

　　大于1为放大，小于1为缩小，内容也会等比缩放

　　只写一个值，则宽高等比例缩放

　　transform: scale(1.5,1.5);

位移 translate（x,y)

　　改变元素的位置，x,y 可为负值 x在水平方向移动，y在垂直方向移动

　　右移为正／左移为负／右下为正，左下为负，可写百分比

　　盒子在父盒子中居中： transform:translate(-50%);

旋转 rotate（角度）

　　正值顺时针，负值逆时针

　　可设置旋转中心：transform-origin: 水平坐标垂直坐标

　　默认旋转中心：几何中心，在旋转后，坐标轴也跟着发生转变，应把旋转放在最后

倾斜 skew（deg，deg）

　　元素按照一定角度倾斜，可为负值，第二个参数不写默认为0　　

　　参数1:水平Y轴（向右为正），顺时针角度变换

　　参数2:垂直X轴（向下为正），逆时针旋转

矩阵matrix() 把所有的2D转换组合到一起，需要6个参数

盾牌案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            background-color: #2AB561;
        }
        .box{
            width: 440px;
            height:491px;
            margin:100px auto;

        }

        .box img{
            transition:all 2s;
        }

        /* 打乱正常的图片*/

        .box img:nth-child(1){
            transform:translate(100px,100px) rotate(45deg);
        }


        .box img:nth-child(2){
            transform:translate(200px,200px) rotate(99deg);
        }

        .box img:nth-child(3){
            transform:translate(-100px,-60px) rotate(166deg);
        }


        .box img:nth-child(4){
            transform:translate(-200px,60px) rotate(86deg);
        }

        .box:hover img{
            transform:translate(0px,0px) rotate(0deg);
        }




    </style>
</head>
<body>
    <div class="box">
        <img src="images/shield_1_01.png" alt=""/>
        <img src="images/shield_1_02.png" alt=""/>
        <img src="images/shield_1_03.png" alt=""/>
        <img src="images/shield_1_04.png" alt=""/>
        <img src="images/shield_1_05.png" alt=""/>
        <img src="images/shield_1_06.png" alt=""/>
        <img src="images/shield_1_07.png" alt=""/>
        <img src="images/shield_1_08.png" alt=""/>
        <img src="images/shield_1_09.png" alt=""/>
    </div>
</body>
</html>

盾牌案例

扑克案例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body{
            overflow: hidden;
        }
        .box{
            width: 310px;
            height: 441px;

            margin:100px auto;
            position: relative;
            
        }

        /*.img1{*/
            /*transition:all 1s;*/
            /* 变换中心*/
            /*
                transform-origin:
                left top center  right  bottom
                50px 50px
            */
            /*transform-origin:center bottom;*/
        /*}*/

    .box img{
        position: absolute;
        left:0;
        top:0;
        transition:all 1s;

        /* 设置变换中心*/
        transform-origin: center bottom;
        box-shadow: 1px 1px 3px 1px #333;

    }

        .box:hover img:nth-child(6){
            transform:rotate(-10deg);
        }

        .box:hover img:nth-child(5){
            transform:rotate(-20deg);
        }

        .box:hover img:nth-child(4){
            transform:rotate(-30deg);
        }
        .box:hover img:nth-child(3){
            transform:rotate(-40deg);
        }
        .box:hover img:nth-child(2){
            transform:rotate(-50deg);
        }
        .box:hover img:nth-child(1){
            transform:rotate(-60deg);
        }

        .box:hover img:nth-child(8){
            transform:rotate(10deg);
        }

        .box:hover img:nth-child(9){
            transform:rotate(20deg);
        }

        .box:hover img:nth-child(10){
            transform:rotate(30deg);
        }
        .box:hover img:nth-child(11){
            transform:rotate(40deg);
        }
        .box:hover img:nth-child(12){
            transform:rotate(50deg);
        }
        .box:hover img:nth-child(13){
            transform:rotate(60deg);
        }



    </style>
</head>
<body>
    <div class="box">
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
        <img  src="images/pk2.png" alt=""/>
    </div>
</body>
</html>

扑克案例

posted @ 2017-05-02 16:53 明明明明明明明明阅读(4868) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部