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

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>

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

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

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

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

相关推荐
mCell12 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip12 小时前
Node.js 子进程:child_process
前端·javascript
excel15 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel16 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼18 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping18 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙19 小时前
[译] Composition in CSS
前端·css
白水清风19 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix19 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780019 小时前
new、原型和原型链浅析
前端·javascript