svg+css实现齿轮旋转动画效果代码-html代码-BFW代码库

svg+css实现齿轮旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：svg+css实现齿轮旋转动画效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        body {
        	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Cdefs%3E%3Cpattern id='sGrid' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='%23fff' stroke-width='0.3' stroke-opacity='0.5' /%3E%3C/pattern%3E%3Cpattern id='mGrid' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Crect width='100' height='100' fill='url(%23sGrid)' /%3E%3Cpath d='M 100 0 L 0 0 0 100' fill='none' stroke='%23fff' stroke-width='2' stroke-opacity='0.2' /%3E%3C/pattern%3E%3Cpattern id='lGrid' width='200' height='200' patternUnits='userSpaceOnUse'%3E%3Crect width='200' height='200' fill='url(%23mGrid)' /%3E%3Cpath d='M 200 0 L 0 0 0 200' fill='none' stroke='%23fff' stroke-width='2' stroke-opacity='0.2' /%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='%230071b8' /%3E%3Crect width='100%25' height='100%25' fill='url(%23lGrid)' /%3E%3C/svg%3E");
        	height:100vh;
        	margin:0 auto;
        	overflow:hidden;
        }
        .gear2, .gear2-2, .gear3, .gear4, .gear9, .gear9-2{
        	position:absolute;
        	top:50%;
        	left:50%;
        	height:1000px;
        	width:1000px;
        }
        .gear2{
        	left: calc(50% + 100px);
        	top: calc(50% + 92.5px);
        }
        .gear2.pos2{
        	left: calc(50% - 100px);
        	top: calc(50% - 92.5px);
        	animation-delay:-850ms;
        }
        .gear3{
        	animation-duration:3s;
        }
        .gear9{
        	left: calc(50% + 100px);
        }
        .gear9.pos2{
        	left: calc(50% - 100px);
        }
        .spin2{
        	animation:spinIt;
        	animation-duration:2s;
        	animation-iteration-count:infinite;
        	animation-timing-function:linear;
        	animation-delay:-350ms;
        }
        .spin3{
        	animation:spinIt;
        	animation-duration:3s;
        	animation-iteration-count:infinite;
        	animation-timing-function:linear;
        	animation-delay:-100ms;
        }
        .spin9{
        	animation:spinIt2;
        	animation-duration:9s;
        	animation-iteration-count:infinite;
        	animation-timing-function:linear;
        }
        @keyframes spinIt{
        	0%{transform:translate(-50%,-50%) rotate(0deg)}
        	100%{transform:translate(-50%,-50%) rotate(360deg)}
        }
        @keyframes spinIt2{
        	0%{transform:translate(-50%,-50%) rotate(0deg)}
        	100%{transform:translate(-50%,-50%) rotate(-360deg)}
        }
    </style>


</head>

<body>
    <svg class="gear3 spin3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000">
	<path d="M 515.00, 500.00 513.79,505.90 521.63,512.53 525.21,524.28 508.23,534.02 499.89,525.00 498.13,514.88 492.50,512.99 488.00,509.00 478.33,512.47 466.37,509.70 466.42,490.13 478.40,487.41 488.04,490.94 492.50,487.01 49.........完整代码请登录后点击上方下载按钮下载查看