narsm筆記紀錄

.cross
  .line1
  .line2
  
.fbtn
  h1 標題
  p 內文內文內文內文內文內文內文內文
內文內文內文內文內文內文內文內文內文
內文內文內文內文內文內文內文內文內文
內文內文內文

*
  backface-visibility: hidden
body
  background-color: #333

.cross
  width: 200px
  height: 200px
  position: relative
  background-color: #FFD52B
  transition-duration: 0.5s
  cursor: pointer
  
.line1,.line2
  width: 150px
  height: 10px
  background-color: white
  position: absolute
  left: 50%
  top: 50%
  transform: translateX(-50%) translateY(-50%)
  transition-duration: 0.5s

.line1
  transform: translateX(-50%) translateY(-200%)
.line2
  transform: translateX(-50%) translateY(200%)
  
.cross
  &:hover
    background-color: #E84B17
    .line1,.line2
      // width: 170px

    .line1
      transform: translateX(-50%) translateY(-50%) rotate(45deg) scaleX(1.2)     
    .line2
      transform: translateX(-50%) translateY(-50%) rotate(-45deg) scaleX(1.2)
    
    
.fbtn
  width: 300px
  height: 300px
  padding: 30px
  border: solid 2px #eee
  & h1,p
    position: relative
    color: #eee
    opacity: 0
    top: 20px
    transition-duration: 0.5s
    font-family: 微軟正黑體
  & h1
    transition-delay: 0s
  & p
    transition-delay: 0.3s
    line-height: 30px
  &:hover h1, &:hover p 
    top: 0px
    opacity: 1