如何解决css3 过渡引起的页面晃动

html-css022

如何解决css3 过渡引起的页面晃动,第1张

div

{

backface-visibility:hidden

-webkit-backface-visibility:hidden /* Chrome 和 Safari */

-moz-backface-visibility:hidden /* Firefox */

-ms-backface-visibility:hidden /* Internet Explorer */

}

楼主可以试试这个，隐藏被旋转的 div 元素的背面

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

在css中设置一个 样式clear{clear:both}清除左右浮动，在想清除浮动的地方引入一个css样式即可；

clear:both是清除左右浮动

clear:left清除左浮动

clear:rigth清除右浮动；