iT邦幫忙

2024 iThome 鐵人賽

DAY 27
0
自我挑戰組

Web Franework -SASS/SCSS系列 第 27

Day 27 - 加了一個縮放的視覺效果

  • 分享至 

  • xImage
  •  

今天也好累,新增了圖案縮放的效果:

$item-count: 3
$bg-color: null

@if $item-count == 1
  $bg-color: #e74c3c
@else if $item-count == 2
  $bg-color: #f1c40f
@else
  $bg-color: #2ecc71

@keyframes fadeInOutScale
  0%, 100%
    opacity: 0
    transform: scale(0.8)
  50%
    opacity: 1
    transform: scale(1.2)

.container
  display: flex
  justify-content: center
  align-items: center
  height: 100vh
  background-color: $bg-color

.item
  background-color: #fff
  padding: 20px
  color: #333
  font-size: 1.5rem
  border-radius: 8px
  margin: 10px
  animation: fadeInOutScale 3s infinite

明天再繼續。
加油!


上一篇
Day 26 - 加了一個淡入淡出的視覺效果
下一篇
Day 28 - 稍微新增了一些功能
系列文
Web Franework -SASS/SCSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言