SMIL编写一个动画效果代码
代码语言：html
所属分类：动画
代码描述：SMIL编写一个动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
body {
background: #030303;
}
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<svg viewbox='0 0 100 100' version='1.1' xmlns='http://www.w3.org/2000/svg'>
<defs>
<linearGradient id='gradient1' x1='0' y1='0' x2='0' y2='1'>
<stop offset='0%' stop-color='#ef476f' />
<stop offset='100%' stop-color='#ffd166' />
</linearGradient>
<linearGradient id='gradient2' x1='0' y1='0' x2='0' y2='1'>
<stop offset='0%' stop-color='#ffd166' />
<stop offset='100%' stop-color='#06d6a0' />
</linearGradient>
<linearGradient id='gradient3' x1='0' y1='0' x2='0' y2='1'>
<stop offset='0%' stop-color='#118ab2' />
<stop offset='100%' stop-color='#ef476f' />
</linearGradient>
<mask id='mask1'>
<g transform='translate(50, 50)'>
<g>
<animateTransform attributeType='XML' attributeName='transform' type='rotate' dur='8s' repeatCount='indefinite' values='0;90;180;270' calcMode='discrete' />
<g transform='translate(-50,-50)'>
<line x1='20' x2='20' y1='20' y2='20' stroke='#fff' stroke-width='20' stroke-linecap='round'>
<animate attributeName='x1' values='50;20;20;20;20;50;50;50;50' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1' dur='2s' repeatCount='indefinite' />
<animate attributeName='x2' values='50;20;80;80;80;80;80;50;50' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1' dur='2s' repeatCount='indefinite' />
<animate attributeName='y1' values='50;20;20;20;20;20;20;50;50' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1' dur='2s' repeatCount='indefinite' />
<animate attributeName='y2' values='50;20;20;20;20;20;20;50;50' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1' dur='2s' repeatCount='indefinite' />
<animate attributeName='stroke-width' values='40;20;15;15;15;15;15;40;40' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1' dur='2s' repeatCount='indefinite' />
</line>
</g>
</g>
</g>
</mask>
<mask id='mask2'>
<g transform='translate(50, 50)'>
<g>
<animateTransform attributeType='XML' attributeName='transform' type='rotate' dur='8s' repeatCount='indefinite' values='0;90;180;270' calcMode='discrete' />
<g transform='translate(-50,-50)'>
<line x1='50' x2='50' y1='50' y2='50' stroke='#fff' stroke-width='20' stroke-linecap='round'>
<animate attributeName='x1' values='50;50;50;20;80;80;80;50;50' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1' dur='2s' repeatCount='indefinite' />
<animate attributeName='x2' values='50;50;50;20;80;80;80;50;50' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1' dur='2s' repeatCount='indefinite' />
<animate attributeName='y1' values='50;50;50;80;80;20;20;50;50' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1' dur='2s' repeatCount='indefinite' />
<animate attributeName='y2' values='50;50;50;80;80;50;50;50;50' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1' dur='2s' repeatCount='indefinite' />
<animate attributeName='stroke-width' values='40;20;20;20;20;15;15;40;40' calcMode='spline' keySplines='0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0