Jquery 实现图片水平旋转效果

前言

  最近在写前端的时候,有这么一个需求就是前端页面都是静态的,看上去比较呆,要求加上一点动态效果。。于是乎做了一个首页旋转的效果

实现

  这个地方我就直接放源码的实现了,其实主要就是设置一下他 X Y 轴的旋转,以及旋转速度

## 旋转属性
animation: rotationY 10s infinite linear;
transform: rotate(360deg);

@keyframes rotationY {
	from {
		transform: rotateY(0deg);
	}
	to {
		transform: rotateY(360deg);
	}
}

  上边这是比较关键的一部分源码,大概的意思就是,设置了一下旋转速度和旋转方向,这个是顺时针的哈
  完整代码如下

<html>

<head>
    <meta charset='utf8' />
    <style type='text/css'>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background: lightseagreen;
        }

        .btn {
            animation: rotationY 10s infinite linear;
			transform: rotate(360deg);
        }
	
		@keyframes rotationY {
			from {
			  transform: rotateY(0deg);
			}
			to {
			  transform: rotateY(360deg);
			}
		  }
    </style>

</head>

<body>
    <img class="btn" src="https://ci.xiaohongshu.com/ae7f7ec9-8720-56a3-b2c6-5b6c5aa7434d?imageView2/2/w/540/format/jpg">
</body>
</html>

  实现效果的话,可以在桌面创建一个 html 文件,把源码复制进去直接打开,查看效果,这个地方就不再单独放上去了

上一篇:beego快速体验


下一篇:beego安装bee工具时出现unable to access ‘https://github.com/xxxx/xxxx‘: Failed to connect togo....解决办法