【前端】CSS学习笔记(2)

目录

  • CSS3新特性
    • 圆角
    • 阴影
    • 动画
      • @keyframes 创建动画
      • animation 执行动画
      • timing-function 时间函数
      • direction 播放方向
      • 过渡动画(transition)
    • 媒体查询
      • 设置meta标签
      • 媒体查询语法
  • 雪碧图
  • 字体图标

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;
}

在这里插入图片描述

阴影

  1. 盒子阴影
    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,左右平均分配。
在这里插入图片描述

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

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

渐变

一、线性渐变

  • 函数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可选,动画的时间函数,控制动画速度曲线,如 easelinearease-inease-outease-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;
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/68671.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于.Net Core+Vue的文件加密系统

1系统架构图 2 用例图 管理员角色的用例&#xff1a; 文件分享大厅&#xff1a;管理员可以访问文件分享大厅&#xff0c;下载文件。个人信息管理&#xff1a;管理员可以更新自己的个人信息&#xff0c;修改密码。用户管理&#xff1a;管理员负责创建、更新或删除用户账户&…

Python从0到100(八十四):神经网络-卷积神经网络训练CIFAR-10数据集

前言&#xff1a; 零基础学Python&#xff1a;Python从0到100最新最全教程。 想做这件事情很久了&#xff0c;这次我更新了自己所写过的所有博客&#xff0c;汇集成了Python从0到100&#xff0c;共一百节课&#xff0c;帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

YOLOv9改进,YOLOv9检测头融合RFAConv卷积,适合目标检测、分割任务

摘要 空间注意力已广泛应用于提升卷积神经网络(CNN)的性能,但它存在一定的局限性。作者提出了一个新的视角,认为空间注意力机制本质上解决了卷积核参数共享的问题。然而,空间注意力生成的注意力图信息对于大尺寸卷积核来说是不足够的。因此,提出了一种新型的注意力机制—…

大模型LLM-微调 RAG

RAG小结 这篇文章是一篇关于大型语言模型&#xff08;LLMs&#xff09;增强技术的综述论文&#xff0c;特别聚焦于检索增强生成&#xff08;Retrieval-Augmented Generation, RAG&#xff09;这一领域。详细考察了RAG的发展、技术基础、关键技术、评估框架以及未来的研究方向。…

【专题】为2025制定可付诸实践的IT战略规划报告汇总PDF洞察(附原数据表)

原文链接&#xff1a;https://tecdat.cn/?p39055 在当今瞬息万变的商业环境中&#xff0c;制定有效的 IT 战略规划对于企业的成功与可持续发展至关重要。本报告深入探讨了制定 IT 战略规划的关键活动&#xff0c;旨在为企业和决策者提供全面且实用的指导。 Gartner的《为202…

CBAM-2018学习笔记

名称&#xff1a; Convolutional Block Attention Module (CBAM) 来源&#xff1a; CBAM: Convolutional Block Attention Module 相关工作&#xff1a; #ResNet #GoogleNet #ResNeXt #Network-engineering #Attention-mechanism 创新点&#xff1a; 贡献&#xff1a; 提…

Invicti-Professional-V25.1

01 更新介绍 此更新包括对内部代理的更改。内部扫描代理的当前版本为 25.1.0。内部身份验证验证程序代理的当前版本为 25.1.0。#新功能现在&#xff0c;单击扫描摘要屏幕中的预设扫描图标会将您重定向到具有过滤视图的 “最近扫描” 页面&#xff0c;从而改进导航和对相关扫描…

React 中hooks之useDeferredValue用法总结

目录 概述基本用法与防抖节流的区别使用场景区分过时内容最佳实践 概述 什么是 useDeferredValue? useDeferredValue 是 React 18 引入的新 Hook&#xff0c;用于延迟更新某个不那么重要的部分。它接收一个值并返回该值的新副本&#xff0c;新副本会延迟更新。这种延迟是有…

iOS 性能优化:实战案例分享

摘要&#xff1a; 本文将深入探讨 iOS 性能优化的重要性&#xff0c;并通过一系列实际开发案例&#xff0c;展示如何解决常见的性能问题&#xff0c;包括内存管理、CPU 性能、网络性能、UI 性能和启动性能等方面的优化&#xff0c;帮助 iOS 开发者打造更流畅、高效的应用程序。…

TMC2208替代A4988

前言 TMC2208 是一款先进的 1 轴步进驱动器&#xff0c;支持 stealthChop ™和 256 微步。本应用说明介绍了如何设置 TMC2208 以替代 A4988&#xff08;传统模式&#xff09;。 引脚比较 与其他电机驱动器相比&#xff0c;TMC2208 具有附加功能&#xff1a;256 微步。 自动…

二十三种设计模式-代理模式

一、定义与核心思想 代理模式是一种结构型设计模式&#xff0c;其核心思想是提供一个代理对象&#xff0c;用以控制对实际对象的访问。通过代理对象&#xff0c;可以在不改变实际对象的情况下&#xff0c;添加各种功能&#xff0c;如权限控制、懒加载、缓存、远程调用等。 二…

SQL刷题快速入门(三)

其他章节&#xff1a; SQL刷题快速入门&#xff08;一&#xff09; SQL刷题快速入门&#xff08;二&#xff09; 承接前两个章节&#xff0c;本系列第三章节主要讲SQL中where和having的作用和区别、 GROUP BY和ORDER BY作用和区别、表与表之间的连接操作&#xff08;重点&…

ComfyUI 矩阵测试指南:用三种方法,速优项目效果

在ComfyUI中&#xff0c;矩阵测试也叫xyz图表测试&#xff0c;作用是通过控制变量的方式来对Lora模型以及各种参数开展测试&#xff0c;并进行有效区分。其中测试方法有很多种&#xff0c;可以通过借助插件也可以自行搭建工作流实现&#xff0c;下面介绍3种方式&#xff1a; 1…

在stm32中C语言编写的程序中,一个整形数据是怎么存储的,高位在前还是低位在前

目录 举个例子 如何验证 小结 在 STM32&#xff08;基于 ARM Cortex-M 架构&#xff09;的系统中&#xff0c;默认是小端&#xff08;Little Endian&#xff09; 存储方式。也就是说&#xff0c;对于一个整型&#xff08;例如 32 位 int&#xff09;&#xff0c;它的最低有效…

图数据库 | 19、高可用分布式设计(下)

相信大家对分布式系统设计与实现的复杂性已经有了一定的了解&#xff0c;本篇文章对分布式图数据库系统中最复杂的一类系统架构设计进行探索&#xff0c;即水平分布式图数据库系统&#xff08;这个挑战也可以泛化为水平分布式图数据仓库、图湖泊、图中台或任何其他依赖图存储、…

基于Python的多元医疗知识图谱构建与应用研究(上)

一、引言 1.1 研究背景与意义 在当今数智化时代,医疗数据呈爆发式增长,如何高效管理和利用这些数据,成为提升医疗服务质量的关键。传统医疗数据管理方式存在数据孤岛、信息整合困难等问题,难以满足现代医疗对精准诊断和个性化治疗的需求。知识图谱作为一种知识表示和管理…

Visual Studio Code + Stm32 (IAR)

记录一下&#xff0c; 以前看别人在 vsc 下配置 stm32 工程非常麻烦。 最近&#xff0c;突然发现&#xff0c; iar 官方出了两个插件&#xff0c; iar build 、 iar C-Spy 安装之后&#xff0c;配置一下 iar 软件路径。 然后&#xff0c;直接打开工程目录&#xff0c;编译…

oracle之行转列

对于Oracle的行转列功能一直云里雾里&#xff0c;马马虎虎&#xff0c;对行转列的使用场景和使用方法都不够深刻&#xff0c;最近有空理解一下。 Oracle 11g后有专门的函数pivot&#xff0c;对于特定的场景可以直接套用。 需求&#xff1a;求各份job不同员工工资是多少&#xf…

【Linux】Linux入门(4)其他常用指令

目录 软件安装yum命令 systemctl命令软链接IP地址和主机名特殊IP地址主机名域名解析 网络请求和下载ping命令wget命令curl命令 端口nmap指令 进程管理ps命令 查看进程kill 关闭进程 主机状态top命令 查看系统资源占用 软件安装 操作系统安装软件有许多种方式&#xff0c;一般分…

B站评论系统的多级存储架构

以下文章来源于哔哩哔哩技术 &#xff0c;作者业务 哔哩哔哩技术. 提供B站相关技术的介绍和讲解 1. 背景 评论是 B站生态的重要组成部分&#xff0c;涵盖了 UP 主与用户的互动、平台内容的推荐与优化、社区文化建设以及用户情感满足。B站的评论区不仅是用户互动的核心场所&…