前端学习第5天
一、圣杯布局
例：
<style>
html,body{
height: 100%;
}
body{
margin: 0;
/* font-size: 0; */
}
header{
height: 10%;
background-color: #008000;
}
main{
height: 80%;
background-color: lightgray;
/* 开启弹性布局 */
display: flex;
/* 主轴对齐方式 */
justify-content: space-between;
}
footer{
height: 10%;
background-color: black;
}
.left, .right{
width: 10%;
height: 100%;
background-color: red;
/* 转换行内块元素 */
/* display: inline-block; */
/* 浮动 */
/* float: left; */
}
.middle{
width: 70%;
height: 100%;
background-color: #00FFFF;
/* display: inline-block; */
/* float: left; */
}
</style>
</head>
<body>
<header>
顶部导航
</header>
<main>
<section class="left">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
</section>
<section class="middle"></section>
<section class="right"></section>
</main>
<footer></footer>
</body>
二、过渡动画
1.css样式发生变化时，默认直接变化，没有过渡的效果
2.transition-property 表示哪些样式可以参与过渡效果 默认为all 所有样式
3. transition-duration 过渡动画持续的时间
4. transition-timing-function 过渡动画的速率
5. （ease 先快后慢 linear 匀速 ease-in先慢后快 ease-out先快后慢 ease-in-out(默认值)先加速后减速开始慢中间快结束慢）
6. transition-delay 延迟执行过渡效果
7. transition 复合样式
例：transition: all 1s ease-out;
8.width , height, color, left, right, border, transform 一般情况下，和元素外观有关的样式都能过渡,并不是所有的样式都能参与过渡
例：#d1:hover{
/* 变形 */
transform: scale(1.5);
background-color: blue;
9.box-shadow 设置元素阴影
10.box-shadow 横向偏移量 纵向偏移量 模糊程度(值越大越模糊) 阴影大小 阴影颜色
三、关键帧动画
1.transition过渡效果、animation-duration 动画时间
2.animation-name 要执行的动画名称 (自定义)
3. animation-iteration-count 动画重复的次数
infinite 无限循环
animation-timing-function 动画速率
animation-direction 动画方向
4.编写rotate动画的过程
@keyframes 动画名称 {动画过程}
from 动画开始之前的状态
to 表示动画结束时的状态
animation 复合样式 动画名称 持续时间 速率 重复次数…
例：
@keyframes move{
/* 将总共的动画时间按照百分比进行分配 /
0%{
/ 动画开始之前的状态 */
transform: translate(0);
}
25%{
transform: translate(100px, 0);
}
50%{
transform: translate(100px, 100px);
}
75%{
transform: translate(200px, 100px);
}
100%{
transform: translate(200px, 200px);
}
}
第三方动画库：https://daneden.github.io/animate.css/
弹球动画（小例子）
<head>
<meta charset="utf-8">
<title>小球运动</title>
<style>
#box{
width: 1000px;
height: 800px;
border: 2px red solid;
margin: 0 auto;
}
#ball{
width: 100px;
height: 100px;
background-color: brown;
border-radius: 50%;
margin: 0 auto;
/* 添加动画 */
animation: dump 5s both;
}
@keyframes dump{
0%{
transform: translate(0);
animation-timing-function: ease-in;
}
20%,
60%,
100%{
transform: translateY(700px);
animation-timing-function: ease-out;
}
40%{
transform: translateY(300px);
animation-timing-function: ease-in;
}
80%{
transform: translateY(500px);
animation-timing-function: ease-in;
}
}
</style>
</head>
<body>
<div id="box">
<section id="ball"></section>
</div>
</body>
四、鼠标hover控制子标签
例：
.box{
width: 300px;
height: 150px;
background-color: #00FFFF;
}
.cover{
width: 300px;
height: 40px;
background-color: black;
opacity: 0.5;
display: none;
/* visibility: hidden; */
}
/* 鼠标进入box大标签，控制子标签样式 */
.box:hover .cover{
display: block;
}
</style>
</head>
<body>
<div class="box">
<section class="cover">我是section</section>
</div>
</body>
上一篇： MacOS以root运行vscode
下一篇： 微服务权限