生命之花动画效果

代码语言:html

所属分类:动画

代码描述:生命之花动画效果

代码标签: 效果

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
/* Globals */
html
, body {
 
margin: 0;
 
padding: 0;
 
height: 100%;
/*   background: #f8ffe6; */
 
background: #e9f4de;
 
text-align: center;
}

/* Center vertically and horizontally */
.table {
 
position: relative;
 
display: table;
 
width: 100%;
 
height: calc(100% - 87px);
 
padding-top: 20px;
 
z-index: 1;
}
.cell {
 
display: table-cell;
 
vertical-align: middle;
 
height: 100%;
}

svg path
, svg circle {
 
stroke: #420808;
}
</style>

</head>
<body translate="no">
<div class="table">
<div class="cell">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate; width: 100%; max-width: 512px;" viewBox="0 0 512 512" preserveAspectRatio="xMidYMin">
<g>
<circle cx="255.99999999999997" cy="256" r="226.13599967956546" fill="none" stroke-width="10" stroke="rgb(0,0,0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3" />
<g id="rLeft">
<path d=" M 256 29.864 C 193.596 29.864 142.932 80.528 142.932 142.932 C 142.932 205.336 193.596 256 256 256" fill="none" stroke-width="10" stroke="rgb(0,0,0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3" />
<path d=" M 29.864 256 C 29.864 318.404 80.528 369.068 142.932 369.068 C 205.336 369.068 256 318.404 256 256" fill="none" stroke-width="10" stroke="rgb(0,0,0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3" />
<path d=" M 256 256 C 256 193.596 306.664 142.932 369.068 142.932 C 431.472 142.932 482.136 193.596 482.136 256" fill="none" stroke-width="10" stroke="rgb(0,0,0)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3" />
<path d=" M 256 256 C 318.404 256 369.068 306.664 369.068 369.0.........完整代码请登录后点击上方下载按钮下载查看

网友评论0