想要在网页里添加一个字体从左到右滑过（从无到有）的效果，但是毕竟是新手，只会写点简单的-_-||而加载页面之后，还没有到那个模块动画就进行完了，增加时间不现实，所以就想鼠标移到那个父级元素是进行帧动画，请问怎么实现？如果另有他法的话也请告知一二，多谢帮忙
2 回答
小怪兽爱吃肉
TA贡献1852条经验 获得超1个赞
代码如下：
<h1>CSS3滑入/滑出效果</h1>
<div id="volet_clos">
<div id="volet">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quisquam tempora quaerat dolores molestias reiciendis .</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<p>vero labore voluptates necessitatibus ut? Et</p>
<a href="#volet" aria-hidden="true" class="ouvrir">滑出</a>
<a href="#volet_clos" aria-hidden="true" class="fermer">滑入</a>
</div>
</div>
aluckdog
TA贡献1847条经验 获得超7个赞
这种需要有个触发事件，我是以图片代替的，鼠标移动到图片上，div从左往右缓慢移动（这里设置了移动完成时间），鼠标离开图片div就会缓慢消失
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
<link href="css/main.css" rel="stylesheet" type="text/css">
<style>
body,figure,figcaption,h2,h3,p{
margin: 0;
padding: 0;
}
.test1-img{
width: 240px;
height:10%;
overflow: hidden;
margin-left:250px;
}
figure{
position: relative;
overflow: hidden;
width: 100%;
float: left;
}
figcaption{
position: absolute;
top:0;
left: 0;
}
.test1 figcaption {
margin: 20px;
}
.test1 figcaption p{
color: #333;
font-family: 微软雅黑;
font-weight: 500;
letter-spacing: 1px;
margin-top: 10px;
text-align: center;
}
figure figcaption p{
transition: transform 5s;
}
.test1 figcaption p{
transform: translate(-100px,0px);
}
.test1:hover figcaption p{
transform: translate(150px,0px);
}
.test1 figcaption p:nth-of-type(1){
transition-delay: 0.1s;
}
</style>
</head>
<body>
<figure>
<img src="https://www.baidu.com/img/baidu_jgylogo3.gif">
<figcaption>
<h2><font >开始</font></h2>
<p>111111</p>
</figcaption>
</figure>
</body>
</html>
- 2 回答
- 0 关注
- 526 浏览
添加回答
举报
0/150
提交
取消