用css做常用的平移，缩放特效

先布局css
平移css代码

.wrapper{width: 600px;height: 400px;border: 1px solid;margin: 0 auto;position: relative;overflow: hidden; }.wrapper p:nth-of-type(2){position: absolute;top: 50%;left: -100px;}.wrapper p:nth-of-type(3){width: 100px;height: 100px;border: 2px solid red;position: absolute;top:-200px;left:30%;}.wrapper:hover  p:nth-of-type(1){transform: translateY(-200px);}.wrapper:hover  p:nth-of-type(2){transform: translateX(300px);}.wrapper:hover  p:nth-of-type(3){transform: translateY(400px) rotate(360deg);}.wrapper img,.wrapper p{transition: all 2s;}.wrapper:hover img{transform: translateX(-40px);opacity: 0.5;}

缩放特效css代码

.wrapper {width: 600px;height: 400px;border: 1px solid;margin: 0 auto;position: relative;overflow: hidden;}.wrapper p{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}.wrapper p:nth-of-type(1) {width: 300px;height: 200px;border-top: 1px solid white;border-bottom: 1px solid white;transform: scaleX(0);}.wrapper p:nth-of-type(2) {width: 200px;height: 300px;border-right: 1px solid white;border-left: 1px solid white;transform: scaleY(0);}.wrapper img,.wrapper p{transition: all 2s;}.wrapper:hover img {transform: translateX(-40px);}.wrapper:hover p:nth-of-type(1) {transform: scaleX(1);}.wrapper:hover p:nth-of-type(2) {transform: scaleY(1);}

HTML代码

<div class="wrapper"><img src="imgs/pic9.jpg"><p>web大前端</p><p>随便写点什么</p><p></p></div>

平移和缩放用的是一个HTML文件

开发者涨薪指南 48位大咖的思考法则、工作方式、逻辑体系