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

CSS- 4.6 radiu、shadow、animation动画

news 来源：原创 2025/7/27 1:22:44

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。

HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！

点赞关注不迷路！您的点赞、关注和收藏是对小编最大的支持和鼓励！

系列文章目录

CSS- 1.1 css选择器

CSS- 2.1 实战之图文混排、表格、表单、学校官网一级导航栏

CSS- 3.1 盒子模型-块级元素、行内元素、行内块级元素和display属性

CSS- 4.1 浮动（Float）

CSS- 4.2 相对定位（position: relative）

CSS- 4.3 绝对定位（position: absolute）&学校官网导航栏实例

CSS- 4.4 固定定位（fixed）& 咖啡售卖官网实例

CSS- 4.5 css + div 布局 & 简易网易云音乐官网布置实例

CSS- 4.6 radiu、shadow、animation动画

系列文章目录

前言

一、CSS 高级特性：圆角、阴影与动画

1.圆角 (border-radius)

基本语法

特殊值

示例

2.阴影 (box-shadow & text-shadow)

盒子阴影 (box-shadow)

文本阴影 (text-shadow)

示例

3.动画 (animation)

关键概念

基本语法

简写属性

常用动画属性值

示例

结合使用示例

二、代码实例

1. radiu+shadow代码实例如下：

2. animation动画代码如下：

总结

前言

小编作为新晋码农一枚，会定期整理一些写的比较好的代码，作为自己的学习笔记，会试着做一下批注和补充，如转载或者参考他人文献会标明出处，非商用，如有侵权会删改！欢迎大家斧正和讨论！

一、CSS 高级特性：圆角、阴影与动画

1.圆角 (border-radius)

border-radius 属性用于为元素添加圆角效果，可以创建从轻微圆角到完全圆形的各种效果。

基本语法

css

.element {border-radius: 10px; /* 四个角相同 */border-radius: 10px 20px; /* 左上右下/右上左下 */border-radius: 10px 20px 30px 40px; /* 左上 右上 右下 左下 */
}

特殊值

50%：创建圆形（当元素是正方形时）
100%：创建椭圆形

示例

css

.button {border-radius: 25px; /* 轻微圆角按钮 */
}.circle {width: 100px;height: 100px;border-radius: 50%; /* 圆形 */
}

2.阴影 (box-shadow & text-shadow)

盒子阴影 (box-shadow)

为元素添加阴影效果，增强立体感。

css

.element {box-shadow: h-offset v-offset blur spread color inset;
}

h-offset：水平偏移（必需）
v-offset：垂直偏移（必需）
blur：模糊半径（可选）
spread：阴影扩展（可选）
color：阴影颜色（可选）
inset：内部阴影（可选）

文本阴影 (text-shadow)

为文本添加阴影效果。

css

.text {text-shadow: h-offset v-offset blur color;
}

示例

css

.card {box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 轻微浮动效果 */
}.highlight {text-shadow: 2px 2px 4px #000000; /* 文字突出效果 */
}.inset-shadow {box-shadow: inset 0 0 10px rgba(0,0,0,0.2); /* 内部凹陷效果 */
}

3.动画 (animation)

CSS 动画允许在不使用 JavaScript 的情况下创建复杂的动画效果。

关键概念

@keyframes：定义动画序列
animation-name：指定 @keyframes 名称
animation-duration：动画持续时间
animation-timing-function：速度曲线
animation-delay：动画开始前的延迟
animation-iteration-count：播放次数
animation-direction：播放方向
animation-fill-mode：动画前后样式
animation-play-state：播放状态

基本语法

css

@keyframes slidein {from {transform: translateX(0%);}to {transform: translateX(100%);}
}.element {animation-name: slidein;animation-duration: 3s;animation-timing-function: ease-in-out;animation-delay: 1s;animation-iteration-count: infinite;animation-direction: alternate;
}

简写属性

css

.element {animation: slidein 3s ease-in-out 1s infinite alternate;
}

常用动画属性值

timing-function：
- ease（默认）
- linear
- ease-in
- ease-out
- ease-in-out
- cubic-bezier(n,n,n,n)
direction：
- normal（默认）
- reverse
- alternate
- alternate-reverse

示例

css

/* 淡入效果 */
@keyframes fadeIn {from { opacity: 0; }to { opacity: 1; }
}.fade-in {animation: fadeIn 1s ease-in;
}/* 旋转动画 */
@keyframes spin {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}.spinner {animation: spin 2s linear infinite;
}/* 弹跳球 */
@keyframes bounce {0%, 100% { transform: translateY(0); }50% { transform: translateY(-20px); }
}.ball {animation: bounce 1s ease infinite;
}

结合使用示例

css

.fancy-button {border-radius: 25px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);animation: pulse 2s infinite;
}@keyframes pulse {0% {box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.4);}70% {box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);}100% {box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);}
}

这些 CSS 特性可以单独使用，也可以组合使用，为网页元素添加丰富的视觉效果和交互体验。

二、代码实例

1. radiu+shadow代码实例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3-radiu+shadow</title><style type="text/css">.div1 {width: 400px;height: 100px;border: 1px solid black;/* 取一个值为四个角为30px半径的圆 *//* 取两个值第一个值为左上右下的半径值 右上左下的半径值 *//* border-radius: 30px; *//* 某一个角的时候 第一个值代表水平半径 第二个值为垂直半径 */border-top-left-radius: 30px 50px;}.div2 {width: 100px;height: 100px;background-color: #CCCCCC;border-radius: 50px;}.div3 {width: 400px;height: 100px;background-color: #f90;box-shadow: 5px 5px 5px #868686;}h1 {text-shadow: 2px 2px 2px lawngreen;}</style></head><body><h1>border-radius 圆角边框或背景圆角</h1><div class="div1"></div><div class="div2"></div><h1>阴影 box-shadow text-shadow</h1><p>阴影默认为右下方，可以通过设置水平偏移为负值改变阴影的方向</p><div class="div3"></div></body>
</html>

代码运行：

2. animation动画代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css3-animation动画</title><style type="text/css">div {position: absolute;width: 300px;height: 300px;border: 1px solid black;border-radius: 30px;text-align: center;line-height: 300px;font-size: 24px;}@keyframes donghua1 {10% {background-color: red;left: 0px;}30% {background-color: yellow;font-size: 40px;}60% {background-color: green;color: white;}90% {background-color: blue;left: 300px;}}div:hover {animation: donghua1 5s infinite;}</style></head><body><h1>动画animation</h1><p>第一步创造一个动画</p><p>第二步调用动画 时间 动作</p><div>这是一个动画</div></body>
</html>

动画变化如下：

总结

以上就是今天要讲的内容，本文简单记录了radiu、shadow、animation动画，仅作为一份简单的笔记使用，大家根据注释理解

CSS- 4.6 radiu、shadow、animation动画

本系列可作为前端学习系列的笔记，代码的运行环境是在HBuilder中，小编会将代码复制下来，大家复制下来就可以练习了，方便大家学习。 HTML系列文章已经收录在前端专栏，有需要的宝宝们可以点击前端专栏查看！ 点…...

编程日记 2025/7/27 1:22:44

ngx_http_scgi_module 技术指南

一、快速上手示例 http {# 定义 SCGI 参数（标准 CGI 环境变量）include /etc/nginx/scgi_params;server {listen 80;location /app/ {# 将请求转发到本地 9000 端口的 SCGI 服务器scgi_pass localhost:9000;# 只转发非空的 HTTPS 参数scgi…...

编程日记 2025/7/27 1:02:01

NFT市场开发技术全解析：从架构设计到实现

NFT（非同质化代币）市场已成为区块链领域的热门应用场景，涵盖艺术品、游戏资产、虚拟地产等多个领域。本文将从技术栈选择、核心功能实现、开发流程、挑战与优化等方面，系统梳理NFT市场的开发要点，并结合实际案例与代码…...

编程日记 2025/7/27 1:14:26

第六十一篇 Java反射解析：用咖啡调配理解动态编程的艺术

引言：一杯咖啡引发的技术思考在星巴克的收银台前，我们总能看到店员熟练地根据顾客需求调配不同口味的咖啡：美式、拿铁、卡布奇诺… 这让我联想到编程世界中的对象创建。如果每新增一种咖啡就要修改收银系统，这样的设计显然不够优…...

编程日记 2025/7/27 1:07:55

【android bluetooth 协议分析 01】【HCI 层介绍 7】【ReadLocalName命令介绍】

1. HCI_Read_Local_Name Read Local Name 是 HCI（Host Controller Interface）命令之一，属于 BR/EDR 控制器的 HCI Command 类别，其主要功能是读取本地设备（Controller）的人类可读名称（Local N…...

编程日记 2025/7/25 10:24:12

window xampp apache使用腾讯云ssl证书配置https

下载腾讯云ssl证书： 编辑Apache根目录下 conf/httpd.conf 文件： #LoadModule ssl_module modules/mod_ssl.so和#Include conf/extra/httpd-ssl.conf，去掉前面的#号注释。编辑Apache根目录下 conf/httpd-ssl.conf 文件： <Vi…...

编程日记 2025/7/23 1:12:23

企业开发工具git的使用：从入门到高效团队协作

前言：本文介绍了Git的安装、本地仓库的创建与配置，以及工作区、暂存区和版本库的区分。详细讲解了版本回退、撤销修改等操作，并深入探讨了分支管理，包括分支的创建、切换、合并、删除及冲突解决。此外，还介绍了远程操作…...

编程日记 2025/7/23 15:29:01

【git config --global alias | Git分支操作效率提升实践指南】

git config --global alias | Git分支操作效率提升实践指南背景与痛点分析在现代软件开发团队中，Git分支管理是日常工作的重要组成部分。特别是在规范的开发流程中，我们经常会遇到类似 feature/user-management、bugfix/login-issue 或 per/cny/dev …...

编程日记 2025/7/25 7:47:30

VR 互动实训与展示，借科技开启沉浸式体验新篇

对于企业而言，产品设计与展示是极为关键的环节，这直接关系到能否成功吸引客户，以及精准获取市场反馈。在当下科技飞速发展的时代，VR 互动实训为这一至关重要的环节注入了全新活力，带来了前所未有的体验。以某智能家居企…...

编程日记 2025/7/26 21:37:02

一文了解VR拍摄制作

虚拟现实（VR）技术通过计算机技术模拟环境，使用户能够身临其境地沉浸在虚拟世界中进行交互体验。在VR拍摄中，主要利用这一技术来创建360度全景视频或图片，让观众能够全方位地感受拍摄场景。这种拍摄方式不仅改变了我们…...

编程日记 2025/7/26 4:23:56

【内测征集】LarkVR 播控系统上新：VR 应用一站式专业播控与管理工具

Paraverse平行云自主研发的LarkXR实时云渲染平台，作为行业领先的企业级云渲染解决方案，在国际市场占据重要地位。公司自2016年创立以来，始终引领3D/XR云化技术的创新发展，目前已在全球范围内为超过10,000名开发者和1,000家企业客户…...

编程日记 2025/7/23 4:27:23

Windows逆向工程提升之二进制分析工具：HEX查看与对比技术

公开视频 -> 链接点击跳转公开课程博客首页 -> 链接点击跳转博客主页目录十六进制查看工具应用于逆向工程的知识点编辑二进制对比工具应用于逆向工程的知识点十六进制查看工具十六进制查看器是逆向工程的基础工具，它可以以十六进制格式…...

编程日记 2025/7/25 4:32:29

电脑A和电脑B都无法ping通电脑C网络，电脑C可以ping通电脑A和B，使用新系统测试正常，排除硬件问题。

主要硬件：研华AIMB-705主板、i5-6500 C机在防火墙高级设置里启用以下两项规则后，A/B机可正常访问C机网络。（直接关闭防火墙也可解决此问题） 文件和打印机共享 (回显请求 - ICMPv4-In) 核心网络诊断 - ICMP 回显请求 (ICMPv4-In)…...

编程日记 2025/7/26 4:28:30

【VMware】虚拟机运行 Linux Ubuntu、MAC 安装和配置

文章目录一、VMware Workstation Pro 下载二、VMware Workstation Pro 安装三、Ubuntu Linux虚拟机镜像下载安装与配置 1、Ubuntu系统镜像下载 2、创建虚拟机（VMware）及硬件配置 3、编辑虚拟机设置 4、安装Ubuntu系统及系统…...

编程日记 2025/7/23 1:08:13

遨游科普：三防平板是什么？有什么作用？

在数字化与智能化浪潮席卷全球的今天，电子设备的可靠性已成为衡量其价值的核心标准之一。三防平板，这一“硬核”的工业设备，正凭借其卓越的环境适应能力，从专业领域走向大众视野，成为极端场景下不可或缺的数字化工具。…...

编程日记 2025/7/26 6:32:46

电脑闪屏可能的原因

1. 显示器 / 屏幕故障屏幕排线接触不良：笔记本电脑屏幕排线（屏线）松动或磨损，导致信号传输不稳定，常见于频繁开合屏幕的设备。屏幕面板损坏：液晶屏内部灯管老化、背光模块故障或面板本身损坏，…...

编程日记 2025/7/16 12:13:56

VR 互动实训的显著优势

（一）沉浸式学习，提升培训效果在 VR 互动实训中，员工不再是被动的知识接受者，而是主动的参与者。以销售培训为例，员工戴上 VR 设备，就能置身于逼真的销售场景中，与虚拟客户进行面对…...

编程日记 2025/7/22 12:10:52

2025.05.19【Connectedscatter】连接散点图详解

How to add a legend to base R plot The legend() function allows to add a legend. See how to use it with a list of available customization. Image on the chart background The rasterImage function allows to add an image on the background of the chart. 文章目…...

编程日记 2025/7/22 10:37:04

C++之函数模板类模板

模板 1.泛型编程2. 函数模板函数模板概念函数模板的实例化模板参数的匹配原则 3.类模板类模板的定义格式类模板的实例化 4.模板的优缺点 C 模板是一种强大的泛型编程工具，它允许你编写与类型无关的代码，提高代码复用性。 1.泛型编程先看一个我们之前经…...

编程日记 2025/7/23 18:35:37

《告别低效签约！智合同如何用AI重构商业“契约时代”》——解析智能合约技术的爆发与行业变革

在数字化浪潮奔涌的当下，合同作为商业活动的核心枢纽，正经历着智能化的深度变革。智合同-合同智能应用这一创新模式，犹如一颗璀璨的新星，在商业领域的天空中绽放出独特光芒，深刻改变着人们对合同管理与应用的认知和实践…...

编程日记 2025/7/24 7:38:13

Axure难点解决分享：垂直菜单展开与收回（4大核心问题与专家级解决方案）

亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！如有帮助请订阅专栏！ Axure产品经理精品视频课已登录CSDN可点击学习https://edu.csdn.net/course/detail/40420 课程主题：垂直菜单展开与收回主要内容：超长菜单实现、展开与收回bug解释、Axure9版本限制等问题解…...

编程日记 2025/7/26 1:05:24

PCB设计教程【入门篇】——电路分析基础-基本元件（电阻电容电感）

前言本教程基于B站Expert电子实验室的PCB设计教学的整理，为个人学习记录，旨在帮助PCB设计新手入门。所有内容仅作学习交流使用，无任何商业目的。若涉及侵权，请随时联系，将会立即处理目录前言 1.PCB原理图的作用…...

编程日记 2025/7/22 13:10:08

909. 蛇梯棋

https://leetcode.cn/problems/snakes-and-ladders/description/?envTypestudy-plan-v2&envIdtop-interview-150思路：题目要求我们使用最小的步数走到终点（注意不能走回头路，传送不算），那我们的想法就很明确了&am…...

编程日记 2025/7/21 4:40:39

Redis学习打卡-Day4-Redis实现消息队列

Redis 基于阻塞队列实现秒杀的优化新增秒杀优惠券的同时，将优惠券信息保存到 Redis 中。基于 Lua 脚本，判断秒杀库存、一人一单，决定用户是否抢购成功。如果抢购成功，将优惠券id和用户id封装后存入阻塞队列。开启独立线程任务&a…...

编程日记 2025/7/25 23:28:50

探索C++面向对象：从抽象到实体的元规则（上篇）

前引：在计算机科学的浩瀚星空中，面向对象编程（OOP） 无疑是照亮现代软件开发的核心范式。而 C 作为一门兼具高性能与抽象能力的系统级语言，其类与对象的语法设计更是开发者构建复杂系统的“元规则”。你是否曾困惑于封…...

编程日记 2025/7/24 1:18:59

华为鸿蒙电脑发布，企业运营效率可以提高吗？

今日，科技圈迎来重磅消息，华为于19日在成都正式发布两款鸿蒙电脑，标志着鸿蒙操作系统首次登陆电脑端，这是中国国产操作系统的重大里程碑，更是中国电子信息产业自主可控进程中的关键一步。鸿蒙操作系统作为首个统一移动…...

编程日记 2025/7/25 1:21:29

遨游科普：三防平板是什么？应用在什么场景？

在数字化转型的浪潮中，智能终端设备正从消费级市场向工业级场景深度渗透。传统平板电脑虽能满足日常需求，却难以应对极端环境下的挑战——暴雨、沙尘、震动、高温或低温等恶劣条件，往往成为数据采集、实时通讯和作业效率的“绊脚石”。在此背…...

编程日记 2025/7/16 8:04:47

图像中紫边出现原因

一、紫边在实景调试中，我们经常会遇到高亮场景下的物体边缘分布有明显的紫边（purple fringe）现象, 就如下图所示： 对于紫边的成因，通常认为是镜头色差（镜头对不同光谱光线的折射程度不同，导致不…...

编程日记 2025/7/24 4:44:13

中服云生产线自动化智能化调度生产系统：打造智能制造新标杆

前言在当今制造业竞争日益激烈的背景下，实现生产线的自动化与智能化已成为企业提升竞争力的关键。作为国内技术领先的工业物联网平台、数字孪生、自动控制技术厂商，中服云凭借其深厚的技术积累和创新能力，打造了一套完整的生产线自动化智能…...

编程日记 2025/7/22 5:23:12

【电动汽车充电系统核心技术全解：从can通讯高压架构到800V超充未来】

标题：电动汽车充电系统核心技术全解：从高压架构到800V超充未来目录前言：开篇暴击：中国电动车年产670万辆背后，充电技术如何破局一、充电系统架构解剖：四大核心模块如何“打配合”？二、CAN总线…...

编程日记 2025/7/23 15:44:52

uniapp-商城-62-后台商品列表（分类展示商品的布局）

每一个商品都有类别，比如水果，蔬菜，肉，粮油等等，另外每一个商品都有自己的属性，这些都在前面的章节进行了大量篇幅的介绍。这里我们终于完成了商品类的添加，商品的添加，现在到了该进…...

编程日记 2025/7/23 20:22:16

在嵌入式系统中，一般链路层断开多久，断开TCP为好

一、典型场景与推荐策略 1. 实时性优先（工业控制、自动化设备） 需求：快速释放资源，避免因等待重传浪费内存或阻塞任务。策略： 立即断开：在lwip_netif_link_callback中检测到链路断开后直接关闭TCP连接&a…...

编程日记 2025/7/21 10:27:59

解决 MySQL 错误 1356 (HY000)

当你遇到 ERROR 1356 (HY000): View mysql.user references invalid table(s) or column(s) or function(s) or definer/invoker of view lack rights to use them 错误时，通常是由于 MariaDB 或 MySQL 版本更新导致的视图引用问题。示例 UPDATE mysql.user SET H…...

编程日记 2025/7/22 23:16:03

【数据仓库面试题合集④】SQL 性能调优：面试高频场景 + 调优策略解析

随着业务数据规模的持续增长，SQL 查询的执行效率直接影响到数据平台的稳定性与数据产出效率。因此，在数据仓库类岗位的面试中，SQL 性能调优常被作为重点考察内容。本篇将围绕常见 SQL 调优问题，结合实际经验，整理出高频面试题与答题参考，助你在面试中游刃有余。 🎯 高…...

编程日记 2025/7/23 22:27:28

机器学习第十七讲：PCA → 把100维数据压缩成3D视图仍保持主要特征

机器学习第十七讲：PCA → 把100维数据压缩成3D视图仍保持主要特征资料取自《零基础学机器学习》。查看总目录：学习大纲关于DeepSeek本地部署指南可以看下我之前写的文章：DeepSeek R1本地与线上满血版部署：超详细手把手指南主…...

编程日记 2025/7/25 17:19:41

一个由微软开源的 Python 工具，用于将多种文件格式转换为 Markdown 格式

📚 Markitdown 由微软开源的 Python 工具，用于将多种文件格式转换为 Markdown 格式支持：PDF、PowerPoint、Word、Excel、图像、音频、HTML、文本格式（CSV、JSON、XML）、ZIP 文件的转换。它旨在提供一个简单且灵活的…...

编程日记 2025/7/26 18:10:24

Python多进程、多线程、协程典型示例解析

一、multiprocessing（多进程） 1. 模块简介作用：创建多个独立运行的进程（每个进程有独立内存空间）适用场景：数学计算、图像处理等CPU密集型任务核心原理：绕过Python的GIL锁，真正利…...

编程日记 2025/7/19 11:04:09

httpx[http2] 和 httpx 的核心区别及使用场景如下

httpx[http2] 和 httpx 的核心区别在于 HTTP/2 协议支持，具体差异及使用场景如下： 1. 功能区别命令/安装方式协议支持额外依赖适用场景pip install httpx仅 HTTP/1.1无通用请求，轻量依赖pip install httpx[http2]支持 HTTP/2需安装 h2>3…...

编程日记 2025/7/26 10:36:34

[强化学习的数学原理—赵世钰老师]学习笔记02-贝尔曼方程-下

[强化学习的数学原理—赵世钰老师]学习笔记02-贝尔曼方程-下 2.6 矩阵-向量形式2.7 求解状态值2.7.1 方法1：解析解2.7.2 方法2：数值解2.7.3 示例 2.8 动作值2.8.1 示例2.8.2 基于动作值的贝尔曼方程本人为强化学习小白，为了在后续科研的过程…...

编程日记 2025/7/23 6:46:06

c/c++数据类型转换.

author: hjjdebug date: 2025年 05月 18日星期日 20:28:52 CST descrip: c/c数据类型转换. 文章目录 1. 为什么需要类型转换?1.1 发生的时机:1.2 常见的发生转换的类型: 2. c语言的类型转换: (Type) value2.1 c语言的类型变换是如何实现的? 规则是什么? 3. c 的static_cast…...

编程日记 2025/7/25 14:30:45

大语言模型训练数据格式：Alpaca 和 ShareGPT

在大规模语言模型（LLM）的开发中，训练数据的质量和格式起着至关重要的作用。为了更好地理解和构建高质量的数据集，社区发展出了多种标准化的数据格式。其中，Alpaca 和 ShareGPT 是两种广泛使用的训练数据格式&#xff0…...

编程日记 2025/7/23 2:38:26

C++（23）：容器类＜vector＞

目录一、核心概念二、基本语法 1. 头文件 2. 声明与初始化三、常用操作四、具体实例 1、size()、front()、back() 2、push_back()、pop_back()、capacity() 3、reserve（） 一、核心概念 Vectors 包含着一系列连续存储的元素,其行为…...

编程日记 2025/7/26 0:03:45

Nginx配置中include mime.types的作用及正确配置mime类型

部署应用后发现页面没有正确加载CSS样式文件，通过检查nginx配置文件，发现nginx有一项配置include mime.type没有正确配置导致。 http {log_format main $remote_addr - $remote_user [$time_local] "$request" $status $body_bytes_sent &q…...

编程日记 2025/7/23 1:17:08

C++ 之继承

1.继承的概念及定义 1.1继承的引入我们设计一个person类，类中包含姓名、年龄、身高....等数据成员我们再设计一个student类，类中也需要包含姓名、年龄、身高...等数据成员我们再设计一个teacher类，类中也需要包含姓名、年龄、身高...等数…...

编程日记 2025/7/26 17:43:25

基于CNN的猫狗识别（自定义CNN模型）

目录一，数据集介绍 1.1 数据集下载 1.2 数据集简介二，模型训练 2.1 用到的模块 2.2 设置随机种子 2.3 图像的预处理 2.4 CNN模型层结构 2.5 初始化 2.6 训练和验证三，模型测试 3.1 定义相同预处理 3.2 定义相同的层结构 3.3…...

编程日记 2025/7/25 12:57:07

互联网大厂Java面试场景：从Spring Boot到分布式缓存技术的探讨

互联网大厂Java面试场景：从Spring Boot到分布式缓存技术的探讨场景描述互联网大厂某次Java开发岗面试，主考官是一位严肃的技术专家，而应聘者则是搞笑的程序员“码农明哥”。面试围绕音视频场景的技术解决方案展开，探讨从Sprin…...

编程日记 2025/7/16 19:50:02

linux本地部署ollama+deepseek过程

1.Tags ollama/ollama GitHub 选择一个版本下载，我下的是0.5.12 2.tar解压该文件 3.尝试启动ollama ollama serve 4.查看ollama的版本 ollama -v 5.创建一个系统用户 ollama，不允许登录 shell，拥有一个主目录，并且用…...

编程日记 2025/7/24 9:53:47

【数据结构与算法】ArrayList 与顺序表的实现

目录一、List 接口 1.1 List 接口的简单介绍 1.1 常用方法二、顺序表 2.1 线性表的介绍 2.2 顺序表的介绍 2.3 顺序表的实现 2.3.1 前置条件：自定义异常 2.3.2 顺序表的初始化 2.3.2 顺序表的实现三、ArrayList 实现类 3.1 ArrayList 的两种使用方式 3.2 Array…...

编程日记 2025/7/22 11:26:26

Vue 3.0 中的slot及使用场景

1. 基本概念在 Vue 中， slot 用于定义组件中的插槽位置，外部的内容会被插入到组件内部的这个位置。插槽的内容是动态的，可以根据需要进行传递和渲染。它允许开发者在组件外部传递任意内容，并在组件内部进行渲染，主要…...

编程日记 2025/7/24 11:45:31

go语言协程调度器 GPM 模型

go语言协程调度器 GPM 模型下面的文章将以几个问题展开，其中可能会有扩展处： 什么是调度器？为什么需要调度器？ 多进程/多线程时cpu怎么工作？ 进程/线程的数量多多少？太多行不行？为什么不行&…...

编程日记 2025/7/24 4:29:58

系列文章目录

前言

一、CSS 高级特性：圆角、阴影与动画

1.圆角 (border-radius)

基本语法

特殊值

示例

2.阴影 (box-shadow & text-shadow)

盒子阴影 (box-shadow)

文本阴影 (text-shadow)

示例

3.动画 (animation)

关键概念

基本语法

简写属性

常用动画属性值

示例

结合使用示例

二、代码实例

1. radiu+shadow代码实例如下：

2. animation动画 代码如下：

总结

相关文章：

2. animation动画代码如下：