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

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

news 2026/4/17 9:40:26

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

ThinkPad风扇控制终极指南：TPFanCtrl2深度配置与实战优化方案

ThinkPad风扇控制终极指南&#xff1a;TPFanCtrl2深度配置与实战优化方案 【免费下载链接】TPFanCtrl2 ThinkPad Fan Control 2 (Dual Fan) for Windows 10 and 11 项目地址: https://gitcode.com/gh_mirrors/tp/TPFanCtrl2 在Windows系统上实现ThinkPad风扇控制的精确调…...

编程新知 2026/4/17 8:45:20

M2LOrder在在线教育中的应用：学生作业文本情绪倾向自动评估

M2LOrder在在线教育中的应用&#xff1a;学生作业文本情绪倾向自动评估 1. 项目概述 M2LOrder是一个专业的情绪识别与情感分析服务&#xff0c;专门设计用于处理文本中的情感倾向分析。该系统基于先进的.opt模型文件构建&#xff0c;为教育工作者和学生提供了强大的情感分析能…...

编程新知 2026/4/17 8:43:20

如何用AlienFX Tools完全掌控你的Alienware灯光与风扇：5分钟快速入门指南

如何用AlienFX Tools完全掌控你的Alienware灯光与风扇&#xff1a;5分钟快速入门指南 【免费下载链接】alienfx-tools Alienware systems lights, fans, and power control tools and apps 项目地址: https://gitcode.com/gh_mirrors/al/alienfx-tools 厌倦了Alienware …...

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

OCR + RPA 实战：如何高效处理票据、合同、图片中的非结构化数据

一、为什么非结构化数据这么难搞 企业里到处是这样的场景&#xff1a; • 财务收到一堆发票照片&#xff0c;需要录入系统做报销 • 法务翻找合同扫描件&#xff0c;想快速定位某个条款 • 运营收到用户上传的身份证、营业执照截图&#xff0c;要提取关键信息这些数据都以图片或…...

编程新知 2026/4/17 6:36:29

AI代码审查不是替代开发者，而是接管重复劳动：Gartner验证的12项ROI指标，你达标了几项？

第一章&#xff1a;AI代码审查不是替代开发者&#xff0c;而是接管重复劳动&#xff1a;Gartner验证的12项ROI指标&#xff0c;你达标了几项&#xff1f; 2026奇点智能技术大会(https://ml-summit.org) AI代码审查工具的核心价值&#xff0c;从来不是取代工程师的判断力与架构…...

编程新知 2026/4/17 5:53:15

生成式AI流量洪峰应对方案：4种动态负载策略+实时QPS压测数据验证

第一章&#xff1a;生成式AI应用负载均衡方案 2026奇点智能技术大会(https://ml-summit.org) 生成式AI服务&#xff08;如大语言模型推理、文生图API&#xff09;具有显著的负载非线性特征&#xff1a;请求长度差异大、显存占用波动剧烈、响应延迟敏感&#xff0c;传统基于连接…...

编程新知 2026/4/17 5:53:15

如何用三维矩阵建模态势感知与势态知感？

将三维矩阵映射应用于“计算性态势感知”与“算计性势态知感”的协同建模&#xff0c;是构建下一代人机混合智能的关键。这要求我们超越单纯的物理空间数字化&#xff0c;转而构建一个能同时承载机器“计算”与人类“算计”的统一数学框架。这个框架的核心在于&#xff0c;利用…...

编程新知 2026/4/17 5:41:05

Doppler实战教程：10个创意应用场景与代码示例

Doppler实战教程&#xff1a;10个创意应用场景与代码示例 【免费下载链接】doppler :wave: Motion detection using the doppler effect 项目地址: https://gitcode.com/gh_mirrors/do/doppler Doppler是一款基于多普勒效应的Web端运动检测工具&#xff0c;通过普通麦克…...

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

UVM TLM analysis_port的write函数：从端口声明到数据处理的完整链路解析

1. UVM TLM analysis_port基础概念 在UVM验证环境中&#xff0c;TLM&#xff08;Transaction Level Modeling&#xff09;通信机制是组件间数据交互的核心方式。analysis_port作为TLM接口的一种特殊类型&#xff0c;主要用于实现单向、多播的数据传输。与传统的TLM端口不同&…...

编程新知 2026/4/17 3:24:47

第七章 结构体

结构体类似于其他面向对象语言的类&#xff0c;它包含了一些表达某类特性的属性组合&#xff0c;内容是一组属性名和属性值的集合。结构体还包含了对应相关联的函数方法和行为。它和元祖的区别是&#xff1a;元祖不包含属性名称&#xff0c;结构体包含属性名称。元祖使用小括号…...

编程新知 2026/4/17 3:18:34