CSS实现流动头像框

最新推荐文章于 2024-05-30 11:17:16 发布

末安

最新推荐文章于 2024-05-30 11:17:16 发布

阅读量1.5k

点赞数 11

文章标签： css html js

本文链接：https://blog.csdn.net/qq_46223960/article/details/109201472

版权

欢迎收看《好看的博文没人赞》系列

老规矩，先来一波效果图展示，有兴趣就往下面继续看：

如上图所示：边框在围绕着头像旋转对吧，这就是流动的边框效果（其实不是边框在转，就想骗骗你们，）

我把头像去掉给你们看看：

纳尼！就这？？？what’s happen

原理一下子就看清楚了吧——该效果就是一个四彩正方形div在旋转，通过头像遮盖使其看起来像边框在流动。等等，不太对劲呀，你div旋转归旋转，怎么样式不对劲呢？其实这里在四彩的div底层还有一个div，是用来固定四彩div的大小，超过该底层div的部分都被隐藏掉了。哦，嗦嘎，所的死内！

源码在下方：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>头像框</title>
		<style>
			.headback{
				width: 600px;
				height: 600px;
				position: absolute;
				top: 50px;
				left: 200px;
				overflow: hidden;
			}
			.headborder{
				width: 0px;
				height: 0px;
				border-width: 500px;
				border-style: solid;
				border-top-color: #00FFFF;
				border-left-color: #FF0000;
				border-bottom-color: #FFFF00;
				border-right-color: #00ff00;
				position: relative;
				top: -200px;
				left: -200px;
				transition: all 2s linear;
				transform: rotateZ(0deg);
			}
			.headimg{
				width: 580px;
				height: 580px;
				position: absolute;
				top: 10px;
				left: 10px;
			}
		</style>
		<script>
			var headnum = 0 ;
			function head(){
				headnum+=180;
				document.getElementById("headborder").style.transform="rotateZ("+headnum+"deg)";
			}
			setInterval(head,2000);
		</script>
	</head>
	<body>
		<div class="headback">
			<div class="headborder" id="headborder"></div>
			<img src="img/null31f58c0111c7acd4.jpg" class="headimg">
		</div>
	</body>
</html>

本次博文就到这里了，谢谢各位看官的观看，制作不易，点个赞再走呗。

末安

关注

11
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
1
评论
CSS实现流动头像框

欢迎收看《好看的博文没人赞》系列老规矩，先来一波效果图展示，有兴趣就往下面继续看：如上图所示：边框在围绕着头像旋转对吧，这就是流动的边框效果（其实不是边框在转，就想骗骗你们，）我把头像去掉给你们看看：纳尼！就这？？？what’s happen原理一下子就看清楚了吧——该效果就是一个四彩正方形div在旋转，通过头像遮盖使其看起来像边框在流动。等等，不太对劲呀，你div旋转归旋转，怎么样式不对劲呢？其实这里在四彩的div底层还有一个div，是用来固定四彩div的大小，超过该底层div的.
复制链接

扫一扫