「兔了个兔」创意投稿大赛——卯兔万年历

980 阅读3分钟

我正在参加「兔了个兔」创意投稿大赛,详情请看:「兔了个兔」创意投稿大赛

开篇

看到一个同僚写的文,一个日历一样的创意作品获了那么多阅读点赞,啧啧啧,牛。我也要搞一个,当然我要写跟他不一样的日历,,也就是本文的卯兔万年历。这可不是改个名字那么简单哦,里面增加了好多的创意元素(搞怪元素)。

话不多说,效果图走一波儿~

num.gif

声明一下,今天的青训营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)

最后,一个小请求,麻烦各位看官动动手指点个赞吧!!!