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>
扑克案例

 

  

 

打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2022 CODEPRJ.COM