CSS给给图片添加流动边框

我就不思

已于 2022-05-08 20:20:00 修改

阅读量499

点赞数 1

分类专栏： CSS JAVASCRIPT

于 2022-03-03 16:23:22 首次发布

本文链接：https://blog.csdn.net/weixin_45788691/article/details/123255855

版权

vue.js 前端 javascript

JAVASCRIPT 同时被 2 个专栏收录

58 篇文章 4 订阅

订阅专栏

CSS

21 篇文章 1 订阅

订阅专栏

需求：给一张图片添加流动的边框！
效果图：
在这里插入图片描述 HTML

<div class="headback navC C">
		<div class="headborder" id="headborder"></div>
		<img src="./img/03/a06.png" class="headimg">
</div>

.JS

var headnum = 0 ;
	function head(){
	headnum+=180;
	ocument.getElementById("headborder").style.transform="rotateZ("+headnum+"deg)";
	}
setInterval(head,2000);

.CSS

.headback{
				width: 1200px;
				height: 538px;
				position: relative;
				top: 50px;
				left: -6px;
				overflow: hidden;
				margin: 0 auto;
				border-radius: 12px;
			}
			.headborder{
				width: 0px;
				height: 0px;
				border-width: 720px;
				border-style: solid;
				border-top-color: #FEF6E1;
				border-left-color: #986C30;
				border-bottom-color: #EA0B43;
				border-right-color: #FFBF80;
				position: relative;
				top: -392px;
				left: -130px;
				transition: all 2s linear;
				transform: rotateZ(0deg);
			}
			.headimg{
				width: 1200px;
				height: 538px;
				position: absolute;
				top: 11px;
				left: 1px;
			}