css实现的二级菜单和logo滚动
- 二级菜单
<style>
box1{
width: 200px;
height: 200px;
/* background-color: pink; */
overflow: hidden;
}
box2{
width: 200px;
height: 200px;
background-color: aquamarine;
/* transform: translateY(-100%); */
*/* height: 0; */*
**display: none;**
transition: 2s;
box1 : hover . box2{
/* transform: translateY(0); */
*/* height: 200px; */*
**display: block;**
}
```css
</style>
:/head>
<body>
<div class="box1" >
<div class=" box2"></div>
</div>
</ body>
2、 logo滚动
. logo{
width: 200px;
height: 200px;
background- color: hotpink;
position: relative;
margin: auto;
overflow: hidden; */
1ogo-one{
width: 200pxj
height: 200px;
background-color:口aquamarine;
transition: 1s;
}
logo-two{
width: 200pxj
height: 200px;
background-color: 0 darkgoldenrod;
position: absolute;
top: 0;
right: 208px;
transition: 1s;
}
1ogo :hover . 1ogo-two{
transform: translatex( - 200px);
]
1ogo :hover .10g0- one{
transform: translatex( - 200px);
}
'style>
/head》
body>
<!-- 1ogo滚动-->
<div class="1ogo">
<div class= "10go-one"></div>
<div class= "1ogo-two"></div>
</div>
body>
306
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
