CSS3 动画相关属性实例大全（五)
（margin 、max-height、max-width、min-height、min-width、opacity 、order 属性）
本文目录：
零、时光宝盒
一、margin 属性（设置元素的边距属性）
1.1、margin-bottom属性（设置元素的下边距）
1.2、margin-left 属性（设置元素的左边距）
1.3、margin-right 属性（设置元素的右边距）
1.4、margin-top属性（设置元素的顶边距）
二、max-height 属性（设置元素的最大高度）
三、max-width属性（设置元素的最大宽度）
四、min-height属性（设置元素的最低高度）
五、min-width属性（设置元素的最低宽度）
六、opacity 属性（设置一个元素的透明度级别）
七、order 属性（设置布局时的顺序）
零、时光宝盒
（https://blog.csdn.net/weixin_69553582 逆境清醒）
今天是我家里人生日，但现在的我精力真不如从前，只煮了几个简单菜，也不够精致，不能算生日菜，惭愧。幸好，哥和嫂子买了蛋糕才有点生日的感觉。
生活中，我们可以从一件事情的细微处感受到关爱之深。我哥平时工作忙，我妈总希望他能休息好。例如夏天，哥回这边家时，晚上睡觉前在房间打开空调然后去洗澡，这期间，我妈进自己房间睡觉前，总是叮嘱我把客厅的空调留哥哥不要关，怕他刚洗完澡可能会热，他房间的空调温度还没降到舒适温度，所以要专门留着客厅的空调给哥先吹吹。妈平时是很节俭的人，如果她离开客厅去睡觉，一定会关掉她不用的空调。哥哥都结婚20年了，但在妈心中，他永远是需要细心照顾的孩子。这也许跟那些为晚归人留盏灯意义是一样的，那是种温暖，是关爱，是家。
我最近用python和html写了一些庆祝生日快乐的代码，还在微调细节，如果大家需要，到时分享给大家。
（我的代码都会验证过后完整分享给大家，如果大家运行不成功，可能是有其他原因，例如你不是在我博客逆境清醒逆境清醒-CSDN博客 获取的代码，或者我的代码因为某些我不可预测和控制的原因出现了代码被删剪，如果发生这种情况，请尽量与我取得联系，我看得到的评论或留言我会回复。）
初步效果如图：
html生日庆祝
python画蛋糕：
逆境清醒
2024.10.20
一、margin 属性（设置元素的边距属性）
margin 属性
| 值 | 意义 |
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
| margin:1px 2px 3px 4px; | 上边距是 1px 右边距是 2px 下边距是 3px 左边距是 4px |
| margin:10px 50px 60px; | 上边距是 10px 右边距和左边距是 50px 下边距是 60px |
| margin:10px 50px; | 上边距和下边距是 10px 右边距和左边距是 50px |
| margin:10px; | 所有四个边距都是 10px |
| JavaScript 语法： | object.style.margin="10px 50px" |
<style>
#animation49 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: lightblue;
color: black;
margin: 0;
-webkit-animation: animation49a 1s infinite;
animation: animation49a 1s infinite;
}
@-webkit-keyframes animation49a {
50% { margin: 50px; }}
@keyframes animation49a {
50% { margin:50px; } }
</style>
<div id="animation49">逆境清醒</div>
改变 margin 属性：从 margin: 0;到 margin:50px;
1.1、margin-bottom属性（设置元素的下边距）
margin-bottom属性设置元素的下边距。
| 值 | margin-bottom属性意义 |
| auto | 浏览器计算下外边距。 |
| length | 规定以具体单位计的下外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的下外边距。 |
| inherit | 规定应该从父元素继承下外边距。 |
<style>
div {width: 120px; }
#animation50 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
margin-bottom: 0;
-webkit-animation: animation50a 1s infinite;
animation: animation50a 1s infinite;
}
@-webkit-keyframes animation50a
{ 50% {margin-bottom: 50px; } }
@keyframes animation50a
{ 50% {margin-bottom: 50px; } }
</style><div id="animation50">逆境清醒</div>
改变 margin-bottom 属性：从 margin-bottom: 0;到 margin-bottom: 50px;
1.2、margin-left 属性（设置元素的左边距）
<style>
div { width: 120px; }
#animation51 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
margin-left: 0;
-webkit-animation: animation51a 1s infinite;
animation: animation51a 1s infinite;
}
@-webkit-keyframes animation51a {
50% { margin-left: 50px; } }
@keyframes animation51a {
50% { margin-left: 50px; } }
</style> <div>
<div id="animation51">逆境清醒</div>
</div>
改变 margin-left 属性：从 margin-left: 0; 到 margin-left: 50px;
1.3、margin-right 属性（设置元素的右边距）
<style>
#animation52 {
height: 150px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
margin-right: 99%;
-webkit-animation: animation52a 1s infinite;
animation: animation52a 1s infinite;
}
@-webkit-keyframes animation52a {
50% { margin-right: 90%; } }
@keyframes animation52a {
50% { margin-right: 90%; } }
</style><div id="animation52">逆境清醒</div>
改变 margin-right 属性：从 margin-right: 99%;到 margin-right: 90%;
1.4、margin-top属性（设置元素的顶边距）
<style>
#animation53 {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
margin-top: 1%;
-webkit-animation: animation53a 1s infinite;
animation: animation53a 1s infinite;
}
@-webkit-keyframes animation53a {
50% { margin-top: 10%; } }
@keyframes animation53a {
50% { margin-top: 10%; } }
</style><div id="animation53">逆境清醒</div>
改变 margin-top 属性：从 margin-top: 1%;到 margin-top: 10%;
二、max-height 属性（设置元素的最大高度）
max-height 属性设置元素的最大高度。它可以防止 height 属性的已用值大于为 指定的值。
max-height属性不包括填充，边框，或页边距！
| 值 | 意义 |
| none | 定义对元素被允许的最大高度没有限制。默认。 |
| length | 定义元素的最大高度值。 |
| % | 定义基于包含它的块级对象的百分比最大高度。 |
| inherit | 规定应该从父元素继承 max-height 属性的值。 |
<style>
#animation54 {
width: 150px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
overflow: auto;
-webkit-animation: animation54a 1s infinite;
animation: animation54a 1s infinite;
}
@-webkit-keyframes animation54a {
50% { max-height: 80px; } }
@keyframes animation54a {
50% { max-height: 80px; } }
</style><div id="animation54"><p>逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你</p></div>
改变 max-height 属性：从 默认到 max-height: 80px;
三、max-width属性（设置元素的最大宽度）
max-width属性设置元素的最大宽度
<style>
#animation55 {
height: 200px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
overflow: auto;
max-width: 50px;
-webkit-animation: animation55a 1s infinite;
animation: animation55a 1s infinite;
}
@-webkit-keyframes animation55a {
50% { max-width: 120px; } }
@keyframes animation55a {
50% { max-width: 120px; } }
</style><div id="animation55"><p>逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你</p></div>
改变 属性：从 0 到 100px
四、min-height属性（设置元素的最低高度）
| min-height | 属性设置元素的最低高度。属性不包括填充，边框，或页边距！ |
| length | 定义元素的最小高度。默认值是 0。 |
| % | 定义基于包含它的块级对象的百分比最小高度。 |
| inherit | 规定应该从父元素继承 min-height 属性的值。 |
<style>
#animation56 {
width: 150px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
overflow: auto;
min-height: 50px;
-webkit-animation: animation56a 1s infinite;
animation: animation56a 1s infinite;
}
@-webkit-keyframes animation56a {
50% { min-height: 260px; } }
@keyframes animation56a {
50% { min-height: 260px; } }
</style>
<div id="animation56"><p>逆境清醒2023年春节祝福第二弹——逆境清醒送你一只守护兔，让它温暖每一个你</p></div>
改变 min-height 属性：从 min-height: 50px;到 min-height: 260px;
五、min-width属性（设置元素的最低宽度）
<style>
#animation57 {
width: 50px;
height: 200px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
overflow: auto;
-webkit-animation: animation57a 1s infinite;
animation: animation57a 1s infinite;
}
@-webkit-keyframes animation57a {
50% {min-width: 200px; } }
@keyframes animation57a {
50% { min-width: 200px; } }
</style><div id="animation57">逆境清醒</div>
改变 min-width 属性：从 50px 到 min-width: 200px;
六、opacity 属性（设置一个元素的透明度级别）
| opacity | 属性设置一个元素的透明度级别。 |
| value | 指定不透明度。从0.0（完全透明）到1.0（完全不透明） |
| inherit | Opacity属性的值应该从父元素继承 |
<style>
#bjb {
position: absolute;
left: 30px;
width: 150px;
height: 250px;
color: white;
background-color: black;
border: 1px solid black;
}
#animation58 {
position: absolute;
top: 30px;
width: 150px;
height: 250px;
border: 1px solid black;
background-color: #c1ffc1;
color: black;
-webkit-animation: animation58a 2s infinite;
animation: animation58a 2s infinite;
}
@-webkit-keyframes animation58a {
50% { opacity: 0; } }
@keyframes animation58a {
50% { opacity: 0; } }
</style> <div id="bjb"><h1>我是背景板</h1></div>
<div id="animation58"><h1>我会隐形</h1></div>
改变 属性：从 0 到 100px
七、order 属性（设置布局时的顺序）
order 属性规定弹性项目相对于同一容器内其余弹性项目的顺序。
规定了弹性容器中的可伸缩项目在布局时的顺序。
元素按照 order 属性的值的增序进行布局。
拥有相同 order 属性值的元素按照它们在源代码中出现的顺序进行布局。
order 仅仅对元素的视觉顺序 (visual order) 产生作用，
并不会影响元素的逻辑或 tab 顺序。
order 不可以用于非视觉媒体
如果元素不是弹性项目，则 order 属性无效。
初始值：0
<style>
#main {
width: 100px;
height: 450px;
border: 1px solid #000000;
display: flex;
flex-direction: column;
}
#main div {
width: 100px;
height: 100px;
}
#animation59 {
animation: animation59a 2s infinite;
-webkit-animation: animation59a 2s infinite;
}
@keyframes animation59a {
50% { order: 7; } }
@-webkit-keyframes animation59a {
50% { order: 7; } }
</style> <div id="main">
<div style="background-color: red; order: 1;" id="animation59">逆境清醒</div>
<div style="background-color:orange;order:2;">2</div>
<div style="background-color:yellow;order:3;">3</div>
<div style="background-color:lightgreen; order: 4;">4</div>
<div style="background-color:lightblue;order:5;">5</div>
<div style="background-color:purple;order:6;">6</div>
</div>
改变 order 属性
改变红色 DIV 元素的显示顺序，从 1 到 6 再回到 1
CSS3 动画相关属性实例大全系列目录：
- 1、CSS3 动画相关属性实例大全（一)（@keyframes ，background属性，border 属性）
- 2、CSS3 动画相关属性实例大全（二)（bottom 、box-shadow、clip、color 、column-count、column-gap、column-rule、column-rule-color、column-rule-width、column-width 属性）
- 3、CSS3 动画相关属性实例大全（三)（columns、filter、flex、flex-basis 、flex-grow、flex-shrink属性）
- 4、CSS3 动画相关属性实例大全（四)（font、height、left、letter-spacing、line-height 属性）
- 5、CSS3 动画相关属性实例大全（五)（margin 、max-height、max-width、min-height、min-width、opacity 、order 属性）
- 6、CSS3 动画相关属性实例大全（六)（outline 、outline-color 、outline-offset、outline-width、padding、padding-bottom、padding-left 、padding-right 、padding-top、perspective属性）
- 7、
CSS3 动画相关属性实例大全（七)（perspective-origin、right、text-decoration-color 、text-indent、text-shadow、top 、transform、transform-origin、vertical-align、visibility 、width、word-spacing、z-index属性）
推荐阅读：CSS @规则(At-rules)详解系列索引目录
|
|
|
|
| 给照片换底色（python+opencv） | 猫十二分类 | 基于大模型的虚拟数字人__虚拟主播实例 |
|
|
|
|
| 计算机视觉__基本图像操作（显示、读取、保存） | 直方图（颜色直方图、灰度直方图） | 直方图均衡化（调节图像亮度、对比度） |
|
|
|
|
| 语音识别实战（python代码）(一） | 人工智能基础篇 | 计算机视觉基础__图像特征 |
逆境清醒
|
| ||
| matplotlib 自带绘图样式效果展示速查（28种，全） | ||
|
| ||
| Three.js实例详解___旋转的精灵女孩(附完整代码和资源)（一） | ||
|
|
|
|
| 立体多层玫瑰绘图源码__玫瑰花python 绘图源码集锦 | Python 3D可视化（一） | 让你的作品更出色——词云Word Cloud的制作方法（基于python，WordCloud，stylecloud) |
|
|
|
|
| python Format()函数的用法___实例详解（一）(全，例多）___各种格式化替换，format对齐打印 | 用代码写出浪漫__合集（python、matplotlib、Matlab、java绘制爱心、玫瑰花、前端特效玫瑰、爱心） | python爱心源代码集锦（18款） |
|
|
|
|
| Python中Print()函数的用法___实例详解(全，例多） | Python函数方法实例详解全集(更新中...) | 《 Python List 列表全实例详解系列（一）》__系列总目录、列表概念 |
|
|
| |
| 用代码过中秋，python海龟月饼你要不要尝一口？ | python练习题目录 | |
|
|
|
|
| 草莓熊python turtle绘图（风车版）附源代码 | 草莓熊python turtle绘图代码（玫瑰花版）附源代码 | 草莓熊python绘图（春节版，圣诞倒数雪花版）附源代码 |
|
|
| |
| 巴斯光年python turtle绘图__附源代码 | 皮卡丘python turtle海龟绘图（电力球版）附源代码 | |
|
|
|
|
| Node.js (v19.1.0npm 8.19.3) vue.js安装配置教程（超详细） | 色彩颜色对照表（一）(16进制、RGB、CMYK、HSV、中英文名) | 2024年6月多家权威机构____编程语言排行榜__薪酬状况 |
|
|
|
|
| 手机屏幕坏了____怎么把里面的资料导出（18种方法） | 【CSDN云IDE】个人使用体验和建议（含超详细操作教程）（python、webGL方向) | 查看jdk安装路径，在windows上实现多个java jdk的共存解决办法，安装java19后终端乱码的解决 |
|
| ||
| vue3 项目搭建教程（基于create-vue，vite，Vite + Vue） | ||
|
|
|
|
| 2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特 | 别具一格，原创唯美浪漫情人节表白专辑，(复制就可用)（html5,css3,svg)表白爱心代码(4套) | SVG实例详解系列（一）(svg概述、位图和矢量图区别（图解）、SVG应用实例） |
|
|
|
|
| 【程序人生】卡塔尔世界杯元素python海龟绘图（附源代码），世界杯主题前端特效5个（附源码） | HTML+CSS+svg绘制精美彩色闪灯圣诞树，HTML+CSS+Js实时新年时间倒数倒计时(附源代码) | 2023春节祝福系列第一弹（上）（放飞祈福孔明灯，祝福大家身体健康）（附完整源代码及资源免费下载） |
|
|
|
|
| tomcat11、tomcat10 安装配置（Windows环境）（详细图文） | Tomcat端口配置（详细） | Tomcat 启动闪退问题解决集（八大类详细） |
