100个div线条旋转动画效果

代码语言:html

所属分类:动画

代码描述:100个div线条旋转动画效果

代码标签: 旋转 动画 效果

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


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

<head>

  <meta charset="UTF-8">
  

  
<style>
html, body {
  background: black;
  height: 100%;
  overflow: hidden;
}

:root {
  --rot: 0deg;
}

div {
  border: 1px solid rgba(255, 105, 180, 0.8);
  height: calc(100% - 0.5vh);
  left: 50%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.97);
          transform: translate(-50%, -50%) rotate(var(--rot)) scale(0.97);
  width: calc(100% - 0.5vw);
}
</style>




</head>

<body translate="no" >
  <div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><.........完整代码请登录后点击上方下载按钮下载查看

网友评论0