掘金制作人们大家好,我是练习css时长两年半的个人练习生ikun,喜欢html,css,js……在今后的日子中,我还准备了很多我自己的原创作品,期待的话,请多多为我在码上掘金编程挑战赛投票吧。
灵感源于B站一则ikun牌手表的视频。
先看下项目的最终效果:
开发时钟
简单时钟
时钟的基本结构如下
//DOM
<div class="clock">
<div class="hours">
<div class="hour" id="hour"></div>
</div>
<div class="minutes">
<div class="minute" id="minute"></div>
</div>
<div class="seconds">
<div class="second" id="second"></div>
</div>
</div>
// JS
const deg = 6;
const hr = document.querySelector('#hour');
const mn = document.querySelector('#minute');
const sc = document.querySelector('#second');
setInterval(()=>{
let day = new Date();
let hh = day.getHours() * 30; //当前Hour
let mm = day.getMinutes() * deg; //当前Minute
let ss = day.getSeconds() * deg; //当前Second
hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
mn.style.transform = `rotateZ(${mm}deg)`;
sc.style.transform = `rotateZ(${ss}deg)`;
});
//CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #282828;
}
.clock{
display: flex;
width: 400px;
height: 400px;
justify-content: center;
align-items: center;
border: 4px solid #191919;
border-radius: 50%;
box-shadow: -4px -4px 10px rgba(67, 67, 67, .5),
inset 4px 4px 10px rgba(0, 0, 0, .5),
inset -4px -4px 10px rgba(67, 67, 67, .3);
}
.clock::before{
content: '';
position: absolute;
width: 15px;
height: 15px;
background: rgb(245, 245, 0);
border-radius: 50%;
z-index: 999;
}
.clock .hours,
.clock .minutes,
.clock .seconds{
position: absolute;
}
.clock .hours, .hour{
width: 160px;
height: 160px;
}
.clock .minutes, .minute{
width: 190px;
height: 190px;
}
.clock .seconds, .second{
width: 230px;
height: 230px;
}
.hour, .minute, .second{
display: flex;
justify-content: center;
position: absolute;
border-radius: 50%;
}
.hour::before{
content: '';
position: absolute;
width: 8px;
height: 80px;
background: #ff0080;
border-radius: 6px 6px 0 0;
z-index: 9;
}
.minute::before{
content: '';
position: absolute;
width: 4px;
height: 90px;
background: #6ec5ff;
border-radius: 6px 6px 0 0;
z-index: 10;
}
.second::before{
content: '';
position: absolute;
width: 2px;
height: 150px;
background: #fa0000;
border-radius: 6px 6px 0 0;
z-index: 11;
}
实现基本效果:
添加刻度盘
/* DOM */
<div class="clock" id="clock">
<ul class="line-min"></ul>
<ul class="line-hour"></ul>
<div class="hours">
<div class="hour" id="hour"></div>
</div>
<div class="minutes">
<div class="minute" id="minute"></div>
</div>
<div class="seconds">
<div class="second" id="second"></div>
</div>
<div id="ballWrapper">
<div id="ball"><span id="ballshad"></span>
</div>
</div>
</div>
/* JS */
function drawLines(className, total, translateX) {
const gap = 360 / total;
let strHtml = '';
for (let i = 0; i < total; i++) {
strHtml += `<li style="transform:rotate(${i * gap}deg) translate(${translateX}px,-50%);"></li>`;
}
const wrap = document.getElementsByClassName(className)[0];
wrap.innerHTML = strHtml;
}
drawLines('line-min', 60, 185);
drawLines('line-hour', 12, 175);
/* CSS */
/* 刻度盘 */
.line-hour li,
.line-min li {
position: absolute;
left: 50%;
top: 50%;
transform-origin: left center;
background-color: #FFF;
list-style: none;
}
.line-hour li {
width: 16px;
height: 2px;
}
.line-min li {
width: 5px;
height: 2px;
}
实现效果:
模式一:背带异常模式
名词解释
背带异常模式,顾名思义,即kunkun背上的背带错位,导致异常。kunkun的三条背带正好对应时钟的时、分、秒三指针。而背带裤中间棕色的🔗正对应时钟的中心点。
素材制作
首先呢,我们需要一张kunkun的背影图片。我截取了一张b站的高清图片, 当作背景图 再从背景图中截取一张小图,通过PS把背带P掉,当作时钟的背景图。 分别给Clock盒子和他的父盒子添加上这两张图片,调整下合适的位置,更换一下背带的颜色。大功告成! 效果如下:
模式二:铁山靠+篮球
模式一中的kunkun有些呆,我想让其动起来,能释放铁山靠的绝技,最好可以和篮球结合在一起,以此为开发思路。
名词解释
铁山靠是ikun必学技能之一,是通过腰腹力量连续两次作出顶肩动作,短短数秒的时间能爆发出巨大威力。
素材制作
铁山靠需要我们把背景图做成gif来进行播放,而制作gif的方案之一是通过帧转gif。我们首先在b站高清视频中截取数张图片,在这里我截取了14张。 将其导入PS,并将每张图片的背带P掉。 图片批量导出,通过gif制作网站生成gif。 将其替换掉clock的背景图。 效果如下:
篮球
思路:在铁山靠的时候将篮球顶出,反弹回来后,再通过铁山靠顶出。
/* DOM*/
<div class="container">
<div class="clock" id="clock">
<ul class="line-min"></ul>
<ul class="line-hour"></ul>
<div class="hours">
<div class="hour" id="hour"></div>
</div>
<div class="minutes">
<div class="minute" id="minute"></div>
</div>
<div class="seconds">
<div class="second" id="second"></div>
</div>
/* 篮球 */
<div id="ballWrapper">
<div id="ball"><span id="ballshad"></span>
</div>
</div>
</div>
</div>
/* CSS */
/* 篮球 */
#ballWrapper {
width: 300px;
height: 100px;
display: block;
position: absolute;
cursor: pointer;
right: -240px;
top: 150px;
}
#ball {
width: 70px;
height: 70px;
position: relative;
animation: jump 1s infinite;
overflow: hidden;
}
#ball:after {
content: "";
width: 70px;
height: 70px;
border-radius: 100%;
background: url("./ball.svg");
position: absolute;
animation: rotate 2s infinite, back 1s infinite;
z-index: 5;
background-repeat: repeat;
background-size: cover;
animation-timing-function: linear;
}
@keyframes jump {
0% {
right: 0px;
transform: scale3d(1.3, .8, 1);
border-radius: 100%;
animation-timing-function: ease-out;
}
5% {
transform: scale3d(1, 1, 1);
}
45% {
transform: scale3d(1, 1, 1);
}
50% {
right: -300px;
animation-timing-function: ease-in;
transform: scale3d(1, 1, 1);
}
60% {
transform: scale3d(.8, 1.1, 1);
}
70% {
transform: scale3d(.95, 1.05, 1);
}
72% {
transform: scale3d(1, 1, 1);
}
100% {
transform: scale3d(1, 1, 1);
right: 0px;
border-radius: 100%;
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
实现效果:
模式三:背带正常模式
背带裤正常模式,即在一个特定的时间点,时分秒针和显示中背带角度重合。经过测试这个时间是14:56:31,因此该模式下只需调整js内容即可。
模式切换
思路来源: 做三个按钮,来回切换实现水波纹的效果。具体实现可以参考这篇文章:听说这个动效可以玩一天
实现效果:
项目体验
https://code.juejin.cn/pen/7161794013429760007