java制作个动态奥运五环_CSS和JS实现动态华丽的奥运五环

CSS和JS实现动态华丽的奥运五环效果预览

实现方法

HTML代码

CSS代码html,

body {

width: 100%;

height: 100%;

margin: 0;

padding: 0;

}

body {

background: #8e9eab;

background: linear-gradient(toleft,#8e9eab, #eef2f3);

font-family: 'Raleway',sans-serif;

}

.container {

display: flex;

align-items: center;

justify-content: center;

height: 100%;

width: 100%;

}

.all {

fill: none;

stroke-miterlimit: 10;

stroke-width: 5px;

stroke: none;

}

JS代码

1.引用「TweenMax.min.js」，点击下载TweenMax.min.js

2.添加js脚本var count = 5;

var circles = [];

var lines = [];

var colors = ['#0084c7', '#f2c418', '#000', '#00a24a', '#e01e26'];

var reverse = [false, false, false, true, true];

for (var i = 1; i <= count; i++) {

var circle = document.getElementById("c" + i);

var circleLength = circle.getTotalLength();

circle.style.strokeDasharray = circleLength + ' ' + circleLength;

circle.style.stroke = colors[i - 1];

circles.push({

node: circle,

length: circleLength

});

var path = document.getElementById("p" + i);

var pathLength = path.getTotalLength();

path.style.strokeDasharray = circleLength + ' ' + pathLength;

lines.push({

node: path,

length: pathLength

})

}

var speed = 2.5;

var delay = speed - 0.12;

var delayStep = 0.2;

animate();

document.onclick = animate;

function animate() {

TweenMax.killAll();

for (var i = 0; i 

var path = lines[i].node;

var stagger = i * delayStep;

path.style.strokeDashoffset = lines[i].length;

path.style.stroke = '#fff'; //colors[i];

path.style.opacity = 0;

path.style.strokeWidth = Math.random() * 15;

TweenMax.to(path, speed, {

delay: stagger,

stroke: colors[i],

strokeWidth: 5,

opacity: 1,

strokeDashoffset: -lines[i].length,

ease: Power1.easeIn

});

var circle = circles[i].node;

circle.style.strokeDashoffset = reverse[i] ? -circles[i].length : circles[i].length

TweenMax.to(circle, speed / 4, {

delay: stagger + delay,

strokeDashoffset: 0,

ease: Power2.easeOut

});

}

}

附件下载