Open Lichen5221 opened 3 years ago
html 檔:
<!DOCTYPE html> <html> <head> <meta charset='utf-8' /> <title>Test</title> <link rel="stylesheet" href="./test.css" /> </head> <body> <div class="wrap"> <div class="item"> <img src="https://picsum.photos/300/300?random=1" /> <div class="text"> <h2>山川澤</h2> <p>上川澤是來自獨立領地的矮人礦工,因為要變成有錢人的緣故,努力開發各種挖礦工具,最後順手毀滅了世界,</p> </div> </div> <div class="item"> <img src="https://picsum.photos/300/300?random=2" /> <div class="text"> <h2>青海利水</h2> <p>青海利水是來自未知禁區的食人魔保鑣,因為解開魔神封印的緣故,最後當了一輩子的冒險家。</p> </div> </div> <div class="item"> <img src="https://picsum.photos/300/300?random=3" /> <div class="text"> <h2>豐田武</h2> <p>豐田武是來自暗夜領域的混血地精間諜,因為忘記穿上內褲的緣故,最後在上廁所時遭到暗殺身亡。</p> </div> </div> </div> </body> </html>
CSS 檔:
*{ margin: 0; padding: 0; list-style: none; } html, body{ height: 100%; } body{ display: flex; align-items: center; background-color: #FFF; } .wrap{ width: 1200px; display: flex; margin: auto; } .item{ width: 368px; margin: 15px; text-align: center; border: 1px solid #ccc; transform: translateY(0px); transition: 0.5s; } .item img{ width: 100%; vertical-align: middle; } .item h2{ border-bottom: 1px solid #000; padding-bottom: .3em; margin-bottom: .3em; font-weight: 900; transition: 0.25s; } .item p{ line-height: 1.6; font-weight: 300; transition: 0.25s; } .item .text{ padding: 20px; position: relative; } .item .text:before{ content: ''; position: absolute; width: 0; height: 0; left: 0; top: 0; border-top: 50px solid transparent; border-left: 184px solid #fff; border-right: 184px solid #fff; transform: translateY(-100%); } .item:hover{ transform: translateY(-50px); } .item:hover .text:before{ border-left: 184px solid #FEB85D; border-right: 184px solid #FEB85D; } .item:hover .text{ background-image: linear-gradient(0deg, #FB8076, #FEB85D); } .item:hover h2{ color: #fff; border-bottom-color: #fff; } .item:hover p{ color: #fff; }
人員介紹卡片
html 檔:
CSS 檔: