通过Web 编码示例培养技能
通过为各个级别的学习者设计的全面实用编码示例集来提高您的 Web 开发技能。探索各种编码技术，以提高您在 Web 开发方面的熟练程度和信心。
示例：HTML+CSS+JavaScript 实现 皮卡丘（Pikachu）
效果预览 
HTML
<body>
<div class="loading">
<img src="https://tmc-website-moban.oss-cn-beijing.aliyuncs.com/Snippets/pikachu/loading.gif" alt="Loading">
</div>
<div class="mouse original"></div>
</body>CSS
* {
cursor: none
}
body {
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.loading {
background-color: #ffffff;
display: fixed
}
.loading img {
display: block;
min-width: 200px;
min-height: 209px;
}
.mouse {
height: 25px;
width: 25px;
border-radius: 100%;
background-color: #fff782;
position: absolute;
animation: mouseAnimation .5s infinite ease-in-out alternate;
left: 0;
top: 0
}
@keyframes mouseAnimation {
from {
width: 25px;
height: 25px
}
to {
width: 15px;
height: 15px
}
}JavaScript
$(".loading").height($(window).height());
$(".loading").width($(window).width());
$(".loading img").css({
paddingTop: ($(".loading").height() - $(".loading img").height()) / 2,
paddingLeft: ($(".loading").width() - $(".loading img").width()) / 2
});
$(window).resize(function () {
"use strict";
$(".loading").height($(window).height());
$(".loading").width($(window).width());
$(".loading img").css({
paddingTop: ($(".loading").height() - $(".loading img").height()) / 2,
paddingLeft: ($(".loading").width() - $(".loading img").width()) / 2
});
});
$(window).mousemove(function (e) {
"use strict";
$(".original").css({
left: e.pageX - 16,
top: e.pageY - 16
});
});
$("body").on("click", function (e) {
"use strict";
$(".original").clone(true).appendTo("body").css({
left: e.pageX - 16,
top: e.pageY - 16
}).removeClass("original");
});
