# 【Day15】project 3 --- 動態互動天氣盒子
## 重點
- sublime快速鍵，例如：poa--->tab鍵--->position: absolute / ff--->tab鍵--->font-family: / bgc--->tab鍵--->background-color: / m--->tab鍵--->margin: / p--->tab鍵--->padding: / ......
- 新的置中方法

display: flex
justify-content: center //水平對齊
align-items: center //垂直對齊

- 陰影製造 box-shadow: X偏移/Y偏移/模糊程度/顏色
- 顏色漸變(線性) linear-gradient(角度,開始顏色,結束顏色)
- 圓角不同位置的調整 border-radius: 左上/右上/右下/左下
- 調整背景位置 background-position
- 顏色不同表示方式 rgba(色票or顏色名稱,透明度)
- 虛線 stroke-dasharray
- 對於同名稱但不同順序的快速調整方式：利用nth-child(n)
- 鼠標樣式 cursor
- 打勾輸入(HTML)

input(type="checkbox")

若想在任何地方都可選取(非僅限於打勾框框內)，可加入label，並將所有元素包含在其中。

## 程式碼
**HTML(jade)**

.daybox
  label
    input#switch_night(type="checkbox")
    .top
      .moon
      .cloud
        .rain
        .rain.rain2
        .rain.rain3
      svg.temsvg
        circle(cx=0 cy=100 r=3)
        text(x=0 y=100) 27°C
        circle(cx=70 cy=80 r=3)
        text(x=70 y=80) 28°C
        circle(cx=140 cy=60 r=3)
        text(x=140 y=60) 29°C
        circle(cx=210 cy=70 r=3)
        text(x=210 y=70) 28.5°C
        circle(cx=280 cy=100 r=3)
        text(x=280 y=100) 27°C
        circle(cx=350 cy=40 r=3)
        text(x=350 y=40) 31°C
        circle(cx=420 cy=50 r=3)
        text(x=420 y=50) 30°C

        polyline(points="0,100 70,80 140,60 210,70 280,100 350,40 420,50")
      .text_area
        .temperature 27°C
        .infos
          .address 花蓮縣吉安鄉
          .time 星期日 下午3:00
    .bottom
      .dayweather
        h3 MON
        svg(viewbox="-50 -50 100 100")
          circle.sun(cx=0 cy=0 r=22)
      .dayweather
        h3 TUE
        svg(viewbox="-50 -50 100 100")
          circle.sun(cx=0 cy=0 r=22)
      .dayweather
        h3 WED
        svg(viewbox="-50 -50 100 100")
          circle.sun(cx=0 cy=0 r=22)
          circle.cloud(cx=0 cy=30 r=20)
          circle.cloud(cx=-15 cy=30 r=20)
          circle.cloud(cx=-30 cy=30 r=20)
          circle.cloud(cx=-25 cy=10 r=15)
          circle.cloud(cx=-7 cy=15 r=15)
      .dayweather
        h3 THUR
        svg(viewbox="-50 -50 100 100")
          circle.sun(cx=0 cy=0 r=22)
          circle.cloud(cx=0 cy=30 r=20)
          circle.cloud(cx=-15 cy=30 r=20)
          circle.cloud(cx=-30 cy=30 r=20)
          circle.cloud(cx=-25 cy=10 r=15)
          circle.cloud(cx=-7 cy=15 r=15)
      .dayweather
        h3 FRI
        svg(viewbox="-50 -50 100 100")
          circle.sun(cx=0 cy=0 r=22)
          circle.cloud(cx=0 cy=30 r=20)
          circle.cloud(cx=-15 cy=30 r=20)
          circle.cloud(cx=-30 cy=30 r=20)
          circle.cloud(cx=-25 cy=10 r=15)
          circle.cloud(cx=-7 cy=15 r=15)
      .dayweather
        h3 SAT
        svg(viewbox="-63 -30 100 100")
          line.rain(x1=-25 y1=15 x2=-25 y2=35)
          line.rain(x1=-14 y1=5 x2=-14 y2=25)
          line.rain(x1=-5 y1=20 x2=-5 y2=45)

          circle.cloud(cx=0 cy=30 r=20)
          circle.cloud(cx=-15 cy=30 r=20)
          circle.cloud(cx=-30 cy=30 r=20)
          circle.cloud(cx=-25 cy=10 r=15)
          circle.cloud(cx=-7 cy=15 r=15)

      .dayweather
        h3 SUN
        svg(viewbox="-63 -30 100 100")
          circle.cloud(cx=0 cy=30 r=20)
          circle.cloud(cx=-15 cy=30 r=20)
          circle.cloud(cx=-30 cy=30 r=20)
          circle.cloud(cx=-25 cy=10 r=15)
          circle.cloud(cx=-7 cy=15 r=15)
  

**CSS(sass)**

$color_white: #f3f3f3
$color_yellow: #FFD633
$color_black: #222
$color_blue_start: #19283D
$color_blue_end: #1D678F
$color_rain: #4DACFF
$color_white_cloud: #f2f9fe
$color_grey_cloud: #ccc

*
  // border: solid 1px black
  position: relative
  font-family: 'Frank Ruhl Libre', 微軟正黑體

@mixin size($w,$h)
  width: $w
  height: $h

html, body
  width: 100%
  height: 100%
  margin: 0
  padding: 0
  display: flex
  justify-content: center
  align-items: center
  background-color: $color_black
  
label
  cursor: pointer
  
.daybox
  width: 50%
  max-width: 400px
  background-color: $color_white
  box-shadow: 0px 0px 20px rgba(black,0.3)
  border-radius: 5px
  cursor: pointer
  
  &:hover
    .bottom
      height: 100px
    .dayweather
      opacity: 1
      top: 0px
    
.top
  height: 330px
  background: linear-gradient(20deg,$color_blue_start,$color_blue_end)
  background-size: 100% 300%
  animation: daylight 5s both
  border-radius: 5px 5px 0px 0px
  
  @keyframes daylight
    0%
      background-position: 100% 30%
    0%
      background-position: 100% 100%
  .temsvg
    width: 100%
    polyline
      stroke: $color_white
      stroke-width: 1px
      fill: none
      opacity: 0.2
    text
      fill: $color_white
      transform: translateX(-10px) translateY(20px)
      font-size: 12px
      opacity: 0
    circle
      fill: $color_white
      opacity: 0.2
      
.rain
  +size(2px,10px)
  position: absolute
  left: 45px
  bottom: 15px
  animation: raindrop 1s infinite linear
  background-color: $color_white
    
.rain2
  left: 70px
  bottom: 20px
  animation-delay: -0.4s
.rain3
  left: 30px
  bottom: 20px
  animation-delay: -0.7s
    
  @keyframes raindrop
    0%
      transform: translateY(0px)
    100%
      transform: translateY(50px)
      opacity: 0
.moon
  +size(50px,50px)
  border-radius: 100%
  box-shadow: 15px -15px
  position: absolute
  left: 50px
  top: 100px
  animation: moonmove 20s infinite
    
  @keyframes moonmove
    0%
      box-shadow: 15px -15px $color_yellow
      transform: translateX(-15px) translateY(15px)
    100%
      box-shadow: -30px 30px $color_yellow
      transform: translateX(30px) translateY(-30px)
.cloud
  +size(100px,36px)
  position: absolute
  left: 200px
  bottom: 50px
  border-radius: 20px
  animation: clouddrift 4s infinite
  background-color: $color_white
  box-shadow: 0px 0px 20px rgba(black,0.3)
  
  &:before, &:after
    content: ""
    // border: solid 1px
    display: block
    +size(50px,50px)
    border-radius: 100%
    position: absolute
    background-color: $color_white
  &:before
    left: 16px
    top: -28px
  &:after
    left: 35px
    top: -20px
    
@keyframes clouddrift
  0%
    transform: translateY(0px)
  50%
    transform: translateY(-10px)
  100%
    transform: translateY(0px)
.bottom
  height: 10px
  display: flex
  justify-content: center
  box-shadow: 0px 0px 20px rgba(black,0.3)
  border-radius: 0px 0px 5px 5px
  overflow: hidden
  transition-duration: 2s
  .dayweather
    width: calc(100% / 7 - 5px)
    text-align: center
    opacity: 0
    top: 20px
    transition: 0.5s
    h3
      font-size: 8px
      color: rgba($color_black,0.6)
      font-weight: 400
      letter-spacing: 1px
    svg
      width: 100%
      max-width: 40px
      height: 40px
      .sun
        fill: $color_yellow
        stroke: rgba($color_yellow,0.5)
        stroke-width: 30px
        stroke-dasharray: 5px
      .rain
        stroke: $color_rain
      .cloud
        fill: $color_grey_cloud
        
.dayweather:nth-child(1)
  transition-delay: 0.2s
.dayweather:nth-child(2)
  transition-delay: 0.4s
.dayweather:nth-child(3)
  transition-delay: 0.6s
.dayweather:nth-child(4)
  transition-delay: 0.8s
.dayweather:nth-child(5)
  transition-delay: 1s
.dayweather:nth-child(6)
  transition-delay: 1.2s
.dayweather:nth-child(7)
  transition-delay: 1.4s
.text_area
  display: inline-block
  position: absolute
  bottom: 25px
  left: 25px
  color: $color_white
  .temperature
    font-size: 75px
    line-height: 80px
  .infos
    font-size: 13px
    opacity: 0.5
  
.moon,.cloud
  transition: 0.5s
.temsvg
  polyline
    transition: 0.5s 0.3s
  text
    transition: 0.5s 0.6s
  circle
    transition: 0.5s
    
#switch_night
  display: none
    
#switch_night:checked+.top
  .moon,.cloud
    opacity: 0.2
  .temsvg
    polyline,text,circle
      opacity: 1
  

## 呈現
{%youtube E-5TTdjL4PU %}

:::warning
內容主要整理自「動畫互動網頁程式入門 (HTML/CSS/JS)」課程，網址：https://hahow.in/courses/56189df9df7b3d0b005c6639/discussions?item=5a1e1745a2c4b000589dd21d
:::