伸缩盒以及动画
提示:这里可以添加系列文章的所有文章的目录,目录需要自己手动添加
例如:第一章 Python 机器学习入门之pandas的使用
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
一、伸缩盒
什么是伸缩盒:在移动端进行布局
1)语法
display:fled
2)父元素的样式
display:flex; 将盒子设置为伸缩盒
flex-direction 弹性元素排布的方向
cow x轴方向排布{默认值}
column y轴方向排布
justify-content: center; 主轴方向上的对齐方式
center 居中排布
flex-start 居左排布
flex-end 居右排布
align-items: center; 交叉轴上对齐的方式
center 居中排布
flex-start 开始位置上排布
flex-end 结束位置上排布
3)子元素的样式
flex 弹性元素对于伸缩盒剩余空间的分配
什么情况下需要用到伸缩盒?
当我们进行css样式的渲染的时候给定了一个盒子固定的宽度,正常情况下会在游览器中正常的显示,但如果平常操作的时候将游览器的窗口变小的时候,盒子的布局往往就会乱套,
那么如果我们有一个需求,要盒子能够根据游览器的大小进行动态的布局,游览器占领整个屏幕是一种布局,占领一半的屏幕又是另一种布局,即盒子会根据游览器的大小进行自适应布局
1.案例
案例代码如下:参考(fixd.html)
<style>
.parent {
/* height: 400px; */
border: 1px solid #333;
/* 父元素设置为伸缩盒 子元素全部为弹性元素 */
display: flex;
/* 子元素是否换行
wrap 换行
nowrap 不换行 */
flex-wrap: wrap;
/* justify-content: center;
align-items: center; */
/* flex-direction:
row 弹性元素在横向(x轴)排布 默认情景
column 弹性元素在纵向(y轴)排布 */
/* 主轴为y轴,交叉轴为x轴 */
/* flex-direction: column;
align-items: center; */
/* 主轴为x轴,交叉轴为y轴 */
/* flex-direction: row;
justify-content: center; */
}
.item {
width: 100px;
height: 100px;
border: 1px solid #333;
margin: 20px;
/* 四个子元素的分配比例都为1 */
/* flex: 1; */
}
</style>
<body>
<div class="parent">
<div class="item">伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒伸缩盒</div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
二、动画
什么是动画:随着时间的推移动态大大改变css的样式属性
1)语法 {组成}
animation 动画的配置
@keyframes 动画的关键帧
2)属性
参考3-animation.html
3) 案例
1.轮播图
1.属性
代码如下(3-animation.html):
<style>
* {
margin: 0px;
padding: 0px;
}
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
/* left: calc(100%-100px); */
/* 动画的名称 */
animation-name: move;
/* 动画持续的时间 */
animation-direction: 1s;
/* 动画的填充模式 当前div在动画结束时显示的位置
forwards 元素在动画的最后一帧的位置显示
backwords 元素在动画结束后回到开始的位置显示 {默认值} */
animation-fill-mode: forwards;
/* 动画执行的次数
1 一次
2 两次
。。。
infinite 无数次 */
animation-iteration-count: infinite;
/* 动画的速度
linear 匀速
ease 先快后慢
ease-in 先慢后快*/
animation-timing-function: linear;
/* 动画的延迟时间 两秒后在执行时间 */
animation-delay: 2s;
/* 动画的状态
pasued 暂停
running 执行 */
/* animation-play-state: paused; */
/* 动画的方向 */
animation-direction: alternate;
/* 速写 */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
}
div:hover {
/* 动画暂停 */
animation-play-state: paused;
}
/* 第一步:动画的定义
@keyframes css的固定语法
from 动画的开始事件
to 动画的结束事件 */
@keyframes move {
from {
left: 0px;
}
to {
left: calc(100% - 100px);
}
}
</style>
2.案例
轮播图
轮播图-大致意思就是让图片轮流播放
我们经常访问网站就能发现很多网站都会有这种效果的图片,就是再一个固定的地方每隔一段时间就会播放一张图片,这就是轮播图。下面我们就可以通过轮播图的案例更加深入的学习动画这个概念
轮播图代码如下:
<style>
/* 窗口的样式 */
.eye {
height: 300px;
width: 400px;
border: 1px solid #333;
margin: 200px auto;
overflow: hidden;
}
/* 图片的容器 */
.warp {
width: 1600px;
height: 300px;
animation: move 4s infinite;
}
/* 图片 */
.item {
width: 400px;
height: 300px;
float: left;
}
.warp .item:first-child {
background-image: url(https://yanxuan-item.nosdn.127.net/6d054f202f0aec38fd01b8f95b1c34c8.png?type=webp&quality=95&thumbnail=265x265&imageView);
background-size: 100% 100%;
}
.warp .item:nth-child(2){
background-image: url(https://yanxuan-item.nosdn.127.net/6d054f202f0aec38fd01b8f95b1c34c8.png?type=webp&quality=95&thumbnail=265x265&imageView);
background-size: 100% 100%;
}
.warp .item:nth-child(3){
background-image: url(https://yanxuan-item.nosdn.127.net/6d054f202f0aec38fd01b8f95b1c34c8.png?type=webp&quality=95&thumbnail=265x265&imageView);
background-size: 100% 100%;
}
.warp .item:nth-child(4){
background-image: url(https://yanxuan-item.nosdn.127.net/6d054f202f0aec38fd01b8f95b1c34c8.png?type=webp&quality=95&thumbnail=265x265&imageView);
background-size: 100% 100%;
}
@keyframes move {
from {
margin-left: 0px;
}
to {
margin-left: -1600px;
}
}
</style>
<body>
<div class="eye">
<div class="warp">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>
</body>
效果图如下(没找到合适的图片所有所用的四个轮播图都是一样的):
css-动画-素材