一、常用概念区分
transform（变形）——组合属性，可以只设置其中一个/多个属性值，空格隔开。属性定义元素的形状/位置变化，：可以定义五个子属性：
移动translate
缩放scale
旋转rotate
扭曲skew
矩阵变形matrix元素
translate（移动）——transform的一个属性值，定义元素的移动效果
translate(x,y)两坐标同时移动，可以使用百分比
translateX(x)单方向移动
translate3d(x,y,z)定义 3D 移动
transition（过渡）——定义某种属性的过渡效果，是一个简写属性，可以定义四个子属性：
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
animation（动画) animation 定义某种keyframe的动画效果，属性是一个简写属性，用于设置六个动画子属性：
animation-name 规定需要绑定到选择器的 keyframe 名称
animation-duration 规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定在动画开始之前的延迟。
animation-iteration-count 规定动画应该播放的次数。
animation-direction 规定是否应该轮流反向播放动画。
伪类(Pseudo-classes) 为不同状态的元素为其添加对应的样式，使用单冒号(:)表示伪类
:hover 把鼠标放在链接上的状态
:active 已选中的链接
伪元素用于创建一些不在文档树中的元素，并为其添加样式。使用双冒号(::)/(:)表示伪元素
::before 在元素内容之前插入额外生成的内容
::after 在元素内容之后插入额外生成的内容
:first-line 向文本的首行设置特殊样式，“first-line” 伪元素只能用于块级元素。
:first-letter 向文本的首字母设置特殊样式
::selection 对用鼠标键盘等已选取的文字部分应用样
二、移动动画实现
1.transition+:hover伪类实现图片悬浮移动动画
js或jquery 元素移动以像素计算，手机上移动效果会有卡顿
利用CSS3 transition 可以很简单的实现流畅的移动动画
原始元素.floatBox设置样式移回原位置的效果，同样为效果设置过渡时间
.floatBox:hover设置左移效果，悬浮时触发
css代码：
/* 元素样式 */
.floatBox {
width: 300px;
background-color: rgb(221, 143, 143);
/* x=0代表移回原位置 */
transform: translateX(0);
/* 移回也需要0.4s时间过渡 */
transition: transform 0.4s;
}
/* hover样式 */
.floatBox:hover {
/* x=-10px代表左移10px */
transform: translateX(-10px);
/* 0.4s完成transform移动效果*/
transition: transform 0.4s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
效果展示：
2.鼠标移入画面向上移动
思路：
容器宽度固定，高度根据子元素变化
img设置高度138px，title设置高度28px
title设置margin-top: -28px;实现位移，和img重叠
容器伪类:hover title设置高度，line-height，margin-top三项填满，实现全重叠+文字居中效果
img和title设置 transition: 0.4s;
css代码：
/* 2.鼠标移入画面向上移动 */
.img-wrapper {
width: 300px;
}
.img-wrapper .img {
height: 138px;
background-color: rgb(221, 143, 143);
}
.img-wrapper .title {
/* margin-top设置为负值，实现重叠效果 */
margin-top: -28px;
text-align: center;
height: 28px;
line-height: 28px;
background-color: rgba(222, 134, 57, 0.8);
/* 所有属性过渡时间 */
transition: 0.4s;
}
.img-wrapper:hover .title {
/* margin-top为-容器总高度，填满容器 */
margin-top: -138px;
text-align: center;
/* height+linehright实现文字居中 */
height: 138px;
line-height: 138px;
background-color: rgba(222, 134, 57, 0.8);
/* 所有属性过渡时间 */
transition: 0.4s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
效果展示：
---------------------
作者：juwuyu
来源：CSDN
原文：https://blog.csdn.net/weixin_28900307/article/details/89061303
版权声明：本文为博主原创文章，转载请附上博文链接！
|
|
收藏
淘帖
踩
奈斯，感谢分享！
