2024年大数据最新5个前端练手项目(html css js canvas)，字节跳动资深面试官亲述

本文链接：https://blog.csdn.net/2401_84181731/article/details/138461424

这篇博客介绍了四个前端项目，包括跑马灯、彩虹爱心、闹钟和自制笔记本，适用于不同水平的学习者。每个项目都详细解析了思路并提供了源码，涵盖HTML、CSS和JavaScript技术，适合前端开发者提升技能。

摘要由CSDN通过智能技术生成

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

1.跑马灯

1.1效果图：

1.2思路解析

在这个项目中，在html中创立20个span标签

每个span标签设置style为–i:数字的样式用于

在css中动态分配圆圈分几份，transform: rotate(calc(18deg*var(–i)))

利用filter属性结合关键帧动态切换颜色。同时设置每一个span标签进行

旋转

1.3源码

<style>
	* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	}
main{
	display: flex;
    background-color: #2c3a47;
	/*用于设置图像居中 */
	align-items: center;
	justify-content: center;
	width: 1920px;
	height: 1000px;
	animation: animate1 10s linear infinite;
	}
/* 用于设置动画属性 其中filter用于做利镜其中的hue-rotate属性让图像运用色相旋转*/
@keyframes animate1 {
	0% {
		filter: hue-rotate(0deg);
		}
	100% {
		filter: hue-rotate(360deg);
			}
		}
main .cube {
		position: relative;
		height: 120px;
		width: 120px;
	    }
main .cube span {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* 用于设置一个圆圈被分成几份 */
	transform: rotate(calc(18deg*var(--i)));
	}
	/* :before用于设置在给定的属性之前添加效果 */
main .cube span::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 15px;
		height: 15px;
		border-radius: 50%;
		background-color: aqua;
		box-shadow: 0 0 10px aqua ,0 0 20px aqua,0 0 40px aqua,0 0 80px aqua,0 0 100px aqua;
animation: animate 2s linear infinite;
		animation-delay: calc(0.1s*var(--i));
		}
@keyframes animate {
	0% {
		transform: scale(1);
		}
	80%,
	100% {
	    transform: scale(0);
		}
	}
.loading{
		color:#fff;
		font-size: 20px;
		position: relative;
		top:100px;
		right:100px;
          }
@media (min-width:765px){ 
			
	}

</style>
</head>
<body>
<main>
<div class="cube">
	<span style="--i:1;"></span>
	<span style="--i:2;"></span>
    <span style="--i:3;"></span>
	<span style="--i:4;"></span>
	<span style="--i:5;"></span>
	<span style="--i:6;"></span>
	<span style="--i:7;"></span>
	<span st