<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{ padding:0margin:0font-size:14px }
body{
background: grey
}
.d{
position:fixedmargin:autoleft:0right:0bottom:24pxwidth: 160pxheight:120px
animation: d1 3s linear animation-fill-mode: both
}
@keyframes d1{
from{
bottom: 24px
}
to{
bottom: 360px
}
}
.d img{
height:120pxposition: absolutemargin:autoleft:0top:0animation: d2 2s 3s linear infinite animation-fill-mode: both
}
@keyframes d2{
0%,100%{
transform:rotate(0deg)
}
50%{
left: 40px
transform:rotate(90deg)
}
}
</style>
</head>
<body>
<div class="d">
<img src="http://aimusic.image.alimmdn.com/Image/6d235b11f15838d6711ec6b0ca5e1a32.png"/>
</div>
</body>
</html>
可以尝试搜索关键字“css文字环绕图片”，这个效果和你说的效果是一致的。大致的代码如下：
<div>
<div id="menu" style="float:leftwidth:100pxheight:400pxbackground:blue"></div>
<!--右侧部分-->
<div>你的产品</div>
</div>
