css实现彩虹边框旋转动画效果代码

代码语言:html

所属分类:动画

代码描述:css实现彩虹边框旋转动画效果代码

代码标签: css 彩虹 边框 旋转 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
<style>
@property --a {
	syntax: '<angle>'; 
	initial-value: 0deg;
	inherits: false
}

html, body { display: grid }

html { height: 100% } /* full viewport height */

body { background: dimgrey }

.spinner {
	box-sizing: border-box; /* ensures padding is subtracted out of width */
	place-self: center; /* put in the middle of grid cell along both axes */
	width: min(100%, 18em); /* give it a width, but ensure no overflow */
	aspect-ratio: 1; /* make it a square box, 1/ 1 aspect ratio */
	padding: 1.25em;
	border-radius: 50%; /* turn square into disc */
	box-shadow: 2px 2px 17px #000.........完整代码请登录后点击上方下载按钮下载查看

网友评论0