--- tags: 互動程式設計,2-13,sass，學生版,動畫互動網頁特效入門（JS/CANVAS） --- # 學生版_單元七 寫一座美麗城市 (繪圖) ## 前一章節的sass內容 ### sass內容 ```sass= //指定顏色變數 $colorBlueRoofLight: #6fc5ff $colorBlueRoofDark: #0058ff $colorGreyLight: #fafaf5 $colorGreyNormal: #e3e2cf $colorGreyDark: #bebdaf $colorBackground: #2C2F36 $colorShadowBlue: #7cb1ff $colorShadowBlueLight: #8dc9fc $colorWindowGrey: #534d4d //定義漸層 //屋頂的漸層 $roofGradient: linear-gradient(150deg, $colorBlueRoofLight, $colorBlueRoofDark) //一整條從白天到晚上的背景顏色 $sceneGradient: linear-gradient(#1D2B49,#1A45A0,#91cdff,#fff) //設定字體 @import url('https://fonts.googleapis.com/css?family=Playfair+Display') * font-family: "Playfair Display","微軟正黑體" //會先找第一個字體，找不到中文字體就會往第二個字體 //設定Mixins @mixin size($w,$h:$w,$bdrs:0) width: $w height: $h border-radius: $bdrs @mixin flex($j:center,$a:center) display: flex justify-content: $j //主軸線:左右 align-items: $a //副軸線:上下 @mixin abpos($l:initial,$t:initial) position: absolute left: $l top: $t ``` --- ## sass 變數色卡網頁工具 https://codepen.io/frank890417/pen/MpKebd ![](https://i.imgur.com/1kpB0Zt.png) ### sass內容 ```sass= $colorBlueRoofLight: #6fc5ff $colorBlueRoofDark: #0058ff $colorGreyLight: #fafaf5 $colorGreyNormal: #e3e2cf $colorGreyDark: #bebdaf $colorBackground: #2C2F36 $colorShadowBlue: #7cb1ff $colorShadowBlueLight: #8dc9fc $colorWindowGrey: #534d4d ``` --- ## 加上框線與絕對位置 ### sass內容 ```sass= ``` --- ## 設定網頁與場景的寬高 ### sass內容 ```sass= html,body +size(100%) margin:0 +flex .scene +size(700px,500px,15px) ``` --- ## 文字內容設定 ### pug內容 ```pug= .scene .lefttopText h5 A DAY<br> ON THE ISLAND h1 Aegean Sea<br> Night Sky p 動態互動<br>互動程式設計<br><br>基礎HTML/CSS練習 ``` --- ### sass內容 ```sass= ``` --- ## 加入第一個房子 ![](https://i.imgur.com/FXBRXmk.png) --- ### pug內容 ```pug ``` --- ### sass內容 ```sass= ``` --- ## 第二個房子(1) ![](https://i.imgur.com/vlBEDAB.png) ### pug內容 ```pug ``` --- ### sass內容 ```sass= ``` --- ## 第二個房子(門) ![](https://i.imgur.com/uKqfvBf.png) ### sass內容 ```sass= ``` --- ## 第三個房子外加三面牆與三個窗子 ![](https://i.imgur.com/WntUePw.png) --- ### pug內容 ```pug= ``` --- ### sass內容 ```sass= ``` --- ## 畫屋頂 ![](https://i.imgur.com/IFCfDUX.png) --- ### pug內容 ```pug= .scene .lefttopText .blueblock h5 A DAY<br> ON THE ISLAND h1 Aegean Sea<br> Night Sky p 動態互動<br>互動程式設計<br><br>基礎HTML/CSS練習 .building .house1 .window .circle .circle .circle .house2 .door .house3 .wall .window .wall .window .wall .window .roof .rooftop .cross ``` --- ### sass內容 ```sass= ``` --- ![](https://i.imgur.com/UF1uXHU.png) ### sass內容 ```sass= //指定顏色變數 $colorBlueRoofLight: #6fc5ff $colorBlueRoofDark: #0058ff $colorGreyLight: #fafaf5 $colorGreyNormal: #e3e2cf $colorGreyDark: #bebdaf $colorBackground: #2C2F36 $colorShadowBlue: #7cb1ff $colorShadowBlueLight: #8dc9fc $colorWindowGrey: #534d4d //定義漸層 //屋頂的漸層 $roofGradient: linear-gradient(150deg, $colorBlueRoofLight, $colorBlueRoofDark) //一整條從白天到晚上的背景顏色 $sceneGradient: linear-gradient(#1D2B49,#1A45A0,#91cdff,#fff) //設定字體 @import url('https://fonts.googleapis.com/css?family=Playfair+Display') *,*:before,*:after font-family: "Playfair Display","微軟正黑體" border: solid 2px black position: relative //會先找第一個字體，找不到中文字體就會往第二個字體 //設定Mixins @mixin size($w,$h:$w,$bdrs:0) width: $w height: $h border-radius: $bdrs @mixin flex($j:center,$a:center) display: flex justify-content: $j //主軸線:左右 align-items: $a //副軸線:上下 =abpos($l:initial,$t:initial) position: absolute left: $l top: $t html,body +size(100%) margin: 0 +flex .scene +size(700px,500px,15px) .lefttopText margin: left: 30px top: 30px h1 font-size: 36px letter-spacing: 3px font-weight: 300 margin-top: 0 h5 font-size: 14px letter-spacing: 1px margin-bottom: 0 font-weight: 300 opacity: 0.6 p font-size: 14px letter-spacing: 2px opacity: 0.6 line-height: 24px .blueblock +size(20px,25px) .building position: absolute right: 0 bottom: 0 [class^="house"] position: absolute right: 0 bottom: 0 .house1 +size(180px,200px) .window +size(40px,100px,20px) margin-top: 40px margin-left: 70px +flex flex-direction: column .circle +size(20px,20px,50%) margin: 4px margin-left: 10px .house2 +size(240px,170px) right: 130px .door +size(40px,80px,20px 20px 0 0) position: absolute left: 45px bottom: 0 .house3 +size(320px,300px) +flex .wall flex: 1 height:100% +flex(center,flex-start) .window +size(24px,50px,12px 12px 0 0) margin-top: 30px =wall($flex) flex: $flex &:nth-child(1) +wall(10) &:nth-child(2) +wall(14) &:nth-child(3) +wall(10) &:before content: "" +size(105%,20px) display: block border: solid 2px position: absolute top: -20px =halfCir($r) +size($r*2,$r,$r $r 0 0) .roof +halfCir(150px) position: absolute top: -170px right: 5px .rooftop +halfCir(14px) +abpos(50%,-14px) transform: translateX(-50%) .cross +size(4px,30px) position: absolute left: 50% transform: translateX(-50%) bottom: 10px &:before content: "" display: block +size(20px,4px) position: absolute left: 50% transform: translateX(-50%) bottom: 10px ``` --- ## 縮小建築物 ![](https://i.imgur.com/SFTQDhH.png) --- ### sass內容 ```sass= .building position: absolute right: 0 bottom: 0 transform: scale(0.95) ``` --- # 顏色設定 ## 全部背景顏色與字顏色 ### sass內容 ```sass= html,body +size(100%) margin:0 +flex background-color: $colorBackground color: white ``` --- ## 顯示背景漸層(全部顯示) ![](https://i.imgur.com/ryEE4a8.png) ### sass內容 ```sass html,body +size(100%) margin:0 +flex background-color: $colorBackground color: white .scene +size(700px,500px,15px) background: $sceneGradient ``` --- ## 先顯示上半部 ![](https://i.imgur.com/pNe3gVy.png) ### sass內容 ```sass= ``` --- ## 加上.blueblock顏色 ![](https://i.imgur.com/512AksU.png) --- ### sass內容 ```sass= ``` --- ## 第一房子陰影 ![](https://i.imgur.com/EmkFH0W.png) ### sass內容 ```sass= ``` --- 第一房子窗戶 ![](https://i.imgur.com/WBfwJXx.png) ### sass內容 ```sass= ``` --- ## 第二房子與第三房子的顏色與前後順序 ![](https://i.imgur.com/YPzvOsr.png) --- ### 第二房子修正sass內容 ```sass ``` --- ### 第三房子修正sass內容 ```sass= ``` --- ### 第一房子修正sass內容 ```sass= .house1 +size(180px,200px) z-index: 1 //++++++++ ``` --- ## 第三房子的牆壁顏色設定 ![](https://i.imgur.com/YrVZmDL.png) --- ### sass內容 ```sass ``` --- ## 牆壁上沿 ![](https://i.imgur.com/WUQfeNf.png) --- ### sass內容 ```sass= ``` --- ## 牆的窗戶顏色 ![](https://i.imgur.com/42rOn1B.png) ## 第二房的門 ### sass內容 ```sass= ``` ## 第三房三個窗戶 ### sass內容 ```sass= ``` --- ## 第三房子屋頂 ![](https://i.imgur.com/sQceM5X.png) --- ### sass內容 ```sass ``` --- ## 清除框線與加上陰影 ![](https://i.imgur.com/2E0Vy9N.png) --- ### sass內容 ```sass ``` 單元七 寫一座美麗城市 (繪圖).md 選擇開啟工具 目前顯示的是「單元七 寫一座美麗城市 (繪圖).md」。