我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛
开篇
看到一个同僚写的文,一个日历一样的创意作品获了那么多阅读点赞,啧啧啧,牛。我也要搞一个,当然我要写跟他不一样的日历,,也就是本文的卯兔万年历。这可不是改个名字那么简单哦,里面增加了好多的创意元素(搞怪元素)。
话不多说,效果图走一波儿~
声明一下,今天的青训营50天打卡活动的推荐阅读文给我很大的灵感,也教会我许多好玩的css知识,现在就灵活的运用他吧
思路
首先依然是布局,这没什么好说的懂得都懂,之后就是右边的小兔子日历了,注意看,他下面可是水汪汪的,有一种倒影的感觉,当然这个效果归功于-webkit-box-reflect
这个属性,后面我会单独说一下,其他的布局就看各位的喜好了。之后是左边那个地方,本来是想着用background-clip: text;
来实现,结果没承想并不适合我背景放置视频。于是乎转移了一个思路,用了个类似于蒙层的效果,使用了mix-blend-mode: screen;
这个属性来解决文字里是视频的效果。然后时间变化就是老生常谈的问题了。
HTML
基本布局正如思路里讲的那样,一样就可以看出怎么布局
<div class="tu">
<video autoplay muted loop>
<source src="./video.mp4" type="video/mp4">
</video>
<h2>卯兔</h2>
</div>
<div id="time">
<img src="./rabbit.png" alt="">
<div>
<span id="year">0000</span><span>Year</span>
</div>
<div>
<span id="hours">00</span><span>Hours</span>
</div>
<div>
<span id="minutes">00</span><span>Minutes</span>
</div>
<div>
<span id="seconds">00</span><span>Seconds</span>
</div>
</div>
这里没什么好讲的,主要是css新属性的掌握与理解。
css
重要的属性使用方法如下代码所展示的那样。
div {
position: relative;
margin: 0 5px;
-webkit-box-reflect:below 1px linear-gradient(transparent, #0004)
}
h2{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-align: center;
font-weight: bold;
background-color: white;
line-height: 1.3;
font-size: 15vw;
color: #000;
mix-blend-mode: screen;
}
-webkit-box-reflect,,它可以跟三个值,第一个是方位,below | above | left | right 代表下上左右;第二个值表示倒影与源元素间隔的大小;第三个就是渐变了,利用这个渐变值,可以实现倒影的一个虚化效果。
mix-blend-mode,,这个元素的值很多很复杂,主要是跟ps一样,是一个混合模式的一个属性。一句两句说不清,但要掌握它也需要很多的联系,值太多太杂了。教程参考: CSS mix-blend-mode 属性 | 菜鸟教程 (runoob.com)
js
这就是老生常谈的问题了,简单的获取时间并填充。不多赘述了。
let year = document.getElementById('year')
let y = new Date().getFullYear()
hours.innerHTML = turn(h)
到此,卯兔万年历就基本成型了。 我也同步在码上掘金上发布了这个代码,喜欢的话可以去看看。兔了个兔(五) - 码上掘金 (juejin.cn)
最后,一个小请求,麻烦各位看官动动手指点个赞吧!!!