5个前端练手项目(html css js canvas)

最新推荐文章于 2024-05-05 10:33:45 发布

drnrrwfs

最新推荐文章于 2024-05-05 10:33:45 发布

阅读量338

点赞数

分类专栏：面试学习路线阿里巴巴文章标签： android 前端后端

本文链接：https://blog.csdn.net/drnrrwfs/article/details/126098070

版权

本文提供了5个适合前端初学者的实战项目，包括跑马灯、彩虹爱心、闹钟、自制笔记本和自定义写字台。通过效果图、思路解析和源码分享，帮助学习者提升HTML、CSS和JavaScript技能。

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

前言：

首先祝大家端午节快乐。本篇文章有5个练手项目
对于刚学完前端三剑客的你们。应该是一个很好的实践

??.闹钟

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 style="--i:8;"></span>
	<span style="--i:9;"></span>
	<span style&#

最低0.47元/天解锁文章

drnrrwfs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
5个前端练手项目(html css js canvas)

搭建html结构,创建canvas标签，绑定设置的结构比如+，-，颜色改变动态设置并获取他的值，然后将这些值动态的设置为canvas语法中设置渲染的宽度，以及设置颜色的属性。
复制链接

扫一扫

专栏目录