WEB前端第十五课——CSS动画A

1.border-radius圆角

  语法格式

    border-radius:value,四个角

    border-radius:value value,第一个value设置左上角和右下角,第二个value设置右上角和左下角

    border-radius:value value value value,从左上角开始顺时针设置四个角

    value单位:px、%、em

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css圆角</title>
    <style>
        .circle{
            width: 200px;
            height: 300px;
            background-color: greenyellow;
            margin: auto;
            border-radius: 50% 50% 45% 45%;
            font-size: 60px;
            color: #ef4222;
            font-family: Algerian;
            text-align: center;
            line-height: 300px;
        }
    </style>
</head>
<body>
    <div class="circle">
        egg
    </div>
</body>
</html>

2.box-shadow盒阴影

  属性值:h-shadow(必需,水平阴影的位置,允许负值)、v-shadow(必需,垂直阴影的位置,允许负值)、

      blur(模糊距离)、spread(阴影尺寸)、color(阴影颜色)、inset(将外部阴影(outset)改为内部阴影)

  书写格式:div { box-shadow: -6px, 7px, 8px, 9px, greenyellow; },h-shadow负值代表左边(正值代表右边)、v-shadow负值代表上边(正值代表下边)

  可以同时书写多组属性值,分别设置四条边样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css盒阴影</title>
    <style>
        .square1{
            width: 100px;
            height: 100px;
            border: 4px solid greenyellow;
            margin: 100px auto;
            box-shadow: -6px 7px 8px 9px yellow;
        }
        .square2{
            width: 100px;
            height: 100px;
            border: 4px solid greenyellow;
            margin: 100px auto;
            box-shadow: -6px 0px 9px 9px yellow,
                        0px -6px 9px 9px blue,
                        6px 0px 9px 9px orange,
                        0px 6px 9px 9px purple;
        }
    </style>
</head>
<body>
    <div class="square1"></div>
    <div class="square2"></div>
</body>
</html>

3.text-shadow文本阴影

  属性值:h-shadow(必需,水平阴影位置,可负值)、v-shadow(必需,垂直阴影位置,可负值)、blur(模糊距离)、color(阴影颜色)

  书写格式:div { text-shadow: -10px 20px 30px blue; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>css文字阴影</title>
    <style>
        .text{
            font-size: 80px;
            font-family: 楷体;
            color: orangered;
            font-weight: bolder;
            letter-spacing: 1em;
            text-align: center;
            text-shadow: -10px -5px 3px greenyellow;
        }
    </style>
</head>
<body>
    <div class="text">避暑山庄</div>
</body>
</html>

4.gradients渐变,在两个或多个颜色之间显示平稳的过渡

  两种渐变类型:

  linear gradients,线性渐变

    书写格式:background:linear-gradient(direction,color-stop1,color-stop2,……);

    direction值:默认为自上向下渐变,to bottom、to top、to right、to left、to bottom right、to left top等

          也可以使用角度(数值)设置方向,0deg代表从下向上、90deg代表从左向右、180deg代表从上向下、-90deg代表从右向左

    线性渐变至少设置两种颜色,默认情况下,每种颜色所占空间是均匀分布

  radial gradients,径向渐变

    书写格式:background:radial-gradient(center,shape,size,start-color,……,last-color);

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

    center,渐变的起点可以通过“ at X Y”(像素)或“ at x% y%”坐标的方式设置(左上角作为0 0点坐标),还可以通过方位设置“ at left top”(或right、center、bottom等组合)

    shape,渐变的形状也可以设置为 circle(圆形)

    size,参数包括:closest-side(最近边)、farthest-side(最远边)、closest-Corner(最近角)、farthest-corner(最远角,默认值)

    线性渐变至少设置两种颜色,默认情况下,每种颜色所占空间是均匀分布

5.linear-gradient线性渐变

  ① 自上向下渐变

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>CSS线性渐变</title>
    <style>
        .grad {
            height: 200px;
            background: -webkit-linear-gradient(red , blue); /* Safari */
            background: -o-linear-gradient(red, blue); /* Opera */
            background: -moz-linear-gradient(red, blue); /* Firefox */
            background: linear-gradient(red , blue); /* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

  ② 从左向右渐变(不同的浏览器内核,方向设置方式不同)

<html>
<head>
    <meta charset="utf-8">
    <title>CSS线性渐变</title>
    <style>
        .grad {
            height: 200px;
            background: -webkit-linear-gradient(left, red, blue); /* Safari */
            background: -o-linear-gradient(right, red, blue); /* Opera */
            background: -moz-linear-gradient(right, red, blue); /* Firefox */
            background: linear-gradient(to right, red, blue); /* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

  ③ 使用角度设置渐变

<html>
<head>
    <meta charset="utf-8">
    <title>CSS线性渐变</title>
    <style>
        .grad {
            width: 300px;
            height: 300px;
            background: -webkit-linear-gradient(120deg, red, blue); /* Safari */
            background: -o-linear-gradient(120deg, red, blue); /* Opera */
            background: -moz-linear-gradient(120deg, red, blue); /* Firefox */
            background: linear-gradient(120deg, red, blue); /* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

  ④ 颜色结点不均匀分布渐变

<html>
<head>
    <meta charset="utf-8">
    <title>CSS线性渐变</title>
    <style>
        .grad {
            height: 500px;
            background: -webkit-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* Safari */
            background: -o-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%);/* Opera */
            background: -moz-linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* Firefox */
            background: linear-gradient(red,yellow 30%,blue 50%,green,purple 70%); /* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

  ⑤ 重复(循环)渐变

<html>
<head>
    <meta charset="utf-8">
    <title>CSS线性渐变</title>
    <style>
        .grad {
            height: 500px;
            background: -webkit-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Safari */
            background: -o-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Opera */
            background: -moz-repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* Firefox */
            background: repeating-linear-gradient(red,yellow 10%,blue 20%,green,purple 50%); /* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

  ⑥ 透明度渐变(通过rgba定义颜色和透明度)

<html>
<head>
    <meta charset="utf-8">
    <title>CSS线性渐变</title>
    <style>
        .grad {
            height: 200px;
            background: -webkit-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1)); /* Safari */
            background: -o-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1));/* Opera */
            background: -moz-linear-gradient(left,rgba(255,0,255,0),rgba(255,0,255,1)); /* Firefox */
            background: linear-gradient(to right,rgba(255,0,255,0),rgba(255,0,255,1));/* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

6.radial-gradient径向渐变

  ① 从中心渐变

<html>
<head>
    <meta charset="utf-8">
    <title>CSS径向渐变</title>
    <style>
        .grad {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background: -webkit-radial-gradient(at center,yellow,orangered,black); /* Safari */
            background: -o-radial-gradient(at center,yellow,orangered,black); /* Opera */
            background: -moz-radial-gradient(at center,yellow,orangered,black);  /* Firefox */
            background: radial-gradient(at center,yellow,orangered,black); /* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

  ② 从四角渐变

<html>
<head>
    <meta charset="utf-8">
    <title>CSS径向渐变</title>
    <style>
        .grad {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background: -webkit-radial-gradient(at left top,yellow,orangered,black); /* Safari */
            background: -o-radial-gradient(at left top,yellow,orangered,black); /* Opera */
            background: -moz-radial-gradient(at left top,yellow,orangered,black);  /* Firefox */
            background: radial-gradient(at left top,yellow,orangered,black); /* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

   从四边渐变

 

<html>
<head>
    <meta charset="utf-8">
    <title>CSS径向渐变</title>
    <style>
        .grad {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background: -webkit-radial-gradient(at left center,yellow,orangered,black); /* Safari */
            background: -o-radial-gradient(at left center,yellow,orangered,black); /* Opera */
            background: -moz-radial-gradient(at left center,yellow,orangered,black);  /* Firefox */
            background: radial-gradient(at left center,yellow,orangered,black); /* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

  ④ 渐变大小和圆形渐变(注意:size、shape与center之间通过“空格”分开,而非逗号!)

<html>
<head>
    <meta charset="utf-8">
    <title>CSS径向渐变</title>
    <style>
        .grad {
            width: 500px;
            height: 300px;
            margin: 100px auto;
            background: -webkit-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* Safari */
            background: -o-radial-gradient(circle closest-side  at 200px 100px,yellow,orangered,black); /* Opera */
            background: -moz-radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black);  /* Firefox */
            background: radial-gradient(circle closest-side at 200px 100px,yellow,orangered,black); /* 标准的语法(必须放在最后) */
        }
    </style>
</head>
<body>
<div class="grad"></div>
</body>
</html>

  ⑤ 重复渐变和不均匀分布渐变,类似线性渐变

 

WEB前端第十五课——CSS动画A

上一篇:php 中php-fpm工作原理


下一篇:Javaweb向服务器上传文件以及从服务器下载文件的方法