css悬浮带阴影相册效果代码
代码语言:html
所属分类:画廊相册
代码描述:css悬浮带阴影相册效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* latin */ @font-face { font-family: "Lancelot"; font-style: normal; font-weight: 400; src: local("Lancelot"), url(https://fonts.gstatic.com/s/lancelot/v7/J7acnppxBGtQEulG4KY_zp4.woff2) format("woff2"); unicode-range: U+0000-00ff, U+0131, U+0152-0153, U+02bb-02bc, U+02c6, U+02da, U+02dc, U+2000-206f, U+2074, U+20ac, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body { background-color: #333; } .letter-container { font-family: "Abril Fatface", Arial, sans-serif; text-align: center; } .letter-container a { color: #fff; text-decoration: none; text-align: center; padding: 20px; text-transform: uppercase; } .letter-container a:hover span:nth-child(odd) { transform: scale(0.9) rotate(-5deg); } .letter-container a:hover span:nth-child(even) { transform: scale(0.9) rotate(3deg); } .letter-container a span { display: inline-block; position: relative; width: 200px; height: 140px; background: #000; line-height: 140px; font-size: 120px; margin: 3px; background-position: 50% 0%; background-size: 200px 267px; text-shadow: 0px 0px 1px #fff, 2px 2px 5px rgba(0, 0, 0, 0.4); border-color: #fff; border-style: solid; border-width: 10px 10px 45px 10px; box-shadow: 2px 2px 8px 4px rgba(0, 0, 0, 0.9), 0px 0px 2px rgba(0, 0, 0, 0.2) inset; transition: all 0.3s ease-in-out; } .letter-container a span:nth-child(odd) { transform: rotate(-5deg); } .letter-container a span:nth-child(even) { transform: rotate(3deg); } .letter-container a span:before { content: ""; position: absolute; width: 220px; height: 195px; left: -10px; top: -10px; background: linea.........完整代码请登录后点击上方下载按钮下载查看
网友评论0