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

HTML5:七天学会基础动画网页4

news 2025/9/5 3:34:41

backgorund-size

值与说明

length(单位像素):设置背景图片高度和宽度，第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个是设置为auto。

percentage(百分比):以父元素的百分比来设置背景图像的宽度和高度，第一个值设置宽度，第二个值设置高度，如果只给出一个值，第二个是设置为auto。

cover:把背景图片扩展至足够大，使背景图像完全覆盖背景区域，背景图像的某些部分也许无法显示在背景特定区域中。

contain:把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

语法:

background-size 100px

                            100%(可以通过这个压缩图片)                        cover

                             contain

background-origin

值与说明

padding-box:背景图像相对于内边距框来定位

border-box:背景图像相对于边框盒来定位

content-box:背景图像相对于内容框来定位

background-clip

值与说明

padding-box:背景被裁剪到内边距框

border-box:背景被裁剪到边框盒

content-box:背景被裁剪到内容框

box-show盒子阴影

(给内容添加阴影，使其更加立体)

h-shadow:必须的值，水平阴影的位置，允许负值。

v-shadow:必须的值，垂直阴影的位置，允许负值。

blur:可选的值，模糊距离。

spread:可选的值，阴影的尺寸，外延值。

color:可选的值，阴影的颜色。

inset:可选的值，将外部阴影(outset)改为内部           阴影

语法:box-show:水平 垂直 模糊的尺寸 阴影的宽度 阴影颜色

我们来随便写一个鼠标放置产生阴影变化的例子:

<style>

         *{

            margin: 0;

            height: 0;

         }

         .box{

            width: 300px;

            height: 500px;

            border: 1px solid black;

            margin: 60px auto;

         }

         .box:hover{

            box-shadow: 47px 47px 12px 12px #999;

         }

    </style>

</head>

<body>

   <div class="box"></div>

</body>

ac60a306958f435aabb4af232756c70c.png

 没有固定的参数，效果都是靠后期调整出来的。

这个盒子阴影的应用场景是很多的，这里以个小米的商城为例子

2bbcaa8909ae456a9b4112d6188de214.png

 我们的鼠标放置后它会产生一个略微放大和阴影的效果，更有立体感。

今天就说这么多吧，说个题外话，最近OpenAI的sora不是火了吗，网上出来很多所谓AI讲师来卖课，不说百分之百其实也差不多了，都是出来割韭菜的，朋友们细心一点小心别被骗，如果有时间后面可以开一期讲这个，没有就算了，最后祝大家工作顺利，生活愉快。

 

 

 

相关文章：

HTML5:七天学会基础动画网页4

backgorund-size 值与说明 length(单位像素):设置背景图片高度和宽度&#xff0c;第一个值设置宽度&#xff0c;第二个值设置高度&#xff0c;如果只给出一个值&#xff0c;第二个是设置为auto。 percentage(百分比):以父元素的百分比来设置背景图像的宽度和高度&#xff0c…...

编程日记 2024/3/1 9:18:30

Web安全之接口鉴权

目录 接口鉴权定义 为什么会有cookie还有session还有token这种技术的存在?...

编程日记 2024/3/1 9:17:29

shardingsphere 集成springboot【水平分表】

创建sharding_sphere数据库 在数据库中创建两张表&#xff0c;t_order_1和t_order_2 分片规则&#xff1a;如果订单编号是偶数添加到t_order_1,如果是奇数添加到t_order_2 创建实体类 public class Order { private Integer id; private Integer orderType; private Int…...

编程日记 2024/3/1 9:16:27

GO 的 Web 开发系列（六）—— 遍历路径下的文件

文件 IO 处理是程序的基础功能&#xff0c;WEB 程序中通过文件 IO 实现附件的上传与下载。在 GO 中&#xff0c;有多种方式可以遍历文件目录&#xff0c;获取文件路径&#xff0c;本文从使用层面上论述这些函数。 预先准备一个包含子目录的目录&#xff0c;用于遍历测试&#…...

编程日记 2024/3/1 9:15:26

Flutter 处理异步操作并根据异步操作状态动态构建界面的方法FutureBuilder

概述 当界面的内容需要依靠网络请求的数据&#xff0c;就需要处理苦恼的&#xff0c;状态是空&#xff0c;非空的逻辑了&#xff0c;不然页面构建可能会报错&#xff0c;而FutureBuilder提供了一个非常好的解决方法&#xff0c;直接看代码 代码 异步操作函数 即网络请求函数…...

编程日记 2024/3/1 9:14:24

Git教程-Git的基本使用

Git是一个强大的分布式版本控制系统&#xff0c;它不仅用于跟踪代码的变化&#xff0c;还能够协调多个开发者之间的工作。在软件开发过程中&#xff0c;Git被广泛应用于协作开发、版本管理和代码追踪等方面。以下是一个详细的Git教程&#xff0c;我们将深入探讨Git的基本概念和…...

编程日记 2024/3/1 9:13:23

Java解决长度为K子的数组中的的最大和

Java解决长度为K子的数组中的的最大和 01 题目 给你一个整数数组 nums 和一个整数 k 。请你从 nums 中满足下述条件的全部子数组中找出最大子数组和&#xff1a; 子数组的长度是 k&#xff0c;且子数组中的所有元素 各不相同 。 返回满足题面要求的最大子数组和。如果不存在子…...

编程日记 2024/3/1 9:12:22

【手机端测试】adb基础命令

一、什么是adb adb&#xff08;Android Debug Bridge&#xff09;是android sdk的一个工具 adb是用来连接安卓手机和PC端的桥梁&#xff0c;要有adb作为二者之间的维系&#xff0c;才能让用户在电脑上对手机进行全面的操作。 Android的初衷是用adb这样的一个工具来协助开发人…...

编程日记 2024/3/1 9:08:18

【数据结构】深入探讨二叉树的遍历和分治思想(一)

&#x1f6a9;纸上得来终觉浅&#xff0c; 绝知此事要躬行。 &#x1f31f;主页&#xff1a;June-Frost &#x1f680;专栏&#xff1a;数据结构 &#x1f525;该文章主要讲述二叉树的递归结构及分治算法的思想。 目录&#xff1a; &#x1f30d;前言&#xff1a;&#x1f30d;…...

编程日记 2024/3/1 9:05:14

jQuery AJAX get() 和 post() 方法—— W3school 详解 简单易懂（二十四）

jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求&#xff1a;GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是&#xff1a;GET 和 POST。 GET - 从指定的资源请求数据POST - 向指定的资源提交要处理的数据 GET 基本…...

编程日记 2024/3/1 9:04:12

Linux中如何进行LVM逻辑卷扩容?

#注意&#xff1a;如果lv所在的vg有空间直接扩容就ok了&#xff01; 1.创建pv pvcreate /dev/sdb 执行以上命令得到以下内容&#xff1a; Physical volume "/dev/sdb" successfully created. 2.直接vgextend扩容 vgextend vg1 /dev/sdb #卷组名字&#xff0c;将…...

编程日记 2024/3/1 8:58:05

现代企业架构框架——应用架构

现代企业架构框架——应用架构。 现代企业架构中的应用架构是指企业在构建和维护应用系统时所采用的一种架构框架。应用架构旨在实现应用系统的可扩展性、灵活性、可维护性和可重用性，以满足企业在数字化时代对应用系统的快速交付和持续创新的需求。下面将详细介绍应用架构的…...

编程日记 2024/3/1 8:47:55

期货开户保证金保障市场正常运转

期货保证金是什么&#xff1f;在期货市场上&#xff0c;采取保证金交易制度&#xff0c;投资者只需按期货合约的价值&#xff0c;交一定比率少量资金即可参与期货合约买卖交易&#xff0c;这种资金就是期货保证金。期货保证金&#xff08;以下简称保证金〕按性质与作用的不同。…...

编程日记 2024/3/1 8:46:55

WebGIS----wenpack

学习资料&#xff1a;https://webpack.js.org/concepts/ 简介&#xff1a; Webpack 是一个现代化的 JavaScript 应用程序的模块打包工具。它能够将多个 JavaScript 文件和它们的依赖打包成一个单独的文件&#xff0c;以供在网页中使用。 Webpack 还具有编译和转换其他类型文…...

编程日记 2024/3/1 8:40:49

【Maven】Maven 基础教程（二）：Maven 的使用

《Maven 基础教程》系列&#xff0c;包含以下 2 篇文章&#xff1a; Maven 基础教程&#xff08;一&#xff09;&#xff1a;基础介绍、开发环境配置Maven 基础教程&#xff08;二&#xff09;&#xff1a;Maven 的使用 &#x1f60a; 如果您觉得这篇文章有用 ✔️ 的话&#…...

编程日记 2024/3/1 8:39:48

mirthConnect忽略HTTPS SSL验证

mirthConnect SSL忽略验证 1、下载https网站证书 点击不安全---->证书无效 2、查看mirth 秘钥库口令 在mirthConnect 的conf目录下面keystore.storepass 3、导入证书到本地 在jdk的bin目录下面执行 keytool -importcert -file "下载的网站证书路径" -keysto…...

编程日记 2024/3/1 8:36:45

libvirt命名空间xmlns:qemu的使用

示例xml <domain type{domain_type} xmlns:qemuhttp://libvirt.org/schemas/domain/qemu/1.0><qemu:commandline><qemu:commandline><qemu:arg value-newarg/><qemu:env nameQEMU_ENV valueVAL/></qemu:commandline></domain>"…...

编程日记 2024/3/1 8:31:39

ywtool check命令及ywtool clean命令

一.ywtool check命令 1.1 ywtool check -I 1.2 ywtool check all 1.3 ywtool check io 1.4 ywtool check elk 1.5 ywtool check php 1.6 ywtool check mysql 1.7 ywtool check nginx 1.8 ywtool check system 1.9 ywtool check docker_nbip [容器名称] 1.10 ywtool check 1.10…...

编程日记 2024/3/1 8:30:38

java009 - Java面向对象基础

1、类和对象 1.1 什么是对象 万物皆对象&#xff0c;客观存在的事物皆为对象。 1.2 什么是面向对象 1.3 什么是类 类是对现实生活中一类具有共同属性和行为的事物抽象。 特点&#xff1a; 类是对象的数据类型类是具有相同属性和行为的一组对象的集合 1.4 什么是对象的属…...

编程日记 2024/3/1 8:21:29

MWC 2024 | 广和通携手意法半导体发布智慧家居解决方案

世界移动通信大会2024期间&#xff0c;广和通携手横跨多重应用领域、全球排名前列的半导体公司意法半导体&#xff08;STMicroelectronics&#xff0c;以下简称ST&#xff1b;纽约证券交易所代码&#xff1a;STM&#xff09;发布支持Matter协议的智慧家居解决方案。该方案在广和…...

编程日记 2024/3/1 8:18:26

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2025/9/3 10:08:41

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/8/12 1:19:44

Cinnamon修改面板小工具图标

Cinnamon开始菜单-CSDN博客 设置模块都是做好的&#xff0c;比GNOME简单得多&#xff01; 在 applet.js 里增加 const Settings imports.ui.settings;this.settings new Settings.AppletSettings(this, HTYMenusonichy, instance_id); this.settings.bind(menu-icon, menu…...

编程新知 2025/8/14 2:06:45

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

编程新知 2025/8/9 9:19:48

涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战

“&#x1f916;手搓TuyaAI语音指令 &#x1f60d;秒变表情包大师&#xff0c;让萌系Otto机器人&#x1f525;玩出智能新花样&#xff01;开整&#xff01;” &#x1f916; Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制&#xff08;TuyaAI…...

编程新知 2025/8/9 17:47:00

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/6/16 8:33:33

智能仓储的未来：自动化、AI与数据分析如何重塑物流中心

当仓库学会“思考”&#xff0c;物流的终极形态正在诞生 想象这样的场景&#xff1a; 凌晨3点&#xff0c;某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径&#xff1b;AI视觉系统在0.1秒内扫描包裹信息&#xff1b;数字孪生平台正模拟次日峰值流量压力…...

编程新知 2025/9/1 23:52:40

Android Bitmap治理全解析：从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

编程新知 2025/6/22 8:50:50

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/9/4 20:32:25

精益数据分析（97/126）：邮件营销与用户参与度的关键指标优化指南

精益数据分析&#xff08;97/126&#xff09;&#xff1a;邮件营销与用户参与度的关键指标优化指南 在数字化营销时代&#xff0c;邮件列表效度、用户参与度和网站性能等指标往往决定着创业公司的增长成败。今天&#xff0c;我们将深入解析邮件打开率、网站可用性、页面参与时…...

编程新知 2025/6/25 2:48:04