CSS3_02

最新推荐文章于 2024-04-15 14:55:08 发布

「已注销」

最新推荐文章于 2024-04-15 14:55:08 发布

阅读量1k

点赞数

文章标签： css3 css html5

本文链接：https://blog.csdn.net/qq_44316317/article/details/120579520

版权

CSS3-02

一、渐变背景

CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡

1、线性渐变

线性渐变可以由向下/向上/向左/向右/对角方向定义

语法
```
background-image: linear-gradient(渐变方向, 颜色节点1, 颜色节点2, ...);
```
- 颜色节点
  - 必须至少定义两种颜色节点。
  - 每一种颜色都可以设置一个渐变标识位，前后两个标识位之间表示渐变范围
    - 比如：red 30%,green 60% 表示红绿两色的渐变范围在30%-60%之间
    - 比如：red 50%,green 50% 如果两个值设置成一样，则表示不发生渐变
  - 渐变中间阈值
    - 在两个颜色之间还可以设置渐变中间阈值，表示从哪个位置开始渐变
  - 为了添加透明度，我们也可以使用 rgba() 来定义颜色
- 渐变方向
  - 默认方向为从上向下(to bottom)
  - 预定义方向（to bottom、to top、to right、to left、to bottom right，等等）
  - 还可以直接设置渐变角度（单位deg）。0deg从下向上，顺时针转动

    div {
        float: left;
        width: 300px;
        height: 200px;
        margin: 20px;
        font: bold 20px/200px 微软雅黑;
        color: yellow;
        text-align: center;
    }
    
    div.test1 {
        background: linear-gradient(red, green, blue);
    }
    
    div.test2 {
        background: linear-gradient(to right, red, green, blue);
    }
    
    div.test3 {
        background: linear-gradient(45deg, red, green, blue);
    }
    
    div.test4 {
        /*30%-70%为红绿两色渐变范围*/
        background: linear-gradient(to right, red 30%, green 70%);
    }
    
    div.test5 {
        /*开始和结束值一样表示不渐变*/
        background: linear-gradient(to right, red 50%, green 50%);
    }
    
    div.test6 {
        /*20%-50%为红绿两色渐变范围,50%-80%为绿蓝两色渐变范围*/
        background: linear-gradient(to right, red 20%, green 50%, blue 80%);
    }
    
    div.test7 {
        /*20%-30%为红绿两色渐变范围,70%-80%为绿蓝两色渐变范围*/
        background: linear-gradient(to right, red 20%, green 30% 70%, blue 80%);
    }
    
    div.test8 {
        /*开始和结束值一样表示不渐变*/
        background: linear-gradient(to right, red 33.3%, green 33.3% 66.6%, blue 66.6%);
    }

在这里插入图片描述

背景图片的渐变效果

background: linear-gradient(45deg,rgba(255,255,255,1),rgba(255,255,255,0)),url(bg.jpg);

在这里插入图片描述

2、径向渐变

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

语法

/*方式一*/
background-image: -webkit-radial-gradient(中心点,形状 尺寸,颜色节点1, ..., 颜色节点n);
/*方式二*/
background-image: radial-gradient(形状 尺寸 at 中心点,颜色节点1, ..., 颜色节点n);

颜色节点
- 必须至少定义两种颜色节点。
- 每一种颜色都可以设置一个渐变标识位
默认情况下，渐变的中心是 center（表示在中心点），渐变的形状是 ellipse（表示椭圆形），渐变的尺寸是 farthest-corner（表示到最远的角落）。
中心点：定义了渐变的起始点
- at center center(默认)
- at bottom right
- at 30% 70% (x轴的30%，y轴的70%)
- at -30px 50%;
形状：定义了渐变的形状
- 可以是circle （圆形）或 ellipse（椭圆形）。默认值是 ellipse。
- 如果元素的宽高一样，那参数shape无论设置为circle还是ellipse，显示效果都是圆形

尺寸：定义了渐变的范围大小。

closest-side 最近边，渐变的终点是最近的一条边
farthest-side 最远边，渐变的终点是最远的一条边
closest-corner 最近角，渐变的终点是最近的一个角
farthest-corner 最远角，渐变的终点是最远的一个角（默认)
也可以直接指定宽高直接定义尺寸形状比如：200px 200px表示一个半径200的圆形

div {
     float: left;
     width: 300px;
     height: 200px;
     margin: 20px;
     font: bold 20px/200px 微软雅黑;
     color: yellow;
     text-align: center;
}

div.test1 {
    background: radial-gradient(red, green, blue);
}

div.test2 {
    background: radial-gradient(at right bottom, red, green, blue);
}

div.test3 {
    background: radial-gradient(at 150px 150px, red, green, blue);
}

div.test4 {
    background: radial-gradient( circle closest-corner, red, green, blue, black);
}

div.test5 {
    background: radial-gradient( 100px 100px, red, green, blue, black);
}

div.test6 {
    background: radial-gradient(50px 50px at 100px 100px, red, green, blue);
}

div.test7 {
    background: radial-gradient(circle, red, yellow 20%, black 60%);
}

div.test8 {
    background: radial-gradient(circle, red 10%, green 10% 25%, blue 25% 50%, pink 50%);
}

在这里插入图片描述

3、重复的线性渐变

语法

div.test1 {
    background: repeating-linear-gradient(to right, red, green 30px, blue 60px);
}

div.test2 {
    background: repeating-linear-gradient(45deg, red, red 20px, green 20px, green 40px);
}

div.test3 {
    background: repeating-linear-gradient(90deg, black, black 15px, white 15px, white 20px);
}

在这里插入图片描述

4、重复的径向渐变

语法

div.test1 {
    background: repeating-radial-gradient(circle, red, green 30px, blue 60px);
}

div.test2 {
   /*background: repeating-radial-gradient(circle, red,red 20px, green 20px, green 40px);*/
   background: repeating-radial-gradient(circle, red 0 20px, green 20px 40px);
}

div.test3 {
     /*background: repeating-radial-gradient(circle, black, black 15px, white 15px, white 20px);*/
    background: repeating-radial-gradient(circle, black 0 15px, white 15px 20px);

}

![在这里插入图片描述](https://img-blog.csdnimg.cn/3590a95389fd47a28544316ce0f56a82.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA6Ieq6Iul,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


#### 二、滤镜

filter 属性定义了元素(通常是img)的可视效果(例如：模糊与饱和度)，IE不支持此属性。

| 属性   | chrome        | IE     | firefox | safari       | opera         |
| :----- | ------------- | ------ | ------- | ------------ | ------------- |
| filter | 18.0 -webkit- | 不支持 | 35.0    | 6.0 -webkit- | 15.0 -webkit- |

##### 1、模糊滤镜 blur

给图像设置高斯模糊。值越大越模糊，默认是0，就是不模糊；

```css
filter:blur(3px);

在这里插入图片描述

不过，blur模糊的缺点是边缘也会模糊不清。不过，在实际的应用中，会给图像添加一个box，超出范围隐藏

overflow：hidden；

2、亮度brightness

使图片更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。值超过100%，图像会比原来更亮。如果没有设定值，默认是1。可以使用百分比也可以使用小数表示。

这里写brightness(2) 跟写 brightness(200%) 效果是一样的。

filter:brightness(.5);
filter:brightness(1.5);

在这里插入图片描述

3、对比度contrast

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值超过100%，意味着会运用更低的对比。若没有设置值，默认是1。可以使用百分比也可以使用小数表示。

filter:contrast(.5);
filter:contrast(1.5);

在这里插入图片描述

4、饱和度saturate(%)

饱和度指色彩的鲜艳程度,也称色彩的纯度。值为0%则是完全不饱和，值为100%则图像无变化。大于100%，则饱和度增高，色彩就会变重。

filter:saturate(.5);
filter:saturate(2);

在这里插入图片描述

5、反转图像invert(%)

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。若值未设置，值默认是0。

 filter:invert(100%);

在这里插入图片描述

三、计算函数calc

语法
```
width: calc(100% - 600px);
```
- calc()使用通用的数学运算规则，但是也提供更智能的功能：
  1. 使用“+”、“-”、“*” 和 “/”四则运算；
  2. 可以使用百分比、px、em、rem等单位；
  3. 可以混合使用各种单位进行计算；
  4. 表达式中有“+”和“-”时，其前后必须要有空格，如"widht: calc(12%+5em)"这种没有空格的写法是错误的；
  5. 表达式中有“*”和“/”时，其前后可以没有空格，但建议留有空格。
- 思考：通过计算函数实现圣杯布局/双飞翼布局效果

四、过渡

过渡（transition）是CSS3中最具有颠覆性的特性之一，让我们可以在不使用JS的情况下呈现动画效果。

过渡动画：从一个状态渐渐过渡到另外一个状态

语法：

transition:过渡属性 花费时间  [运动曲线]  [延迟时间];

过滤属性：
- 宽度、高度、背景颜色、内外边距都可以
- 全部属性：all
花费时间
- 单位是s(秒) 0.5s

运动曲线(贝赛尔曲线)

默认为ease，还可以设置为linear、ease（默认）、ease-in、ease-out、ease-in-out

值	描述
linear	匀速 cubic-bezier(0,0,1,1) 。
ease	规定慢速开始，然后变快，然后慢速结束 cubic-bezier(0.25,0.1,0.25,1)
ease-in	开始的时候慢，之后快 cubic-bezier(0.42,0,1,1)
ease-out	开始时快，结束时候慢 cubic-bezier(0,0,0.58,1)
ease-in-out	中间快，开始结束慢 cubic-bezier(0.42,0,0.58,1)
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值

延迟时间
- 指延迟触发的时间默认为0
- 单位是s(秒)

过渡添加给谁？
- 谁来变化给谁加
- 通常和:hover搭配使用

代码演示

div {
    box-sizing: border-box;
    width: 100px;
    height: 100px;
    background-color: #f00;
    transition: all .8s;
}

div:hover {
    width: 800px;
    background-color: blue;
}

作业：京东弹出子菜单

五、2D转换

2D转换是改变标签元素在二维平面上的位置和形状，主要包括：

位移 - translate
旋转 - rotate
缩放 - scale
倾斜 -skew

1、位移 - translate

语法：

/*水平方向移动*/
transform: translateX(n)

/垂直方向移动/
transfrom: translateY(n)
/水平垂直方向同时移动/
transform: translate(x, y)


- 2D的移动主要是指 水平、垂直方向上的移动
- translate最大的优点就是不影响其他元素的位置
- translate中的%单位，是相对于本身的宽度和高度来进行计算的
- translate对行内标签没有效果

- 案例：让盒子水平垂直居中

```css
div	{
    position: absolute;
    top: 50%;
    left: 50%;
    tansform: translate(-50%,-50%);
}

2、旋转 - rotate

语法：
```
transform: rotate(旋转度数);
```
- 旋转度数，单位是deg
- 旋转角度为正时，顺时针，角度为负时，逆时针
- 还可以将旋转度数设置为旋转的圈数，单位为turn。比如1turn就是一圈，.5turn就是半圈。
- 默认旋转的中心点是元素的中心点
设置旋转中心点
```
transform-origin: x y;
```
- 注意后面的参数 x 和 y 用空格隔开
- 默认旋转中心点是元素的中心 (50% 50%)，等价于center center
- 可以给 x y 设置像素或者方位名词(top、bottom、left、right、center)

案例：三角形制作

span {
     display: inline-block;
     width: 15px;
     height: 15px;
     margin-right: 20px;
     border-right: 1px solid red;
     border-bottom: 1px solid red;
}

span:nth-of-type(1) {
    transform: rotate(45deg);
}

span:nth-of-type(2) {
    transform: rotate(-135deg);
}

span:nth-of-type(3) {
    transform: rotate(-45deg);
}

span:nth-of-type(4) {
    transform: rotate(135deg);
}

在这里插入图片描述

span {
    display: inline-block;
    border: 10px solid transparent;
}

span:nth-of-type(1) {
    border-top-color: gray;
    border-bottom: 0;
}

span:nth-of-type(2) {
    border-bottom-color: green;
    border-top: 0;
}

span:nth-of-type(3) {
    border-left-color: blue;
    border-right: 0;
}

span:nth-of-type(4) {
    border-right-color: red;
    border-left: 0;
}

span:nth-of-type(5) {
    display: inline-block;
    border-style: solid;
    border-width: 10px;
    border-top-color: gray;
    border-right-color: red;
    border-bottom-color: green;
    border-left-color: blue;
}

在这里插入图片描述

3、缩放 - scale

语法：
```
transform: scale(w, h); 
```
- 注意，w 与 h 之间使用逗号进行分隔
- transform: scale(1, 1);宽高都放大一倍，相当于没有放大
- transform: scale(2, 2); 宽和高都放大了二倍
- transform: scale(2); 如果只写了一个参数，第二个参数就和第一个参数一致
- transform:scale(0.5, 0.5); 缩小
- transform:scaleX(0.5); 宽度缩放
- transform:scaleY(0.5); 高度缩放
- scale最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
- transform:scale(-1) ; 将scale设置为负值，可实现翻转效果

案例：图片放大效果

div {
    float: left;
    margin: 8px;
    overflow: hidden;
}

div img {
    width: 180px;
    height: 180px;
    transition: all 1s;
}

div img:hover {
    transform: scale(1.2, 1.2);
}

在这里插入图片描述

4、倾斜 - skew

语法：
```
transform: skew(x,y)
```
- 注意，x 与 y 之间使用逗号进行分隔
- transform: skew(20deg, 30deg): 沿着 X 和 Y 轴的 2D 倾斜
- transform: skewX(20deg):沿着 X 轴的 2D 倾斜
- transform:skewY(30deg): 沿着 Y 轴的 2D 倾斜

5、综合写法

同时使用多个转换效果时，可以采用综合写法

语法：
```
transform: translate() rotate() scale() skew();
```
- 顺序会影响到转换的效果，比如先旋转会改变坐标轴方向
- 同时有位移或者其他属性的时候，建议将位移放到最前面

六、抽奖大转盘

在这里插入图片描述

代码展示

<!-- html部分 -->

<div class="box">
    <div class="turntable">
        <ul class="line">
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ol class="awards">
            <li>键盘</li>
            <li>小米电视</li>
            <li>充气娃娃</li>
            <li>笔记本电脑</li>
            <li>洗衣机</li>
            <li>谢谢参与</li>
        </ol>

    </div>
    <div class="circle">抽奖
        <span class="arrow"></span>
    </div>
</div>

/* css部分 */
* {
    margin: 0;
    padding: 0;
    border-radius: 50%;
}

ul,
ol {
    list-style: none;
}

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.turntable {
    position: relative;
    box-sizing: border-box;
    width: 400px;
    height: 400px;
    border: 20px solid orangered;
    background: #ffcb3f;
    box-shadow: 0px 0px 5px 5px rgba(0, 0, 0, 0.4);
    transition: all 10s cubic-bezier(0.42, 0, 0, 1.01);
}

.line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 360px;
    height: 360px;
    border-radius: 50%;
}

.line li {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 2px solid rgb(248, 75, 75);
}

.circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    color: white;
    font: bold 26px/120px 微软雅黑;
    text-align: center;
    line-height: 120px;
    background-color: orangered;
    box-shadow: 0px 0px 10px 10px rgb(179, 49, 1) inset;
    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

.circle .arrow {
    position: absolute;
    top: -40px;
    left: 26px;
    border: 34px solid transparent;
    border-bottom-width: 60px;
    border-bottom-color: rgb(195, 56, 5);
    border-top: 0;
}

.awards {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

.awards li {
    z-index: 2;
    position: absolute;
    top: 20px;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: orangered;
    text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
    transform-origin: 50% 160px;
}

/*JS部分*/

// 转盘区域分割线
document.querySelectorAll(".line>li").forEach(function(item, index) {
    item.style.transform = "rotate(" + index * 60 + "deg)"
})

// 奖品区域划分
document.querySelectorAll(".awards>li").forEach(function(item, index) {
    item.style.transform = "rotate(" + index / 6 + "turn)"
})

// 开始抽奖
var num = 0;
document.querySelector(".circle").onclick = function() {
    num += (parseInt(Math.random() * 101) + 100) * 60;
    document.querySelector(".turntable").style.transform = "rotate(" + num + "deg)"

}

0%;
text-align: center;
font-size: 20px;
color: orangered;
text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.4);
transform-origin: 50% 160px;
}


```javascript
/*JS部分*/

// 转盘区域分割线
document.querySelectorAll(".line>li").forEach(function(item, index) {
    item.style.transform = "rotate(" + index * 60 + "deg)"
})

// 奖品区域划分
document.querySelectorAll(".awards>li").forEach(function(item, index) {
    item.style.transform = "rotate(" + index / 6 + "turn)"
})

// 开始抽奖
var num = 0;
document.querySelector(".circle").onclick = function() {
    num += (parseInt(Math.random() * 101) + 100) * 60;
    document.querySelector(".turntable").style.transform = "rotate(" + num + "deg)"

}

「已注销」

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS3_02

CSS3-02一、渐变背景CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡1、线性渐变线性渐变可以由向下/向上/向左/向右/对角方向定义语法background-image: linear-gradient(渐变方向, 颜色节点1, 颜色节点2, ...);颜色节点必须至少定义两种颜色节点。每一种颜色都可以设置一个渐变标识位，前后两个标识位之间表示渐变范围比如：red 30%,green 60% 表示红绿两色的渐变范围在30%-60%
复制链接

扫一扫