nothing: Eye Blink

<div style="text-align:center">
<svg id="svgFive" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<defs>
<linearGradient id="svg_4">
<stop offset="0" stop-opacity="1" stop-color="#000000"/>
<stop offset="0.5" stop-color="#00ffff"/>
<stop offset="1" stop-opacity="1" stop-color="#000000"/>
</linearGradient>
</defs>
<g>
<rect width="500" height="500" fill="url(#svg_4)"/><rect width="500" height="500" x="500" fill="url(#svg_4)"/>
<animateMotion from="0,0" to="-500,0" begin="0s" dur="3s" repeatcount="indefinite"/>
</g>
<image xlink:href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiab4mNRLCrSqP9rqkU6GG3F2zXcQnkRD9SfPkfv3nG9hyphenhyphen12iBS96j8PLgdxaQQ_6YvHs8QPlFqP7C-nyrd_3hvv8W6ePYdxwNeXK7Zpvhc25O4nSSUwWRr914BbemqQceo_8YP2X8jiQ/s500-no/" width="500" height="500"/>
</svg>
<br/>
<button onclick="myFunction5()">Start !</button>
</div>

<script>

function myFunction5() {
var svgns = "http://www.w3.org/2000/svg";
for (var i = 0; i < 2; i++) {
var r = Math.random() * 50; var strokewidth = Math.random() * 30;
var strokedash = Math.random() * 40;

var circle = document.createElementNS(svgns, 'circle');
circle.setAttributeNS(null, 'id', 'roll11');
circle.setAttributeNS(null, 'r', r);
circle.setAttributeNS(null, 'fill', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
circle.setAttributeNS(null, 'opacity', '0.75');
circle.setAttributeNS(null, 'stroke', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
circle.setAttributeNS(null, 'stroke-width', strokewidth);
circle.setAttributeNS(null, 'stroke-dasharray', strokedash);
document.getElementById('svgFive').appendChild(circle);

var circle = document.createElementNS(svgns, 'circle');
circle.setAttributeNS(null, 'id', 'roll22');
circle.setAttributeNS(null, 'r', r);
circle.setAttributeNS(null, 'fill', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
circle.setAttributeNS(null, 'opacity', '0.75');
circle.setAttributeNS(null, 'stroke', '#'+Math.round(0xFFFFFF * Math.random()).toString(16));
circle.setAttributeNS(null, 'stroke-width', strokewidth);
circle.setAttributeNS(null, 'stroke-dasharray', strokedash);
document.getElementById('svgFive').appendChild(circle);

}}

</script>

<style>

#roll11 {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transform: translate3d( 145px, 215px, 0px );
-moz-transform: translate3d( 145px, 215px, 0px );
-ms-transform: translate3d( 145px, 215px, 0px );
transform: translate3d( 145px, 215px, 0px ) rotate(0deg) scale(1, 1);
}

#roll11:hover {
-webkit-transform: translate3d( 145px, 215px, 0px ) rotate(180deg);
-moz-transform: translate3d( 145px, 215px, 0px ) rotate(180deg);
-ms-transform: translate3d( 145px, 215px, 0px ) rotate(180deg);
transform: translate3d( 145px, 215px, 0px ) rotate(180deg) scale(2, 2);
}

#roll22 {
-webkit-transition: 0.5s ease-in-out;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transform: translate3d( 355px, 215px, 0px );
-moz-transform: translate3d( 355px, 215px, 0px );
-ms-transform: translate3d( 355px, 215px, 0px );
transform: translate3d( 355px, 215px, 0px ) rotate(0deg) scale(1, 1);
}

#roll22:hover {
-webkit-transform: translate3d( 355px, 215px, 0px ) rotate(-180deg);
-moz-transform: translate3d( 355px, 215px, 0px ) rotate(-180deg);
-ms-transform: translate3d( 355px, 215px, 0px ) rotate(-180deg);
transform: translate3d( 355px, 215px, 0px ) rotate(-180deg) scale(2, 2);
}

</style>

mardi 24 janvier 2017

Eye Blink