mix-blend-mode實現桌面時鐘小掛件效果程式碼例項

antzone發表於2017-03-11

分享一段程式碼例項，它實現了手機桌面時鐘小掛件效果。

不過上面的資料都是假的，這裡主要演示mix-blend-mode屬性的用法。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0px;
  margin: 0px;
}
html {
  width: 375px;
  height: 647px;
  padding-top: 20px;
  background-image: url('demo/CSS/img/apple.jpg');
  background-size: cover;
  background-repeat: no-repeat;
}
html main {
  width: 100%;
  height: 350px;
  position: relative;
}
html main .timeCircle {
  width: 194px;
  height: 194px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -97px -144px;
  border: solid 8px #ffffff;
  border-radius: 50%;
}
html main .timeCircle .date {
  color: #fff;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 20px;
}
html main .timeCircle .week {
  color: #fff;
  text-align: center;
  position: absolute;
  width: 100%;
  bottom: 20px;
}
html main .timeCircle .clockPan {
  position: absolute;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  top: 50%;
  left: 50%;
  margin: -40px;
  font-size: 30px;
  background-color: #fff;
  border-radius: 50%;
  mix-blend-mode: screen;
}
html main .mixDiv {
  mix-blend-mode: screen;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 30px 0px;
}
html main .mixDiv .weatherCircle {
  width: 150px;
  height: 150px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -152px 5px;
  border-radius: 50%;
  border: solid 8px #000;
  background-image: radial-gradient(194px at -56px 123px, rgba(255, 258, 255, 0) 0px, rgba(255, 255, 255, 0) 116px, #ffffff 116px, #ffffff 150px);
}
html main .mixDiv .weatherCircle .location {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 20px;
}
html main .mixDiv .weatherCircle .temperature {
  text-align: center;
  position: absolute;
  width: 100px;
  top: 50%;
  left: 50%;
  margin: -10px -30px;
  font-size: 30px;
}
html main .mixDiv .weatherCircle .climate {
  text-align: center;
  position: absolute;
  width: 100px;
  bottom: 20px;
  left: 50px;
  font-size: 12px;
}
html main .mixDiv .smallCircle {
  width: 240px;
  height: 240px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -157px -132px;
  border-radius: 50%;
  background-image: radial-gradient(210px at 93px 135px, rgba(255, 258, 255, 0) 0px, rgba(255, 255, 255, 0) 113px, #ffffff 113px, #ffffff 150px);
}
</style>
</head>
<body>
  <main>
    <div class="timeCircle">
      <div class="date">
        07月26日
      </div>
      <div class="clockPan">
        10:20
      </div>
      <div class="week">
        週二
      </div>
    </div>
    <div class="mixDiv">
      <div class="smallCircle">
 
      </div>
      <div class="weatherCircle">
        <div class="location">
          南京
        </div>
        <div class="temperature">
          40℃
        </div>
        <div class="climate">
          晴（燒烤）
        </div>
      </div>
    </div>
  </main>
</body>
</html>

相關文章