css变量图片旋转漂浮动画

最新推荐文章于 2024-12-04 11:30:09 发布

是九叔啊

最新推荐文章于 2024-12-04 11:30:09 发布

阅读量313

点赞数

分类专栏： css3 css变量前端开发文章标签： css变量随机漂浮动效前端css3 css3

本文链接：https://blog.csdn.net/qq_39425864/article/details/82182116

版权

前端开发同时被 3 个专栏收录

19 篇文章 0 订阅

订阅专栏

css变量

1 篇文章 0 订阅

订阅专栏

css3

0 篇文章 0 订阅

订阅专栏

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

	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)