【CSS】input style

核取方塊

input(type="checkbox")

Display
這個框框只有對準,才能點進去

擴大核取範圍:外層包覆label

label
 input(type="checkbox")
 .box 只要點選框内任一處,都可以打勾上方框框
.box
 width: 200px
 height: 150px
 border: 1px solid #000

Display


 

點選後出效果

  1. 用HTML打一個input(type=”checkbox”)
  2. CSS打上input:checked
  3. 綜合上面label技巧,擴大選取範圍
  4. 找到要顯示特效的地方,寫進input:checked的兄弟元素或子元素裡面去
  5. 最後把核取方塊設成不顯示input { display: none }

範例

label
 input(type="checkbox")
 .box 
  h4 CLICK IT !!
.box
 background-color: #90a955
 width: 200px
 height: 150px
 display: flex
 justify-content: center
 align-items: center
 
h4
 color: #f2f2e9
 opacity: 0.2
 transition-duration: 0.5s
 
input:checked+.box
 & h4
  opacity: 1

input
 display: none

Display


 

背景移動效果

原理

  1. 背景使用漸層色
  2. 放大背景寬度
  3. 使用動畫,移動background-position定位

範例

.box
.box
 width: 200px
 height: 150px
 background: linear-gradient(20deg, #24260f, #90a955)
 background-size: 100% 300%
 animation: move 8s infinite both
 
@keyframes move
 0%
 background-position: 100% 30%
 100%
 background-position: 100% 100%

Display

.

CSS flex

意義

用來方便排版的屬性
參考資料

使用方法

  1. 對母元素 ,display: flex
  2. 對母元素,justify-content: center,子元素水平置中
  3. 對母元素,align-items: center,子元素垂直置中
  4. 子元素自動排列,不會掉出來

範例

.outer
 .inner.inner1
 .inner.inner2
 .inner.inner3
 .inner.inner4
.outer
 width: 300px
 height: 200px
 border: 1px solid #000
 display: flex
 justify-content: center

.inner
 width: calc(100% / 4)
 height: 200px
 border: 1px solid #000

Display

.inner1
.inner2
.inner3
.inner4

對比:使用display: inline-block對子元素定位

.inner1
.inner2
.inner3
.inner4

Pogress Circle Bar

結構

percentage-bar-min

範例

.outer
 .inner
  .block
  .txt 75%
.outer
 width: 150px
 height: 150px
 background-color: #BFEAE7
 border-radius: 100%
 position: relative
 margin-left: auto
 margin-right: auto
 top: 150px
 
.inner
 width: 130px
 height: 130px
 background-color: #BFEAE7
 border-radius: 100%
 overflow: hidden
 position: absolute
 top: 10px
 left: 10px
 
.block
 width: 130px
 height: 97.5px
 background-color: #20B4A9
 position: absolute
 bottom: 0px
 opacity: 0.65
 
.txt
 font-size: 36px
 font-family: メイリオ
 color: white
 opacity: 0.9
 text-align: center
 position: absolute
 top: 50%
 left: 50%
 transform: translateX(-50%) translateY(-50%)

Display

75%

用CSS做出三角形

原理

利用border。相鄰邊框之間呈現45度夾角

拿掉border-top,並且將border-bottom的寬度調成2倍大

將此元素的長寬都改成0

最後,把border-right, border-left顏色設成transparent

範例

<div></div>
div {
 width: 0px;
 height: 0px;
 border-right: 30px solid transparent;
 border-left: 30px solid transparent;
 border-bottom: 60px solid #c1d7ae;
}

Display

SVG 動畫

animate

svg#pic1(viewbox="-50 -50 100 100")
 
 line(x1=-20, y1=0, x2=20, y2=0)
 line(x1=0, y1=-20, x2=0, y2=20)
 circle(cx=0,cy=0,r=10)
 //attributeName="要動的地方"
 //dur="秒數"
 //values="影格"
 //repeatCount="重複次數,indefinite重複無限"
   animate(attributeName="r" dur="2s" values="10;30;10" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px
 
#pic1
 stroke: black
 stroke-width: 3px
 & circle
  fill: white

Display

animateTransform & group

svg#pic2(viewbox="-50 -50 100 100")
 circle(cx=0, cy=0, r=10)
 //group: g,Jade内子元素要縮排。animate要放在g内層
 g
  line(x1=-20, y1=0, x2=20, y2=0)
  line(x1=0, y1=-20, x2=0, y2=20)
  rect(x=-20, y=-20, width=40, height=40)
  //attributeName="transform"
     //type="scale or rotate ..."
     //dur="秒數"
     //values="影格"
  //repeatCount="重複次數,indefinite重複無限"
  animateTransform(attributeName="transform" type="rotate" dur="2s" values="0;360" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px
 
#pic2
 stroke: black
 stroke-width: 3px

 & circle
  fill: white

 & rect
  fill: none

Display

begin:指定開始時間,産生錯落效果

//begin: 開始秒數,也可以指定負數,這樣開始時就可以直接動
svg#pic4(viewbox="0 0 200 200")
 rect(x=0, y=0, width=20, height=100)
  animate(attributeName="height" begin="0s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=30, y=0, width=20, height=120)
  animate(attributeName="height" begin="-0.3s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=60, y=0, width=20, height=140)
  animate(attributeName="height" begin="-0.6s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=90, y=0, width=20, height=160)
  animate(attributeName="height" begin="-0.9s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=120, y=0, width=20, height=120)
  animate(attributeName="height" begin="-1.2s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=150, y=0, width=20, height=80)
  animate(attributeName="height" begin="-1.5s" dur="2s" values="100;200;100" repeatCount="indefinite")
 rect(x=180, y=0, width=20, height=60)
  animate(attributeName="height" begin="-1.8s" dur="2s" values="100;200;100" repeatCount="indefinite")
svg
 width: 240px
 border: solid 2px

Display

SVG

常用圖形

直線:line(x1, y1, x2, y2)
矩形:rect(x, y, width, height)
圓形:circle(cx, cy, r)
橢圓:ellipse(cx, cy, rx, ry)
折線:polyline(points=”x, y; x, y”)
文字:text(x, y) Type-something

VIEWBOX

<!-- svg(viewbox="右上角X 右上角Y 寬度 高度") -->
svg(viewbox="-50 -50 100 100")
 circle(cx=0,cy=0,r=10)
svg
 width: 240px
 border: solid 2px

Display


 

fill:填滿 & stroke:框線

<!-- svg(viewbox="右上角X 右上角Y 寬度 高度") -->
svg(viewbox="-50 -50 100 100")
 circle(cx=0,cy=0,r=10)
svg
 width: 240px
 border: solid 2px
 & circle
   fill: none
   stroke: black

Display

id & 共用屬性

<!-- svg(viewbox="右上角X 右上角Y 寬度 高度") -->
svg#pic1(viewbox="-50 -50 100 100")
 circle(cx=0,cy=0,r=10)
 line(x1=-20, y1=0, x2=20, y2=0)
svg
 width: 240px
 border: solid 2px

#pic1
 stroke: black
 & circle
   fill: none

Display