demote / hide / spam
【每日一练】88—1024程序员节文本动画效果的实现
写在前面
今天我过节,今天我最大,哈哈~
今天是10月24日,是程序员们自定义的程序员节日,因此,今天我们就用代码来实现一个“10.24-做程序员快乐!”的文本节日效果,最终效果如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>【每日一练】88—1024程序员节文本动画效果的实现</title>
</head>
<body>
<section>
<h2>做程序员快乐!<br><span>10.24</span></h2>
</section>
<script type="text/javascript">
function stars() {
var count = 200;
var section = document.querySelector('section');
var i = 0;
while (i < count) {
var star = document.createElement("i");
var x = Math.floor(Math.random() * window.innerWidth);
var y = Math.floor(Math.random() * window.innerHeight);
var duration = Math.random() * 2;
var size = Math.random() * 4;
star.style.left = x+'px';
star.style.top = y+'px';
star.style.width = 1+size+'px';
star.style.height = 1+size+'px';
star.style.animationDelay = duration+'s';
star.style.animationDuration = 2+duration+'s';
section.appendChild(star);
i++;
}
};
stars();
</script>
</body>
</html>
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body
{
overflow: hidden;
}
section
{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg,#111,#222,#111);
}
section:before
{
content: '';
position: absolute;
width: 30vw;
height: 30vw;
border: 5vw solid #EAEAEA;
border-radius: 50%;
box-shadow: 0 0 0 1vw #222,
0 0 0 1.3vw #fff;
}
h2
{
position: absolute;
font-size: 8vw;
color: #00a6bc;
font-weight: initial;
text-align: center;
line-height: 2em;
z-index: 5;
transform: skewY(-7deg);
text-shadow: 1px 1px 0 #ccc,
2px 2px 0 #ccc,
3px 3px 0 #ccc,
4px 4px 0 #ccc,
5px 5px 0 #ccc,
10px 10px 0px rgba(0,0,0,.2);
animation: floating 5s ease-in-out infinite;
}
@keyframes floating
{
0%,100%
{
transform: skewY(-7deg) translate(0px,-20px);
}
50%
{
transform: skewY(-7deg) translate(0px,20px);
}
}
h2 span
{
font-weight: 700;
font-size: 3em;
text-shadow: 1px 1px 0 #ccc,
2px 2px 0 #ccc,
3px 3px 0 #ccc,
4px 4px 0 #ccc,
5px 5px 0 #ccc,
6px 6px 0 #ccc,
7px 7px 0 #ccc,
8px 8px 0 #ccc,
9px 9px 0 #ccc,
10px 10px 0 #ccc,
20px 20px 0px rgba(0,0,0,.2);
}
section i
{
position: absolute;
background: #000;
border-radius: 100%;
background: #00a6bc;
animation: animate linear infinite;
box-shadow: 0 0 10px #00a6bc,
0 0 20px #00a6bc,
0 0 40px #00a6bc,
0 0 80px #00a6bc;
}
@keyframes animate
{
0%
{
opacity: 0;
}
10%
{
opacity: 1;
}
90%
{
opacity: 1;
}
100%
{
opacity: 0;
}
}
写在最后
以上就是我今天跟你分享的【每日一练】全部内容,希望今天的小练习你会喜欢,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。
我是杨小爱,我们明天见。
学习更多技能
请点击下方公众号