svg+js实现无数种雪花变种随机效果代码

代码语言:html

所属分类:其他

代码描述:svg+js实现无数种雪花变种随机效果代码,点击可切换

代码标签: svg js 无数种 雪花 变种 随机

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

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

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

 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
 
 
<style>
/* Reset styles */
* {
 
margin: 0;
 
padding: 0;
 
box-sizing: border-box;
}

html
, body {
 
height: 100%;
}

body
{
 
display: flex;
 
justify-content: center;
 
align-items: center;
 
margin: 0;
 
font-family: sans-serif;
       
margin: 0;
       
background: linear-gradient(blue, darkblue 20%, #111122);
       
overflow: hidden;
       
height: 100vh;
}

.container {
 
display: flex;
 
flex-wrap: wrap;
 
width: 100%;
 
height: 100%;
}

.box {
 
display: flex;
 
justify-content: center;
       
position: relative;
 
align-items: center;
 
flex: 1 0 20%; /* Flex-basis is 25% for 4 columns */
 
height: calc(100% / 7); /* Optional, explicitly divides rows */
}

.box > svg {
 
max-width: 100%;
 
max-height: 100%;
       
position: absolute;
       
animation: rotat 10000ms linear infinite;
       
transition: 1000ms;
}
@keyframes rotat {
       
0% {
               
transform: rotate(0deg);
       
}
       
100% {
               
transform: rotate(360deg);
       
}
}
@keyframes rotat2 {
       
0% {
               
transform: rotate(0deg);
       
}
       
100% {
               
transform: rotate(-360deg);
       
}
}
</style>

 
 
</head>

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

网友评论0