当前位置：首页 > news >正文

【前端】CSS学习笔记（2）

news 2025/6/12 23:28:14

CSS3新特性

圆角

使用CSS3border-radius属性，你可以给任何元素制作“圆角”。
border-radius属性可以使用以下规则：

四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。
三个值：第一个值为左上角，第二个值同时应用于右上角和左下角，第三个值为右下角。
两个值：第一个值应用于左上角和右下角，第二个值应用于右上角和左下角。
一个值：这个值会应用到元素的四个角，使四个角的半径都相同。

div{width: 200px;height: 200px;background-color: rgb(252, 117, 6);border-radius: 56px;
}

在这里插入图片描述

div{width: 200px;height: 100px;background-color: rgb(252, 117, 6);border-radius: 100px 100px 0 0;
}

在这里插入图片描述

阴影

盒子阴影
box-shadow属性用于为元素添加盒子阴影
语法为box-shadow: h-shadow v-shadow blur spread color inset;。

属性	描述
`h-shadow`	必需，水平阴影的位置，可以是正值（阴影在元素右边）或负值（阴影在元素左边）
`v-shadow`	必需，垂直阴影的位置，可以是正值（阴影在元素下边）或负值（阴影在元素上边）
`blur`	可选，模糊距离，值越大阴影越模糊
`spread`	可选，阴影的扩展半径，正值会使阴影扩大，负值会使阴影缩小
`color`	可选，阴影的颜色
`inset`	可选，将外部阴影（默认）改为内部阴影

div{margin: 0 auto;width: 200px;height: 100px;background-color: rgb(252, 117, 6);border-radius: 56px;box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

这里的margin: 0 auto;意思是外边距上下平均为0，左右平均分配。
在这里插入图片描述

文本阴影：text-shadow属性用于为文本添加阴影。语法为text-shadow: h-shadow v-shadow blur color; 。参数含义与box-shadow类似，但没有spread和inset选项。

以下是将上述内容整理为表格和清晰段落的形式：

渐变

一、线性渐变

函数：linear-gradient()
语法：background: linear-gradient(direction, color-stop1, color-stop2,...);
参数说明：

参数	描述
`direction`	指定渐变的方向，默认值是 `to bottom`（从上往下），还可以是 `to top`（从下往上）、`to right`（从左往右）、`to bottom right`（从左上角到右下角）等
`color-stop1, color-stop2,...`	指定渐变的起止颜色及位置

div {width: 200px;height: 200px;background: linear-gradient(to bottom right, #7cfbea 0%, #7cdfd2 30%, #8767f0 50%, #ef89c6 70%, #fdb2df 100%);
}

在这里插入图片描述

二、径向渐变

函数：radial-gradient()
语法：background: radial-gradient(shape size at position, start-color,..., last-color);
参数说明：

参数	描述	示例
`shape`	指定渐变的形状，`circle` 表示圆形，`ellipse` 表示椭圆形（默认值）	`circle`
`size`	指定渐变的大小，如 `closest-side`（到最近边结束）、`farthest-corner`（到最远角结束）等	`closest-side`
`at position`	指定渐变的中心位置	例如 `at 50% 50%` 表示中心在元素的中心位置
`start-color,..., last-color`	指定渐变的起止颜色及位置	`background: radial-gradient(circle, yellow, green);` 会创建一个以黄色为中心向四周渐变到绿色的圆形背景

div {width: 200px;height: 200px;background: radial-gradient(circle at 50% 0%, #feea33, #ff1616);
}

在这里插入图片描述

动画

动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。

@keyframes 创建动画

基本语法：

@keyframes animationName {from {/* 初始样式 */}to {/* 最终样式 */}
}

或者使用百分比的形式：

@keyframes animationName {0% {/* 初始样式 */}50% {/* 中间样式 */}100% {/* 最终样式 */}
}

animation 执行动画

语法：animation: name duration timing-function delay iteration-count direction fill-mode;
参数说明：

参数	描述
`name`	必需，指定 `@keyframes` 中定义的动画名称
`duration`	必需，动画持续时间，可使用秒（s）或毫秒（ms）作为单位
`timing-function`	可选，动画的时间函数，控制动画速度曲线，如 `ease`、`linear`、`ease-in`、`ease-out`、`ease-in-out` 等
`delay`	可选，动画延迟开始的时间，可使用秒（s）或毫秒（ms）作为单位
`iteration-count`	可选，动画循环次数，可以是具体数字或 `infinite`（无限次）
`direction`	可选，动画播放方向，如 `normal`（正常方向）、`reverse`（反向）、`alternate`（交替）、`alternate-reverse`（反向交替）
`fill-mode`	可选，动画结束后的状态，如 `forwards`（停留在最后一帧）、`backwards`（停留在第一帧）、`both`（根据 `animation-direction` 决定）
`animation-play-state`	控制动画的播放状态：`running` 代表播放，`paused` 代表停止播放

timing-function 时间函数

值	描述
`ease`	动画开始和结束时速度较慢，中间速度较快，是默认值
`linear`	动画匀速播放
`ease-in`	动画开始时速度较慢，然后逐渐加速
`ease-out`	动画开始时速度较快，然后逐渐减速
`ease-in-out`	动画开始和结束时速度较慢，中间速度较快

direction 播放方向

值	描述
`normal`	动画按照正常方向播放，即从 0% 到 100%
`reverse`	动画按照反向播放，即从 100% 到 0%
`alternate`	动画在奇数次数正常播放（从 0% 到 100%），偶数次数反向播放（从 100% 到 0%）
`alternate-reverse`	动画在奇数次数反向播放（从 100% 到 0%），偶数次数正常播放（从 0% 到 100%）

div{width: 200px;height: 200px;animation:myAnimation 2s linear 0s infinite alternate;
}@keyframes myAnimation {0%{background-color: blue;}50%{background-color: purple;}100%{background-color: aqua;}
}

在这里插入图片描述

过渡动画（transition）

基本语法：
.element { transition: property duration timing-function delay; }

其中property表示要发生变化的属性

div{margin-top:100px;width: 50px;height: 50px;background-color: #9f5aa9;transition: width 1s ease 0s , background 1s ease 1s; 
}
div:hover {width: 300px;
}

在这里插入图片描述

媒体查询

媒体查询能使页面在不同在终端设备下达到不同的效果
媒体查询会根据设备的大小自动识别加载不同的样式

设置meta标签

在<head>中添加<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">，主要用于移动端页面布局。

width=device-width：将页面宽度设为设备宽度
initial-scale：页面初始缩放比例(默认设置为1.0)
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
user-scalable：用户是否可以手动缩放（默认设置为no）

媒体查询语法


.box {width: 300px;height: 300px;
}
@media screen and (max-width: 768px) {.box {background-color: aqua;}
}
@media screen and (min-width: 768px) and (max-width: 996px) {.box {background-color: green;}
}
@media screen and (min-width: 996px) {.box {background-color: red;}
}

上面的代码目的是，在手机上显示出蓝色，在平板上显示出绿色，在电脑上显示出红色
在这里插入图片描述

雪碧图

雪碧图（Sprite Sheet），又称 CSS 精灵或图像精灵，是一种网页优化技术。
原理：
把多个小图像合并成一个大的图像文件。通过background-image引入背景图片然后利用 background-position 属性把图片移动到自己需要的位置

使用场景：
适用于页面中频繁出现多个小图标或图片元素的情况，可减少 HTTP 请求，提升页面加载速度。
对小型装饰元素，如按钮的不同状态，将其合并为雪碧图可方便实现状态切换。

实例

.icon1{display: block;width: 45px;height:45px;background: url(./1.png) no-repeat center center;border:1px solid black;background-position: -13px -13px;
}
.icon2{display: block;width: 45px;height:45px;background: url(./1.png) no-repeat center center;border:1px solid black;background-position: -84px -84px;
}

<span class="icon1"></span>
<span class="icon2"></span>

在这里插入图片描述
1.png为如上雪碧图

通过调整位置和大小，显示出了两个表情

字体图标

我们会经常用到一些图标。但是我们在使用这些图标时，往往会遇到失真的情况，而且图片数量很多的话，页面加载就越慢。所以，我们可以使用字体图标的方式来显示图标，既解决了失真的问题，也解决了图片占用资源的问题
常用字体图标库：阿里巴巴矢量图标库
使用字体图标

添加购物车
下载代码
选择font-class引用

在这里插入图片描述

打开所给的demo

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./font/iconfont.css">
</head>
<body><span class="iconfont icon-gun"></span>
</body>
</html>

在这里插入图片描述

.icon-gun{font-size: 100px;color: red;
}

可以改变他的大小颜色等
在这里插入图片描述

目录

CSS3新特性

圆角

阴影

动画

@keyframes 创建动画

animation 执行动画

timing-function 时间函数

direction 播放方向

过渡动画（transition）

媒体查询

设置meta标签

媒体查询语法

雪碧图

字体图标

相关文章：