CSS3_动画和绘制特殊图形

最新推荐文章于 2021-08-25 20:22:11 发布

脑袋不灵光的小白羊

最新推荐文章于 2021-08-25 20:22:11 发布

阅读量516

点赞数

分类专栏： HTML+CSS+JS 文章标签： css3 html

本文链接：https://blog.csdn.net/qq_42588990/article/details/107589724

版权

HTML+CSS+JS 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

CSS3

CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。

圆角border-radius

语法

border-radius：value；四个角
border-radius：value value；左上右下、右上左下
border-radius：value value value value；

代表设置对象左上角、右上角、右下角、左下角

顺时针设置
在这里插入图片描述

盒阴影box-shadow

语法：box-shadow: h-shadow v-shadow blur spread color inset;
在这里插入图片描述

盒阴影

HTML文档

<div class="shadow"></div>

CSS样式

.shadow{
            width: 300px;
            height: 100px;
            background-color: red;
            box-shadow: 10px 10px 5px 3px darkred;
        }

在这里插入图片描述

文字阴影

语法：text-shadow: h-shadow v-shadow blur color;
在这里插入图片描述

文字阴影

<div class="text1">CSS3文字阴影</div>
.text1{
            font-size: 50px;
            font-weight: bold;
            color: palegreen;
            text-shadow: 10px -5px 5px pink ;
       }

在这里插入图片描述

CSS3 渐变

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。以前，你必须使用图像来实现这些效果。但是，通过使用 CSS3 渐变（gradients），使用代码来实现渐变可以减少请求和节约带宽。

CSS3 定义了两种类型的渐变（gradients）

线性渐变（Linear Gradients）

在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        .grad{
            height: 200px;
            background: -webkit-repeating-linear-gradient(red,yellow 10%,green 20%);
            background: -o-repeating-linear-gradient(red,yellow 10%,green 20%);
            background: -moz-repeating-linear-gradient(red,yellow 10%,green 20%);
            background: repeating-linear-gradient(red,yellow 10%,green 20%);/*标准语法*/
        }ll
    </style>
</head>
<body>
    <!--
    线性渐变
    语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
    1.默认时从上往下渐变
     .grad{
            height: 200px;
            background: -webkit-linear-gradient(red,blue);
            background: -o-linear-gradient(red,blue);
            background: -moz-linear-gradient(red,blue);
            background: linear-gradient(red,blue);/*标准语法*/
        }
    2.自定义渐变方向
    .grad{
            height: 200px;
            background: -webkit-linear-gradient(left,red,blue);
            background: -o-linear-gradient(to right,red,blue);
            background: -moz-linear-gradient(to right,red,blue);
            background: linear-gradient(to right,red,blue);/*标准语法*/
        }
       .grad{
            height: 200px;
            background: -webkit-linear-gradient(left top,red,blue);
            background: -o-linear-gradient(to right bottom,red,blue);
            background: -moz-linear-gradient(to right bottom,red,blue);
            background: linear-gradient(to right bottom,red,blue);/*标准语法*/
        }
       .grad{
            height: 200px;
            background: -webkit-linear-gradient(-90deg,red,blue);
            background: -o-linear-gradient(-90deg,red,blue);
            background: -moz-linear-gradient(-90deg,red,blue);
            background: linear-gradient(-90deg,red,blue);/*标准语法*/
        }
       3.重复渐变
        .grad{
            height: 200px;
            background: -webkit-repeating-linear-gradient(red,yellow 10%,green 20%);
            background: -o-repeating-linear-gradient(red,yellow 10%,green 20%);
            background: -moz-repeating-linear-gradient(red,yellow 10%,green 20%);
            background: repeating-linear-gradient(red,yellow 10%,green 20%);/*标准语法*/
        }
    -->
    <div  class="grad"></div>
</body>
</html>

径向渐变（Radial Gradients）
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>径向渐变</title>
    <style>
        .grad{
            width: 400px;
            height: 300px;
            background: -webkit-radial-gradient(  closest-side ellipse at 30px 50px ,red,blue);
            background: -o-radial-gradient( closest-side ellipse at 30px 50px ,red,blue);
            background: -moz-radial-gradient( closest-side ellipse at 30px 50px ,red,blue);
            background:radial-gradient( closest-side ellipse at 30px 50px ,red,blue);/*标准语法*/
        }
    </style>
</head>
<body>
    <!--
    background: radial-gradient(center, shape， size, start-color, ..., last-color);
    需要设置的参数：
        1.颜色（可以设置多个）
        2.中心(at center center)
            语法(at x  y) 都是从左上角原点为参考
            x,y可以时像素(at 30px 50px )
            可以时百分比(at 10% 30%)
            也可以是top left  right center bottom(at left bottom)
        3.大小
            closest-side(最近边)
            farthest-side(最远边)
            closest-corner(最近角)
            farthest-corner（最远角，默认值）
        4.shape形状
            ellipse(椭圆，默认值)
            circle(圆)
    -->
<div  class="grad"></div>
</body>
</html>

CSS3 渐变（Gradients）
CSS3 定义了两种类型的渐变（gradients）：
1.线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向

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

2.径向渐变（Radial Gradients）- 由它们的中心定义

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

默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形）
它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形

转换Transform（2D转换）

CSS3中的转换允许我们对元素进行旋转、缩放、移动或倾斜。它为分2D转换或 3D 转换。
在css2时代，如果要做一些图片转换角度，都依赖于图片、Flash或JavaScript才能完成。但是现在借助CSS3就可以轻松倾斜、缩放、移动以及翻转元素。通过CSS变形，可以让元素生成静态视觉效果，但也可以很容易结合CSS3的transition和动画的keyframe产生一些动画效果。

二、转换Transform 2D的属性

通常的属性包含了属性名和属性值，而CSS3的transform属性是用函数来定义的。Transform 2D函数包括了translate()、scale()、rotate()和skew()。

书写格式:
transform:函数名(x轴值，y轴值);

转换的效果：
在这里插入图片描述

1.translate()函数
translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。接受CSS的标准度量单位（px）

translate(x,y)：转换，沿着X和Y轴移动元素。
2.rotate()
通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。它以deg为单位，代表了旋转的角度。
3.scale()
通过值把宽和高转换为原始尺寸的n倍，接受两个参数，前面的为宽，后面的为高。
可取值：
默认值为1
缩小：0-1之间的数
放大：大于1的数
4.skew()
根据水平轴和垂直轴翻转，接受两个或一个值，两个值时前面为水平，后面为垂直的角度，一个值只是水平轴的角度。此函数是指元素的倾斜角度。

三、转换Transform 3D的属性

Transform 3D常用函数有：
在这里插入图片描述

四、过度Transition

1.什么是过渡
使用css的属性值在一段时间内平滑的过渡
比如，鼠标悬停后，背景色在1s内，由白色平滑的过渡到红色
1）指定四个要素：
过渡属性，如background、color等
过渡所需时间
过渡函数，即过渡的速度、方式等
过渡延迟时间，表示开始执行的时间
2）触发过渡
通过用户的行为触发，如点击、悬浮等
1.过渡属性

transition-property: none|all|property;

多个属性用逗号隔开
可设置过渡的属性
颜色属性
取值为数值的属性
转换属性
渐变属性
阴影属性
2.过渡时间

transition-duration: s|ms;

默认值为0，意味着不会有效果，所以必须设置transition-duration属性
3.过渡函数

transition-timing-function: ;

取值：
ease：默认值，规定慢速开始，然后变快，然后慢速结束的过渡效果
linear：匀速
ease-in：规定以慢速开始，加速效果
ease-out：规定以慢速结束，减速效果
ease-in-out：规定以慢速开始和结束，先加速后减速效果
4.过渡延迟

transition-delay: s|ms;

改变元素属性值后多长时间开始执行过渡效果
5.简写属性transition
transition属性是一个简写属性，用于设置四个过渡属性
语法：transition:property duration timing-function delay;

  #box{
        width: 200px;
        height: 200px;
        background-color: #1fb57b;
        transition: background 4s linear 1s;
    }
    #box:hover{
        background-color: red;
   }

五、animation动画

过渡属性只能模拟动画效果
animation属性可以制作类似Flash动画
通过关键帧控制动画的每一步
使元素从一种样式逐渐变化为另一种样式
实现复杂的动画效果
1.@keyframes
作用：用于声明动画，指定关键帧
帧，用于分解动画动作
每个帧代表某个时间点
定义每个帧上的动作
@keyframes的语法

@keyframes name  {
    from|0%{
        css样式
    }
    percent{
        css样式
    }
    to|100%{
        css样式
    }
 }

在这里插入图片描述

2.animation属性

animation属性用于控制动画
调用由@keyframes定义的动画
设置动画属性，如时间、次数等
animation属性是一个简写属性
语法为：animation:name duration timing-function delay iteration-count direction;

3.动画子属性

animation-name: ;调用动画，规定需要和keyframes的名字一致
animation-duration: s|ms; 动画完成一个周期所需要的时间
animation-timing-function: ; 规定动画的速度变化类型
animation-delay:s|ms ; 播放之前的延迟时间

动画子属性

animation-iteration-count: 数值|infinite; 播放次数
infinite表示无限次播放
animation-direction: normal|alternate; 动画播放方向
normal为默认值，表示正常播放
alternate表示轮流播放，即动画会在奇数次正常播放，而在偶数次向后播放
animation-fill-mode: forwards; 动画停在最后一帧
默认值为none
animation-play-state:paused|running; 属性规定动画正在运行还是暂停
默认值为running

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .box{
            width: 100%;
            height: 400px;
            background-image: url("images/1.jpg");
            background-size: 100%;
            /*2.调用动画*/
            /*-webkit-animation:pictrue 10s ;*/
        }
        .box:hover{
            -webkit-animation:pictrue 10s ease-in 1s 3 alternate forwards;
        }
    /*1.定义动画*/
        @-webkit-keyframes  pictrue{
          0%{
            background-image: url("images/1.jpg");
         }
            25%{
                background-image: url("images/2.jpg");
            } 50%{
                background-image: url("images/3.jpg");
            } 75%{
                background-image: url("images/4.jpg");
            }
            100%{
                background-image: url("images/5.jpg");
            }
        }
    </style>
</head>
<body>
<div  class="box"></div>
</body>
</html>

六、绘制简单特殊图形（三角形、梯形、圆形）

（1）以CSS绘制三角形

1.首先需要有个元素作为三角的容器

<div></div>

2.制作三角型使用的是border属性，内容区宽高值为0

  div{
    width:0;
    height: 0;
    border-top:50px solid red;
    border-left:50px solid blue;
    border-right:50px solid orange;
    border-bottom:50px solid green;
}

（2）以CSS绘制梯形

绘制三角型时宽和高都是0像素，给它加100的宽度看看效果。这样是不是我们只取下面的红色的区域就构成了一个梯形？

这个红色区域实际上是底部的边border-bottom，所以梯形的高度是
底部边的宽度，梯形也是借助border属性完成的。

div {
       border-bottom: 80px solid red;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       height: 0;
       width: 100px;
   }

脑袋不灵光的小白羊

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS3_动画和绘制特殊图形

CSS3CSS3是CSS（层叠样式表）技术的升级版本。CSS3完全向后兼容，不必改变现有的设计，浏览器将永远支持CSS2。W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。圆角border-radius语法border-radius：value；四个角border-radius：value value；左上右下、右上左下border-radius：value value value value；代表设置对象左上角、右上角、右下角、左下角顺时针设置盒阴影box-
复制链接

扫一扫

专栏目录