机器人插件
本帖最后由 dof 于 2020-11-30 22:50 编辑曾经有一个梦想，拥有一部属于自己的机器人，没想到在开源社区已经有爱好者帮我们实现了，现在，你也可以在可视化大屏中放置一个属于你的机器人了。
特别说明：
该文章中的代码来自社区，大家在使用时应该遵守作者的使用协议。
使用步骤：
1、创建仪表板，添加外部扩展组件
2、编辑外部扩展的Html属性
3、将Html代码贴到编辑区域
<html>
<head>
<style>
/* Base Styles */
body {
background: #545454;
}
.container {
margin-top: 28px;
max-height: 560px;
overflow: hidden;
width: 100%;
}
/* SVG Styles */
#robot {
animation: fly-in 3s ease-out;
max-height: 560px;
width: 100%;
}
.arm,
.leg {
animation: dangle 3s cubic-bezier(0.57, 0.19, 0.25, 0.75) infinite;
transform-origin: 50% 0%;
}
.head {
animation: attach-head 3s linear;
}
.flame {
animation: flicker 0.35s linear infinite;
transform-origin: 50% 50%;
}
.lean {
animation: lean 3s linear;
transform-origin: 50% 0%;
}
.levitate {
animation: levitate 3s cubic-bezier(0.57, 0.19, 0.25, 0.75) infinite;
transform-origin: 50% 50%;
}
.smoke {
animation: smoke 0.25s linear infinite;
transform-origin: 50% 50%;
}
.smoke-group {
animation: track-levitate 3s cubic-bezier(0.57, 0.19, 0.25, 0.75) infinite;
animation-delay: 0.25s;
}
.delay-2 {
animation-delay: 0.06s;
}
.delay-3 {
animation-delay: 0.09s;
}
.delay-4 {
animation-delay: 0.12s;
}
.delay-5 {
animation-delay: 0.15s;
}
.delay-6 {
animation-delay: 0.18s;
}
.delay-7 {
animation-delay: 0.21s;
}
.delay-8 {
animation-delay: 0.24s;
}
.delay-9 {
animation-delay: 0.27s;
}
.delay-10 {
animation-delay: 0.3s;
}
@keyframes flicker {
0% {
transform: rotate(-1deg);
}
25% {
transform: rotate(1deg) scaleY(1.15);
}
50%, 100% {
transform: rotate(1deg);
}
75% {
transform: rotate(-2deg) scaleY(0.95);
}
}
@keyframes smoke {
from {
transform: scale(0.95);
}
to {
transform: scale(1.15);
}
}
@keyframes levitate {
from {
transform: rotate(0deg) translate(-15px) rotate(0deg);
}
to {
transform: rotate(360deg) translate(-15px) rotate(-360deg);
}
}
@keyframes track-levitate {
0%, 100% {
transform: translateX(-20px);
}
50% {
transform: translateX(0);
}
}
@keyframes dangle {
0%, 100% {
transform: rotate(0deg);
}
33% {
transform: rotate(10deg);
}
66% {
transform: rotate(-10deg);
}
}
@keyframes lean {
0%, 100% {
transform: rotate(0deg) translateX(0px);
}
20% {
transform: rotate(-30deg) translateX(-130px);
}
80% {
transform: rotate(-30deg) translateX(-130px);
}
}
@keyframes attach-head {
0%, 100% {
transform: translate(0px 0px);
}
20% {
transform: translate(-130px, 60px);
}
80% {
transform: translate(-130px, 60px);
}
}
@keyframes fly-in {
0% {
transform: translateX(2000px);
}
100% {
transform: translateX(0px);
}
}
</style>
</head>
<body>
<div class="container">
<svg id="robot" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 -10 960 570">
<g class="head">
<g class="levitate">
<!-- Top of Head -->
<path fill="#06C194" d="M480.5,9.545C436.011,9.545,400,45.61,400,90.1V166h161V90.1C561,45.61,524.989,9.545,480.5,9.545z"/>
<path fill="#16FFC6" d="M480,10h9.04c-2.807-0.296-5.654-0.455-8.54-0.455C436.011,9.545,400,45.61,400,90.1V166h80V10z"/>
</g>
</g>
<!-- Background Smoke -->
<g class="smoke-group">
<circle class="smoke delay-2" fill="#FAC784" cx="441" cy="484.667" r="22.167"/>
<circle class="smoke delay-3" fill="#FFD97F" cx="455" cy="510" r="42.5"/>
<circle class="smoke delay-4" fill="#FAC784" cx="508.258" cy="486.763" r="25.263"/>
</g>
<g class="lean">
<g class="levitate">
<!-- Jet Stream -->
<rect x="455" y="348" fill="#FFFBB5" width="54" height="163"/>
<polygon class="flame" fill="#FFD97F" points="469.333,328 493.667,328 481.63,460.667 "/>
<!-- Jet Pack -->
<g>
<rect x="442" y="276" fill="#CCCCCC" width="39" height="65"/>
<circle fill="#CCCCCC" cx="461.001" cy="277.087" r="19.427"/>
<rect x="481" y="276" fill="#CCCCCC" width="38" height="65"/>
<circle fill="#CCCCCC" cx="500.307" cy="277.087" r="19.427"/>
<polygon fill="#CCCCCC" points="508.885,348 454.731,348 468.616,335 494.998,335 "/>
</g>
<!-- Arms -->
<path class="arm" fill="none" stroke="#06C194" stroke-width="5" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d="
M434.833,320.333c0,0,0.143-8.807-0.911-32.76"/>
<path class="arm delay-4" fill="none" stroke="#06C194" stroke-width="5" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d="
M527.28,287.573c-1.054,23.953-0.911,32.76-0.911,32.76"/>
<!-- Shoulders -->
<circle fill="#16FFC6" cx="515.25" cy="279" r="17.75"/>
<circle fill="#16FFC6" cx="447.25" cy="279" r="17.75"/>
<!-- Body -->
<rect x="447" y="241" fill="#06C194" width="67" height="65"/>
<!-- Right Leg -->
<g class="leg">
<path fill="none" stroke="#06C194" stroke-width="5" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d="
M463.833,359.333c0,0,0.143-8.807-0.911-32.76"/>
<!-- Foot -->
<path fill="#16FFC6" d="M479.311,361.396c-8.956-6.462-21.476-4.682-28.235,4.143c-6.759,8.823-5.219,21.372,3.351,28.339
L479.311,361.396z"/>
</g>
<!-- Left Leg -->
<g class="leg delay-6">
<path fill="none" stroke="#06C194" stroke-width="5" stroke-linecap="square" stroke-linejoin="round" stroke-miterlimit="10" d="
M499.28,326.573c-1.054,23.953-0.911,32.76-0.911,32.76"/>
<!-- Foot -->
<path fill="#16FFC6" d="M510.386,393.843c8.519-7.028,9.965-19.592,3.139-28.363c-6.827-8.773-19.359-10.458-28.266-3.93
L510.386,393.843z"/>
</g>
<!-- Body -->
<circle fill="#06C194" cx="480.5" cy="305.5" r="33.5"/>
</g>
</g>
<!-- Smoke -->
<g class="smoke-group">
<circle class="smoke delay-8" fill="#FFD97F" cx="419" cy="517.193" r="22.193"/>
<circle class="smoke delay-6" fill="#FAC784" cx="555" cy="517.193" r="22.193"/>
<circle class="smoke delay-7" fill="#FFD97F" cx="527.28" cy="505.667" r="33.72"/>
<circle class="smoke delay-5" fill="#FFD97F" cx="485.251" cy="514.063" r="36.877"/>
</g>
<g class="head">
<g class="levitate">
<!-- Lower Jaw -->
<g>
<path fill="#16FFC6" d="M370.065,176c-0.001,0-0.004-0.065-0.004,0.028c0,48.908,44.819,88.43,100.106,88.43
c55.286,0,100.105-39.46,100.105-88.368c0-0.093-0.004-0.09-0.004-0.09H370.065z"/>
</g>
<!-- Eyes -->
<circle fill="#FFFFFF" stroke="#06C194" stroke-width="5" stroke-miterlimit="10" cx="480.235" cy="141.86" r="14.015"/>
<circle fill="#FFFFFF" stroke="#06C194" stroke-width="5" stroke-miterlimit="10" cx="444.377" cy="141.86" r="14.015"/>
</g>
</g>
</svg>
</div><!-- /.container -->
</body>
</html>
这时，你的仪表板就会有一个可爱的机器人了，我相信这个使用技巧，可以让你的仪表板变得更加个性，更加生动。
页:
[1]