* { margin:0; padding:0; } body { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; background:#161623; min-height:100vh; } section { position:relative; } section:before { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(#ff0000,#ff00ff); clip-path:circle(30% at right 90%); } section:after { content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:linear-gradient(#2196f3,#e91e63); clip-path:circle(20% at 10% 10%); } .main { position:relative; z-index:1; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; margin:40px 0; } .main .card { position:relative; width:300px; height:400px; background:rgba(255,255,255,0.03); margin:20px; box-shadow:0 15px 35px rgba(0,0,0,0.2); border-radius:15px; back-filter:blur(10px); display:flex; justify-content:center; align-items:center; } .main .card .cardTop { position:relative; display:flex; justify-content:center; align-items:center; flex-direction:column; opacity:0.5; transition:0.5s; } .main .card:hover .cardTop { opacity:1; transform:translateY(-20px); } .main .card .cardTop .viewImg { position:relative; width:150px; height:150px; border-radius:50%; overflow:hidden; border:10px solid rgba(0,0,0,0.3); } .main .card .cardTop .viewImg img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; } .main .card .cardTop .viewText { color:#fff; text-transform:uppercase; letter-spacing:2px; font-weight:500; font-size:18px; text-align:center; margin:20px 0 15px; line-height:1.3em; } .main .card .cardTop .viewText span { font-size:12px; font-weight:300; text-transform:initial; } .main .card .cardBtm { position:absolute; bottom:40px; display:flex; } .main .card .cardBtm li { list-style:none; margin:0 10px; transform:translateY(30px); transition:0.5s; opacity:0; transition-delay:calc(0.1s*var(--i)); } .main .card:hover .cardBtm li { transform:translateY(0); opacity:1; } .main .card .cardBtm li a { color:#fff; font-size:20px; list-style:none; } .main .card .cardBtm li a { text-decoration:none; }
更新时间:2021-05-15 10:25:44