Skip to content

Instantly share code, notes, and snippets.

/index.html

Created Apr 3, 2017
Embed
What would you like to do?
// source //code.h5jun.com/bew/1
<style id="jsbin-css">
#long {
opacity: 0;
animation-name: show;
animation-delay: .5s;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes show {
to {
opacity: 1;
}
}
#N {
animation-name: N-move;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes N-move {
to {
transform: translateX(-328px) translateY(0px);
}
}
#P {
animation-name: P-move;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes P-move {
to {
transform: translateX(-177px) translateY(0px);
}
}
#M {
animation-name: M-move;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes M-move {
to {
transform: translateX(93px) translateY(0px);
}
}
</style>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="823px" height="100px" viewBox="0 0 823 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="animation" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" font-size="72" font-family="PingFangSC-Semibold, PingFang SC" font-weight="500">
<g id="long" fill="#DDDDDD">
<text id="Node">
<tspan x="0" y="76">Node</tspan>
</text>
<text id="Package">
<tspan x="204" y="76">Package</tspan>
</text>
<text id="Manager">
<tspan x="522" y="76">Manager</tspan>
</text>
<text id="pos-N">
<tspan x="0" y="76">N</tspan>
</text>
<text id="pos-P">
<tspan x="204" y="76">P</tspan>
</text>
<text id="pos-M">
<tspan x="522" y="76">M</tspan>
</text>
</g>
<g id="short" transform="translate(328, 0)" fill="#FF0000">
<text id="N">
<tspan x="0" y="76">N</tspan>
</text>
<text id="P">
<tspan x="53" y="76">P</tspan>
</text>
<text id="M">
<tspan x="101" y="76">M</tspan>
</text>
</g>
</g>
</svg>
<script id="jsbin-javascript">
// var style = `
// #long {
// animation-name: show;
// animation-delay: .5s;
// animation-duration: .5s;
// animation-fill-mode: forwards;
// animation-iteration-count: 1;
// animation-timing-function: ease;
// }
// `;
// style += ['N', 'P', 'M'].map(function(item) {
// var start = document.querySelector('#'+item).getClientRects()[0];
// var end = document.querySelector('#pos-'+item).getClientRects()[0];
// return `
// #${item} {
// animation-name: ${item}-move;
// animation-duration: .5s;
// animation-fill-mode: forwards;
// animation-iteration-count: 1;
// animation-timing-function: ease;
// }
// @keyframes ${item}-move {
// to {
// transform: translateX(${(end.left - start.left)}px) translateY(${(end.top - start.top)}px);
// }
// }
// `;
// }).join('');
// console.log(style);
</script>
<script id="jsbin-source-css" type="text/css">#long {
opacity: 0;
animation-name: show;
animation-delay: .5s;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes show {
to {
opacity: 1;
}
}
#N {
animation-name: N-move;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes N-move {
to {
transform: translateX(-328px) translateY(0px);
}
}
#P {
animation-name: P-move;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes P-move {
to {
transform: translateX(-177px) translateY(0px);
}
}
#M {
animation-name: M-move;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes M-move {
to {
transform: translateX(93px) translateY(0px);
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// var style = `
// #long {
// animation-name: show;
// animation-delay: .5s;
// animation-duration: .5s;
// animation-fill-mode: forwards;
// animation-iteration-count: 1;
// animation-timing-function: ease;
// }
// `;
// style += ['N', 'P', 'M'].map(function(item) {
// var start = document.querySelector('#'+item).getClientRects()[0];
// var end = document.querySelector('#pos-'+item).getClientRects()[0];
// return `
// #${item} {
// animation-name: ${item}-move;
// animation-duration: .5s;
// animation-fill-mode: forwards;
// animation-iteration-count: 1;
// animation-timing-function: ease;
// }
// @keyframes ${item}-move {
// to {
// transform: translateX(${(end.left - start.left)}px) translateY(${(end.top - start.top)}px);
// }
// }
// `;
// }).join('');
// console.log(style);</script>
#long {
opacity: 0;
animation-name: show;
animation-delay: .5s;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes show {
to {
opacity: 1;
}
}
#N {
animation-name: N-move;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes N-move {
to {
transform: translateX(-328px) translateY(0px);
}
}
#P {
animation-name: P-move;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes P-move {
to {
transform: translateX(-177px) translateY(0px);
}
}
#M {
animation-name: M-move;
animation-duration: .5s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease;
}
@keyframes M-move {
to {
transform: translateX(93px) translateY(0px);
}
}
// var style = `
// #long {
// animation-name: show;
// animation-delay: .5s;
// animation-duration: .5s;
// animation-fill-mode: forwards;
// animation-iteration-count: 1;
// animation-timing-function: ease;
// }
// `;
// style += ['N', 'P', 'M'].map(function(item) {
// var start = document.querySelector('#'+item).getClientRects()[0];
// var end = document.querySelector('#pos-'+item).getClientRects()[0];
// return `
// #${item} {
// animation-name: ${item}-move;
// animation-duration: .5s;
// animation-fill-mode: forwards;
// animation-iteration-count: 1;
// animation-timing-function: ease;
// }
// @keyframes ${item}-move {
// to {
// transform: translateX(${(end.left - start.left)}px) translateY(${(end.top - start.top)}px);
// }
// }
// `;
// }).join('');
// console.log(style);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.