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

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

news 2026/4/17 8:12:35

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

终极Windows清理指南：快速解决C盘爆红问题

终极Windows清理指南&#xff1a;快速解决C盘爆红问题 【免费下载链接】WindowsCleaner Windows Cleaner——专治C盘爆红及各种不服&#xff01; 项目地址: https://gitcode.com/gh_mirrors/wi/WindowsCleaner 你的Windows电脑是否经常出现C盘空间不足的警告&#xff1f…...

编程新知 2026/4/17 7:54:13

从网线到光纤：保姆级图解SFP光模块在千兆以太网中的信号转换全流程

从网线到光纤&#xff1a;保姆级图解SFP光模块在千兆以太网中的信号转换全流程 当你盯着机房交换机上闪烁的绿色指示灯时&#xff0c;是否好奇过那些跳动的光点背后隐藏着怎样的技术魔法&#xff1f;作为网络工程师&#xff0c;我们每天都在与SFP光模块打交道&#xff0c;但很…...

编程新知 2026/4/17 6:05:30

SAM 3图像视频分割：小白友好，快速部署体验AI黑科技

SAM 3图像视频分割&#xff1a;小白友好&#xff0c;快速部署体验AI黑科技 1. SAM 3是什么&#xff1f;它能做什么&#xff1f; SAM 3是Facebook推出的一个强大的AI模型&#xff0c;专门用于图像和视频中的物体分割。简单来说&#xff0c;它就像一个"智能剪刀"&…...

编程新知 2026/4/17 5:57:18

STM32无刷直流电机驱动实战：H_PWM_L_ON模式详解

1. H_PWM_L_ON模式基础原理 无刷直流电机&#xff08;BLDC&#xff09;的驱动方式多种多样&#xff0c;其中H_PWM_L_ON模式因其简单高效的特点&#xff0c;在中小功率应用中非常受欢迎。这种模式的核心思想是&#xff1a;上桥臂采用PWM信号控制&#xff0c;下桥臂则保持常开或…...

编程新知 2026/4/17 5:22:45

别再手动改参数了！用Zemax ZPL宏批量处理镜头数据，效率提升10倍

别再手动改参数了&#xff01;用Zemax ZPL宏批量处理镜头数据&#xff0c;效率提升10倍 光学设计师的日常工作中&#xff0c;最令人头疼的莫过于面对数百个镜头参数需要逐个检查修改。记得去年参与某VR镜头项目时&#xff0c;客户临时要求调整所有非球面系数&#xff0c;团队花…...

编程新知 2026/4/17 5:08:10

RootMyTV完整教程：10步轻松root你的LG电视

RootMyTV完整教程&#xff1a;10步轻松root你的LG电视 【免费下载链接】RootMyTV.github.io RootMyTV is a user-friendly exploit for rooting/jailbreaking LG webOS smart TVs. 项目地址: https://gitcode.com/gh_mirrors/ro/RootMyTV.github.io RootMyTV是一款用户友…...

编程新知 2026/4/17 4:37:08

GPU推理优化教程：提升Local AI MusicGen生成速度

GPU推理优化教程&#xff1a;提升Local AI MusicGen生成速度 你是不是也遇到过这样的情况&#xff1a;想用Local AI MusicGen创作一段音乐&#xff0c;输入了精心设计的描述词&#xff0c;结果等了半天才听到那几秒钟的旋律&#xff1f;那种等待的感觉&#xff0c;就像在等一杯…...

编程新知 2026/4/17 4:13:17

springboot私家车位共享系统小程序(文档+源码)_kaic

第5章 系统实现 5.1管理员功能模块 管理员登录&#xff0c;管理员通过输入用户名&#xff0c;密码&#xff0c;验证码等信息进入私家车位共享系统&#xff0c;如图5-1所示。 图5-1管理员登录界面图 管理员登录进入私家车位共享系统可以查看首页、轮播图、公告、资源管理&#…...

编程新知 2026/4/17 1:34:05

Livox Avia面阵激光雷达深度解析：双扫描模式如何重塑行业应用边界

1. Livox Avia面阵激光雷达的核心突破&#xff1a;双扫描模式解析 第一次拿到Livox Avia时&#xff0c;最让我惊讶的是它不到500克的机身里竟藏着两种完全不同的扫描模式。这就像一台相机同时拥有广角镜头和长焦镜头——非重复扫描模式如同广角镜头&#xff0c;能瞬间捕捉70.47…...

编程新知 2026/4/17 0:36:50

逆向实战：手把手教你用Node.js复现QQ音乐sign生成算法（附完整代码）

逆向工程实战&#xff1a;Node.js还原QQ音乐API签名生成机制 每次打开QQ音乐播放器&#xff0c;那些流畅跳动的音频数据背后都藏着一套精密的加密舞蹈。作为开发者&#xff0c;当我们试图通过程序化方式获取这些资源时&#xff0c;总会遇到那个令人头疼的sign参数——它像一道电…...

编程新知 2026/4/16 23:51:41