html打造动画交互界面
Posted qianbo_insist
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html打造动画交互界面相关的知识，希望对你有一定的参考价值。
使用方式
1 使用svg
2 png图片
3 css3 动画
4 使用webgl
5 canvas
6 使用glsl
发现很多东西本身html 里面已经有了，关键是要熟悉和使用。现在先做基本的东西，等基本的创造好了，就可以打造科技界面了。读者请耐心等待
1 svg 圆
<svg width="300" height="180">
<circle cx="30" cy="50" r="10" />
<circle cx="90" cy="50" r="10" class="red" />
<circle cx="150" cy="50" r="10" class="fancy" />
</svg>
先打造一个基本界面，再使用动画来动起来
<svg width="400px" height="200px" id="testSvg">
<line x1="0" y1="0" x2="10" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="0" x2="0" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="0" x2="400" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="390" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="200" x2="0" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="200" x2="10" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="200" x2="400" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="200" x2="390" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
<circle cx="350" cy="100" r="20" fill="red" id="testCircle" class="text text-1"></circle>
</svg>
制作动画
1 、关键帧动画
围绕圆圈开始亮点旋转
.text
font-size: 64px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 2px;
stroke-dasharray: 90 310;
animation: stroke 6s infinite linear;
.text-1
stroke: #3498db;
text-shadow: 0 0 5px #3498db;
animation-delay: -1.5s;
@keyframes stroke
100%
stroke-dashoffset: -400;
线条开始围绕圆圈动画
2、 交互点击
<script type="text/javascript">
var circle = document.getElementById("testCircle");
circle.addEventListener("click", function (e)
console.log("Click circle ...");
circle.setAttribute("r", 25);
circle.setAttribute("fill","blue");
, false);
</script>
点击以后圆的半径放大到25
code
<!DOCTYPE html>
<html>
<head>
<title>webrtc sfu</title>
<style>
video
border: 1px solid black;
width: 640px;
height: 360px;
.local
border: 1px solid red;
width: 640px;
height: 360px;
.red
fill: red;
.fancy
fill: none;
stroke: black;
stroke-width: 3pt;
#testSvg
border: 1px solid #ccc;
.testSvg
border: 1px solid #ccc;
#testSvg circle
fill: red;
stroke: blue;
stroke-width: 1;
#svgBox
width:100%;
margin:100px auto;
.text
font-size: 64px;
font-weight: bold;
text-transform: uppercase;
fill: none;
stroke-width: 2px;
stroke-dasharray: 90 310;
animation: stroke 6s infinite linear;
.text-1
stroke: #3498db;
text-shadow: 0 0 5px #3498db;
animation-delay: -1.5s;
.text-2
stroke: #f39c12;
text-shadow: 0 0 5px #f39c12;
animation-delay: -3s;
.text-3
stroke: #e74c3c;
text-shadow: 0 0 5px #e74c3c;
animation-delay: -4.5s;
.text-4
stroke: #9b59b6;
text-shadow: 0 0 5px #9b59b6;
animation-delay: -6s;
@keyframes stroke
100%
stroke-dashoffset: -400;
</style>
</head>
<body>
<svg width="300" height="180">
<circle cx="30" cy="50" r="10" />
<circle cx="90" cy="50" r="10" class="red" />
<circle cx="150" cy="50" r="10" class="fancy" />
</svg>
<div id="svgBox">
<svg height="100">
<text text-anchor="middle" x="50%" y="50%" class="text text-1">观沧海</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-2">观沧海</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-3">观沧海</text>
<text text-anchor="middle" x="50%" y="50%" class="text text-4">观沧海</text>
</svg>
</div>
<svg width="400px" height="200px" id="testSvg">
<line x1="0" y1="0" x2="10" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="0" x2="0" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="0" x2="400" y2="10" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="390" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="200" x2="0" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="0" y1="200" x2="10" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="200" x2="400" y2="190" style="stroke:rgb(0,0,0);stroke-width:2" />
<line x1="400" y1="200" x2="390" y2="200" style="stroke:rgb(0,0,0);stroke-width:2" />
<circle cx="350" cy="100" r="20" fill="red" id="testCircle" class="text text-1"></circle>
</svg>
<br />
<!-- <svg width="600" height="600" class="testSvg">
<rect x="0" y="0" width="100" height="100" fill="#f06" />
<rect x="100" y="100" width="200" height="100" fill="black" />
</svg> -->
</body>
<script type="text/javascript">
var circle = document.getElementById("testCircle");
circle.addEventListener("click", function (e)
console.log("Click circle ...");
circle.setAttribute("r", 25);
circle.setAttribute("fill","blue");
, false以上是关于html打造动画交互界面的主要内容，如果未能解决你的问题，请参考以下文章