最近在学HTML+CSS,今天开始做第一个项目,其中需要实现图片缓慢平移的效果,老师教我们用transition来实现,但是我自己编写的时候,发现transition并没有效果。研究一番之后发现,需要给属性添加一个初值才能够激发属性transition。
1、不生效
.header .logo a{
position: absolute; /*开启绝对定位*/
display: block;
width: 55px;
height: 55px;
background-color: #FF6700;
background-image: url(../img/02-小米logo.png); /*把超链接的背景设置为logo图片*/
background-position: center; /*居中*/
transition: left 3s; /*过渡动画*/
}
.header .logo:hover .mi{
left: 55px;/*logo往右移*/
}
刚开始这样写,当我把光标移入到超链接的时候,logo图片(超链接背景)并没有按3s缓慢向右移动,也就是transition属性没有生效。
2、生效
后来我给超链接添加了left初值之后,logo图片缓慢移动,transition生效。
.header .logo a{
position: absolute; /*开启绝对定位*/
display: block;
width: 55px;
height: 55px;
background-color: #FF6700;
background-image: url(../img/02-小米logo.png); /*把超链接的背景设置为logo图片*/
background-position: center; /*居中*/
transition: left 3s; /*过渡动画*/
}
.header .logo .mi{
left: 0px;
}
.header .logo:hover .mi{
left: 55px;/*logo往右移*/
}
3、效果展示
移动前面:
移动后: