气泡漂浮上来停止,然后左右摇摆不停css3怎么写

html-css018

气泡漂浮上来停止,然后左右摇摆不停css3怎么写,第1张

<!DOCTYPE html>

<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>