一、常用概念:
1.Transform
Transform 属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等,它包含有以下属性:
(1)矩阵 matrix
(2)移动 translate
(3) 缩放 scale
(4)旋转 rotate
(5)扭曲 skew
(6)透视 perspective(n):为 3D 转换元素定义透视视图。
2、transition
transition 属性设置元素当过渡效果,四个简写属性为:
transition-property:指定CSS属性的name,transition效果
transition-duration:transition效果需要指定多少秒或毫秒才能完成
transition-timing-function:指定transition效果的转速曲线
transition-delay:指定transition效果的转速曲线
3、animation
4、伪类(Pseudo-classes)
伪类(Pseudo-classes) 为不同状态的元素为其添加对应的样式,使用单冒号(:)表示伪类:
:hover 把鼠标放在链接上的状态
:active 已选中的链接
5、伪元素
伪元素用于创建一些不在文档树中的元素,并为其添加样式。使用双冒号(::)表示伪元素
::before 在元素内容之前插入额外生成的内容
::after 在元素内容之后插入额外生成的内容
:first-line 向文本的首行设置特殊样式,“first-line” 伪元素只能用于块级元素。
:first-letter 向文本的首字母设置特殊样式
::selection 对用鼠标键盘等已选取的文字部分应用样
二、移动动画实现
1、效果:
鼠标悬浮时:
实现代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body{
width:100vw;
height:100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* 2.鼠标移入画面向上移动 */
.img-wrapper {
width: 300px;
/* height: 138px; */
}
.img-wrapper .img {
/* width: 300px; */
height: 200px;
background-color: rgb(150, 204, 242);
}
.img-wrapper .title {
/* width: 100%; */
margin-top: -28px;
text-align: center;
height: 28px;
line-height: 28px;
background-color: rgba(68, 130, 135, 0.8);
transition: 0.4s;
}
.img-wrapper:hover .title {
/* width: 100%; */
margin-top: -138px;
text-align: center;
height: 138px;
line-height: 138px;
background-color: rgba(68, 130, 135, 0.8);
transition: 0.4s;
}
</style>
<body>
<p>鼠标移入画面向上移动</p>
<div class="img-wrapper">
<div class="img"></div>
<div class="title">鼠标移入,我会上移居中</div>
</div>
</body>
</html>