纯css实现金属立体材质文字效果
代码语言:html
所属分类:布局界面
代码描述:纯css实现金属立体材质文字效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> * { -webkit-backface-visibility: hidden; } html, body { height: 100%; width: 100%; } body { background: linear-gradient(135deg, #444 0%, #222 100%) fixed; } /* Positioning */ ol { list-style-type: none; margin: 0; padding: 40px; text-indent: 0; width: 80%; margin: 0 auto; text-align: center; } /* Layout properties */ li { -webkit-filter: drop-shadow(32px 48px 8px rgba(0, 0, 0, 0.4)); filter: drop-shadow(32px 48px 8px rgba(0, 0, 0, 0.4)); display: inline-block; /* Adjust for spacing */ margin: 50px 40px; position: relative; /* horizontal grid */ /* vertical grid */ } li:before, li:after { display: none; /* comment out to see grid lines */ content: ''; position: absolute; top: 0; left: 0; margin: auto; background: rgba(255, 0, 0, 0.5); z-index: 1; } li:before { width: 1px; height: 100%; right: 0; } li:after { width: 100%; height: 1px; bottom: 0; box-shadow: 0 -50px 0 0 rgba(255, 0, 0, 0.5), 0 22px 0 0 rgba(255, 0, 0, 0.5), 0 8px 0 0 rgba(255, 0, 0, 0.5); } div { position: absolute; font-size: 0; color: transparent; border-style: solid; } div span { position: absolute; display: block; border-style: solid; } .a { width: 100px; height: 110px; } .a div { height: 20px; width: 4px; background: #DFE0E3; margin: 0 auto; top: 12px; left: 50px; } .a div:before { content: ""; position: absolute; display: block; border-style: solid; top: -3px; height: 88px; left: -33px; border-color: transparent #C5C6C8 #A7AAAB #DFE0E3; border-width: 0 10px 10px 10px; -webkit-transform: skew(-22deg); transform: skew(-22deg); box-shadow: -5px -16px 0 -5px #DFE0E3; background: #C5C6C8; z-index: -1; } .a div:after { content: ""; position: absolute; display: block; border-style: solid; top: 21px; left: 12px; height: 64px; border-color: transparent #C5C6C8 #A7AAAB #DFE0E3; border-width: 0 10px 10px 10px; -webkit-transform: skew(22deg); transform: skew(22deg); box-shadow: 5px -40px 0 -5px #C5C6C8; background: #C5C6C8; } .a span { top: -15px; left: -9px; border-color: #F3F3F3 transparent transparent transparent; border-width: 12px 6px 0 6px; z-index: 1; } .a span:before { content: ""; position: absolute; display: block; border-style: solid; top: 58px; left: -24px; width: 35px; border-width: 10px 7px; border-color: #A7AAAB transparent transparent transparent; } .a span:after { content: ""; position: absolute; display: block; border-style: solid; top: 46px; left: -24px; width: 23px; border-width: 6px 13px; border-color: transparent transparent #F3F3F3 transparent; } .b { width: 92px; height: 110px; } .b div { height: 90px; width: 20px; border-color: #F3F3F3 transparent #A7AAAB #DFE0E3; border-width: 10px; } .b div:before { content: ""; position: absolute; display: block; border-style: solid; width: 52px; height: 25px; left: 0; top: 45px; border-top-right-radius: 22px; border-bottom-right-radius: 22px; border-color: #A7AAAB #DFE0E3 #F3F3F3 #C5C6C8; border-width: 10px; } .b div:after { content: ""; position: absolute; display: block; border-style: solid; top: 0; width: 52px; height: 25px; left: 0; border-top-right-radius: 22px; border-bottom-right-radius: 22px; border-color: #A7AAAB #DFE0E3 #F3F3F3 #C5C6C8; border-width: 10px; } .b span { top: -10px; left: 0; width: 62px; height: 45px; border-top-right-radius: 33px; border-bottom-right-radius: 33px; border-color: #F3F3F3 #C5C6C8 transparent transparent; border-width: 10px; } .b span:after { content: ""; position: absolute; display: block; border-style: solid; top: 35px; left: -10px; width: inherit; height: 45px; border-top-right-radius: 33px; border-bottom-right-radius: 33px; border-color: transparent #C5C6C8 #A7AAAB transparent; border-width: 10px; } .b span:before { content: ""; position: absolute; display: block; border-style: solid; width: 16px; height: 5px; background: #A7AAAB; box-shadow: 0 5px 0 0 #F3F3F3; top: 35px; right: 0; z-index: -1; } .c { width: 94px; height: 110px; } .c div { top: 10px; left: 10px; width: 70px; height: 70px; border-radius: 100%; border-width: 10px; border-color: #A7AAAB transparent #F3F3F3 #C5C6C8; } .c div:before { content: ""; position: absolute; display: block; border-style: solid; width: 90px; height: 90px; border-radius: inherit; border-width: 10px; border-color: #F3F3F3 transparent #A7AAAB #DFE0E3; top: -20px; left: -20px; } .c span { display: block; position: absolute; right: -3px; top: -3px; border-width: 13px 13px 0 0; border-color: #C5C6C8 transparent transparent transparent; } .c span:before { content: ""; position: absolute; display: block; border-style: solid; top: 50px; right: -13px; border-width: 13px 0 0 13px; border-color: transparent transparent transparent #C5C6C8; } .d { width: 92px; height: 110px; } .d div { height: 90px; width: 72px; left: 0; top: 0; border-color: #F3F3F3 #C5C6C8 #A7AAAB #DFE0E3; border-width: 10px; border-top-right-radius: 46px; border-bottom-right-radius: 46px; } .d div:before { content: ""; position: absolute; display: block; border-style: solid; width: 52px; height: 70px; left: 0; top: 0; border-top-right-radius: 36px; border-bottom-right-radius: 36px; border-color: #A7AAAB #DFE0E3 #F3F3F3 #C5C6C8; border-width: 10px; } .e { width: 84px; height: 110px; } .e div { top: 45px; left: 0; height: 0; width: 58px; border-color: #F3F3F3 #C5C6C8 #A7AAAB transparent; border-width: 10px 10px 10px 0; } .e div:before, .e div:after { content: ""; position: absolute; display: block; border-style: solid; border-color: inherit; border-width: inherit; width: 74px; } .e div:before { top: -55px; } .e div:after { bottom: -55px; } .e span { z-index: 1; height: 90px; width: 0; border-color: transparent transparent transparent #DFE0E3; border-width: 10px 0 10px 10px; top: -55px; } .e span:before, .e span:after { content: ""; position: absolute; display: block; border-style: solid; border-color: transparent transparent transparent #C5C6C8; border-width: inherit; height: 25px; } .e span:before { top: 45px; } .e span:after { bottom: 45px; } .f { margin-right: 20px; width: 84px; height: 110px; } .f div { top: 45px; left: 0; height: 0; width: 58px; border-color: #F3F3F3 #C5C6C8 #A7AAAB transparent; border-width: 10px 10px 10px 0; } .f div:before { content: ""; position: absolute; display: block; border-style: solid; width: 14px; height: 14px; background: #C5C6C8; top: 35px; } .f div:after { content: ""; position: absolute; display: block; border-style: solid; border-color: inherit; border-width: inherit; width: 74px; top: -55px; } .f span { z-index: 1; height: 90px; width: 0; border-color: transparent transparent #A7AAAB #DFE0E3; border-width: 10px; top: -55px; } .f span:before { content: ""; position: absolute; display: block; border-style: solid; border-color: transparent transparent transparent #C5C6C8; border-width: 10px 0 0 10px; height: 35px; top: 45px; } .f span:after { content: ""; position: absolute; display: block; border-style: solid; border-color: transparent transparent transparent #C5C6C8; border-width: inherit; height: 25px; bottom: 45px; } .g { width: 94px; height: 110px; } .g div { top: 10px; left: 10px; width: 70px; height: 70px; border-radius: 100%; border-width: 10px; border-color: #A7AAAB transparent #DFE0E3 #C5C6C8; } .g div:before { content: ""; position: absolute; display: block; border-style: solid; width: 90px; height: 90px; border-radius: inherit; border-width: 10px; border-color: #F3F3F3 transparent #A7AAAB #DFE0E3; top: -20px; left: -20px; } .g div:after { content: ""; position: absolute; display: block; border-style: solid; position: absolute; right: -3px; top: -3px; border-width: 13px 13px 0 0; border-color: #C5C6C8 transparent transparent transparent; } .g span { width: 30px; height: 34px; border-width: 10px 10px 4px 0; border-color: #F3F3F3 #DFE0E3 transparent transparent; bottom: -3px; right: -4px; } .g span:before { content: ""; position: absolute; display: block; border-style: solid; width: 20px; height: 20px; border-width: 10px 10px 4px 0; border-color: #A7AAAB #F3F3F3 transparent transparent; bottom: 0; right: 0; } .g span:after { content: ""; position: absolute; display: block; border-style: solid; border-width: 10px; border-color: transparent transparent transparent #DFE0E3; right: 10px; top: -10px; } .h { width: 92px; height: 110px; } .h div { height: 90px; top: 0; left: 0; border-color: #F3F3F3 #C5C6C8 #A7AAAB #DFE0E3; border-width: 10px; width: 0; } .h div:before { content: ""; position: absolute; display: block; border-style: solid; height: inherit; border-color: inherit; border-width: inherit; top: -10px; right: -82px; } .h div:after { content: ""; position: absolute; display: block; border-style: solid; width: 52px; left: 0; border-color: #A7AAAB transparent transparent transparent; border-width: 10px; top: 45px; } .h span { position: absolute; display: block; width: 52px; top: 25px; left: 0; border-color: transparent transparent #F3F3F3 transparent; border-width: 10px; } .i { width: 20px; height: 110px; } .i div { width: 0; left: 0; top: 0; height: 90px; border-color: #F3F3F3 #C5C6C8 #A7AAAB #DFE0E3; border-width: 10px; } .j { width: 67px; height: 110px; } .j div { width: 0; top: 0; left: 47px; height: 50px; border-color: #F3F3F3 #C5C6C8 #DFE0E3 #DFE0E3; border-width: 10px; } .j div:after { content: ""; position: absolute; display: block; border-style: solid; bottom: -50px; left: -60px; width: 50px; height: 40px; border-color: transparent #C5C6C8 #A7AAAB transparent; border-width: 0 10px 10px 10px; border-radius: 0 0 40px 40px; } .j div:before { content: ""; position: absolute; display: block; border-style: solid; bottom: -40px; left: -50px; width: 30px; height: 30px; border-color: transparent #DFE0E3 #F3F3F3 transparent; border-width: 0 10px 10px 10px; border-radius: 0 0 30px 30px; } .j span { height: 1px; bottom: -35px; left: -56px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); border-color: #DFE0E3 #F3F3F3 transparent #A7AAAB; border-width: 10px 10px 0 10px; } .k { width: 94px; height: 110px; } .k div { width: 0; left: 0; top: 0; height: 90px; border-color: #F3F3F3 #C5C6C8 #A7AAAB #DFE0E3; border-width: 10px; } .k div:before { content: ""; position: absolute; display: block; border-style: solid; height: 45px; top: 45px; left: 32px; border-color: transparent #DFE0E3 #A7AAAB #C5C6C8; border-width: 0 13px 10px 14px; -webkit-transform: skew(42deg); transform: skew(42deg); } .k div:after { content: ""; position: absolute; display: block; border-style: solid; height: 45px; top: -10px; left: 32px; border-color: #F3F3F3 #C5C6C8 transparent #DFE0E3; border-width: 10px 13px 0 14px; -webkit-transform: skew(-42deg); transform: skew(-42deg); } .k span { z-index: 1; width: 5px; height: 0; border-width: 0 6px 9px 10px; border-color: transparent transparent #F3F3F3 transparent; top: 36px; left: 0px; } .k span:before { content: ""; position: absolute; display: block; border-style: solid; width: 5px; height: 0; border-width: 9px 6px 0 10px; border-color: #A7AAAB transparent transparent transparent; top: 9px; left: -10px; } .l { width: 84px; height: 110px; } .l div { top: 90px; left: 0; height: 0; width: 74px; border-color: #F3F3F3 #C5C6C8 #A7AAAB transparent; border-width: 10px 10px 10px 0; } .l div:after { content: ""; position: absolute; display: block; border-style: solid; height: 90px; width: 0; border-color: #F3F3F3 transparent transparent #DFE0E3; border-width: 10px; top: -100px; } .l div:before { content: ""; position: absolute; display: block; border-style: solid; border-color: transparent transparent transparent #C5C6C8; border-width: 0 10px 10px; height: 90px; top: -100px; left: 10px; } .m { width: 110px; height: 110px; } .m div { top: 0; left: 0; height: 94px; width: 0; border-color: #F3F3F3 #C5C6C8 #A7AAAB #DFE0E3; border-width: 6px 9px 10px 10px; } .m div:before { content: ""; position: absolute; display: block; border-style: solid; left: 81px; height: inherit; width: inherit; border-color: inherit; border-width: 6px 10px 10px 9px; top: -6px; } .m div:after { content: ""; position: absolute; display: block; border-style: solid; top: -5px; left: 14px; height: 56px; border-color: transparent #DFE0E3 transparent transparent; border-width: 31px 10px 0 0; -webkit-transform: rotate(-33deg); transform: rotate(-33deg); box-shadow: 10px 0 0 #C5C6C8; -webkit-filter: drop-shadow(0 0 0 transparent); filter: drop-shadow(0 0 0 transparent); } .m span { z-index: 1; height: 67px; top: -10px; left: 58px; border-color: transparent #DFE0E3 transparent transparent; border-width: 0 10px 15px 0; -webkit-transform: rotate(33deg); transform: rotate(33deg); } .m span:before { content: ""; position: absolute; display: block; border-style: solid; top: -1px; left: 10px; height: 57px; border-color: transparent transparent transparent #C5C6C8; border-width: 31px 0 0 10px; } .m span:after { content: ""; position: absolute; display: block; border-style: solid; -webkit-transform: rotate(-33deg); transform: rotate(-33deg); border-width: 12px 6px; border-color: transparent transparent #A7AAAB transparent; bottom: -26px; left: 3px; } .n { width: 88px; height: 110px; } .n div { left: 0; top: 0; height: 94px; width: 0; border-color: #F3F3F3 #C5C6C8 #A7AAAB #DFE0E3; border-width: 6px 9px 10px 10px; } .n div:before { content: ""; position: absolute; display: block; border-style: solid; left: 59px; height: inherit; width: inherit; border-color: inherit; border-width: 10px 10px 6px 9px; top: -6px; } .n div:after { content: ""; position: absolute; display: block; border-style: solid; height: 91px; top: -9px; left: 24px; border-color: transparent #DFE0E3 transparent transparent; border-width: 30px 10px 0 0; -webkit-transform: rotate(-34deg); transform: rotate(-34deg); } .n span { top: 0; left: 0; height: 0; width: 0; border: 0; z-index: 0; } .n span:before { content: ""; position: absolute; display: block; border-style: solid; height: 91px; top: -13px; left: 33px; border-color: transparent transparent transparent #C5C6C8; border-width: 0 0 30px 10px; -webkit-transform: rotate(-34deg); transform: rotate(-34deg); } .o { width: 110px; height: 110px; } .o div { left: 10px; top: 10px; width: 70px; height: 70px; border-radius: 100%; border-width: 10px; border-color: #A7AAAB #DFE0E3 #F3F3F3 #C5C6C8; } .o div:before { content: ""; position: absolute; display: block; border-style: solid; width: 90px; height: 90px; border-radius: inherit; border-width: 10px; border-color: #F3F3F3 #C5C6C8 #A7AAAB #DFE0E3; top: -20px; left: -20px; } .p { width: 78px; height: 110px; } .p div { left: 10px; top: 10px; width: 40px; height: 33px; border-radius: 0 40px 40px 0; border-width: 10px; border-color: #A7AAAB #D.........完整代码请登录后点击上方下载按钮下载查看
网友评论0