aluckdog
这种需要有个触发事件，我是以图片代替的，鼠标移动到图片上，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>