您的位置：首页 > Web前端 > JavaScript

90行javascript代码写出盒阴影动画

2018-01-31 22:15 148 查看

这个盒阴影动画是没用使用布局的，稍后大家在源码上可以看到，css代码都只有几行，绝大部分代码都是javascript代码，而且是原生javascript书写的，下面我们来看一下效果源码。

文章分享之前小编推荐一下我的前端学习群：542827633，里面都是学习前端的，如果你想制作酷炫的网页，想学习前端知识，小编欢迎你的加入。小编会在群中不定期分享干货源码，包括我精心整理的一份前端教程。欢迎各位感兴趣的的小伙伴。

<!doctype html>
<html>
<head>

<meta charset="UTF-8">

<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="描述">
<title>网页的标题</title>

<style>
* {
padding: 0;
margin: 0;
}

body {
height: 100%;
font-size: 16px;
background-color: black;
}

body::before {
content: "";
width: 2px;
height: 2px;
border-radius: 50%;
position: absolute;
background-color: hsl(90, 100%, 50%);
-webkit-animation: testAnimacion 5s ease-in-out infinite alternate-reverse;
animation: testAnimacion 5s ease-in-out infinite alternate-reverse;
}
</style>
</head>
<body>
<script>
var s = document.createElement("style");
document.head.appendChild(s);

var cx = window.innerWidth / 2;
var cy = window.innerHeight / 2;
var rad = Math.PI / 180;

var R = 150,
r = R / 16,
kx = 5,
ky = 6,
phi = Math.PI / 2,
x,
y,
t;

function pointOnLemniscate() {
(x = (R * Math.cos(t) / (1 + Math.sin(t) * Math.sin(t))).toFixed(
5
)), (y = (R *
Math.sin(t) *
Math.cos(t) /
(1 + Math.sin(t) * Math.sin(t))).toFixed(5));
return (o = {
x: x,
y: y
});
}

function pointOnLissajous() {
x = (R * Math.sin(kx * t + phi)).toFixed(5);
y = (R * Math.sin(ky * t)).toFixed(5);
return (o = {
x: x,
y: y
});
}

function pointOnHeart() {
x = (16 * r * (Math.sin(t) * Math.sin(t) * Math.sin(t))).toFixed(5);
y = (-13 * r * Math.cos(t) +
5 * r * Math.cos(2 * t) +
2 * r * Math.cos(3 * t) +
r * Math.cos(4 * t)).toFixed(5);
return (o = {
x: x,
y: y
});
}

function getShadow(pointOnCurve) {
var boxShadowRy = [];
for (var a = 0; a < 360; a += 0.5) {
t = a * rad;
var o = pointOnCurve();
boxShadowRy.push(
o.x + "px" + " " + o.y + "px" + " 0px 1px hsl(" + a + ",100%,50%)"
);
}
var boxShadowStr = boxShadowRy.join();
return boxShadowStr;
}

s.textContent = "body::before{";
s.textContent += "left:" + cx + "px;";
s.textContent += "top:" + cy + "px;";
s.textContent += "box-shadow:" + getShadow(pointOnLissajous);
s.textContent += "}";

var vendors = [/*'-ms-', '-moz-',*/ "-webkit-", /*'-o-',*/ ""];
for (var i = 0; i < vendors.length; i++) {
s.textContent += "@" + vendors[i] + "keyframes testAnimacion {";
s.textContent +=
"50% {" +
vendors[i] +
"box-shadow:" +
getShadow(pointOnLemniscate) +
";background-color:hsl(90,100%,50%);}";
s.textContent += "55% {background-color:transparent;}";
s.textContent +=
"100% {" +
vendors[i] +
"box-shadow:" +
getShadow(pointOnHeart) +
";background-color:transparent;}";
s.textContent += "}";
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端源码动画布局 javascript

相关文章推荐

新的分享

章节导航