iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 25
1
自我挑戰組

網頁學習紀錄系列 第 25

鐵人賽 Day25 人員卡片介紹-互動效果 transform

  • 分享至 

  • xImage
  •  

這次要把上次寫好的人員卡片來做個互動效果,讓使用網頁的人覺得不無聊,
畫面預計滑鼠經過後會有這樣的效果,如下圖。
https://ithelp.ithome.com.tw/upload/images/20190928/20119300r9mBQ0eM6S.png

SCSS 是這樣編寫的,程式碼如下

.card {
    width: 385px;
    margin: 15px;
    background-color: #fff;
    border: 1px solid #a8a8a8;
    transform: translateY(0px);
    // 卡片互動,讓互動的卡片歸位 (新增)
    transition: 0.3s;
    // 讓卡片互動時有一個時間差的效果,看起來比較順暢 (新增)
    img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        // 在圖片中置中對齊
    }

    h2 {
        font-size: 24px;
        font-weight: bold;
        border-bottom: 1px solid #333333;
        padding-bottom: 1em;
        margin-bottom: 1em;
        text-align: center;
    }

    P {
        line-height: 1.5;
        text-align: left;

    }

    .text {
        padding: 1em;
        position: relative;
        // 設定絕對定位的父元素在卡片的文字中

        &:before {
            content: '';
            //偽元素要搭配 content 不然會失效
            width: 0;
            height: 0;
            position: absolute;
            // 用絕對定位,將 display 轉為 Block
            left: 0;
            top: 0;
            // 讓三角形在定位中靠左靠上對齊
            border-top: 50px solid transparent;
            // 設定線條為transparent透明
            border-left: 184px solid #fff;
            border-right: 184px solid #fff;
            // 將左右的線條改為白色
            transform: translateY(-100%);
            // 使用變形然後位移-100% (新增)
        }
    }

    &:hover {
        transform: translateY(-50px);
        // 滑鼠移動到指定卡片會有互動   
    }

}

效果其實沒有想得那麼難,恰到好處就好!!
codepen https://codepen.io/hnzxewqw/pen/XWrwpOq


上一篇
鐵人賽 Day24 人員卡片介紹-三角形裝飾
下一篇
鐵人賽 Day26 首次參加六角學院同學會
系列文
網頁學習紀錄30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言