css变量 图片旋转漂浮动画

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_39425864/article/details/82182116

:root{ --screen-category: rotate(0deg); }//全局变量

		#img1{left: 50px;position: absolute; top: 50px;display: none;}
		.rol{
    -webkit-transform:var(--screen-category);
    transform:var(--screen-category);
    -webkit-transition:-webkit-transform 3s linear;
    transition:transform 3s linear;
}

html：

	<img src="img/jiu.png" width="25"border="0" id='img1'class="rol">

js

	function zhou(){
				var cWidth = document.documentElement.clientWidth-100;
				var cHeight = document.documentElement.clientHeight-300;
				var x=Math.round(Math.random()*cWidth);
	     		var y=Math.round(Math.random()*cHeight);

document.documentElement.style.setProperty('--screen-category','rotate(-'+x*y/200+'deg)' );//js设置css变量数值


				$("#img1").animate({left:x,top:y},3000);
			};
			zhou();
			setInterval(function(){
			 zhou();
			},3200)