css实现一个材料设计标高动画交互效果代码
代码语言:html
所属分类:其他
代码描述:css实现一个材料设计标高动画交互效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <style> /* Palette generated by Material Palette - materialpalette.com/cyan/pink */ body { background-color: #B2EBF2; font-family: "Roboto", sans-serif; font-weight: 300; font-size: 14px; } .isometric { -webkit-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(-14%, -34%) scale3d(1, 1, 1); -moz-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(-14%, -34%) scale3d(1, 1, 1); -ms-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(-14%, -34%) scale3d(1, 1, 1); -o-transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(-14%, -34%) scale3d(1, 1, 1); transform: rotateX(60deg) rotateY(0deg) rotateZ(-45deg) translate(-14%, -34%) scale3d(1, 1, 1); -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .appBar { width: 100%; height: 56px; border-radius: 0; background: #00BCD4; border-bottom: 2px solid #00626e; border-left: 2px solid #00626e; -webkit-transform: translate3d(0, 0, 24px); -moz-transform: translate3d(0, 0, 24px); -ms-transform: translate3d(0, 0, 24px); -o-transform: translate3d(0, 0, 24px); transform: translate3d(0, 0, 24px); box-shadow: -28.8px 36px 12px rgba(0, 0, 0, 0.1), -28.8px 31.2px 12px rgba(0, 0, 0, 0.1); -webkit-transition: -webkit-transform 0.5s, box-shadow 0.5s; -moz-transition: -moz-transform 0.5s, box-shadow 0.5s; transition: transform 0.5s, box-shadow 0.5s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: hideDelay 1s, drop 2s 1s; -moz-animation: hideDelay 1s, drop 2s 1s; animation: hideDelay 1s, drop 2s 1s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 14px; } .appBar:before { -webkit-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -moz-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -ms-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -o-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); content: "4dp"; display: block; position: absolute; right: 100%; top: 50%; margin-top: -1em; opacity: 0; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; -moz-transition: opacity 0.5s, -moz-transform 0.5s; transition: opacity 0.5s, transform 0.5s; } .appBar:hover { -webkit-transform: translate3d(0, 0, 30px); -moz-transform: translate3d(0, 0, 30px); -ms-transform: translate3d(0, 0, 30px); -o-transform: translate3d(0, 0, 30px); transform: translate3d(0, 0, 30px); box-shadow: -36px 45px 15px rgba(0, 0, 0, 0.1), -36px 39px 15px rgba(0, 0, 0, 0.1); } .appBar:hover:before { -webkit-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); -moz-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); -ms-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); -o-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); opacity: 0.8; } .appBar:active { -webkit-transform: translate3d(0, 0, 24px); -moz-transform: translate3d(0, 0, 24px); -ms-transform: translate3d(0, 0, 24px); -o-transform: translate3d(0, 0, 24px); transform: translate3d(0, 0, 24px); box-shadow: -28.8px 36px 12px rgba(0, 0, 0, 0.1), -28.8px 31.2px 12px rgba(0, 0, 0, 0.1); } .appBar:active:before { content: "4dp"; opacity: 0.8; } .fab { width: 56px; height: 56px; border-radius: 50%; background: #FF4081; border-bottom: 2px solid #d9004a; border-left: 2px solid #d9004a; -webkit-transform: translate3d(0, 0, 36px); -moz-transform: translate3d(0, 0, 36px); -ms-transform: translate3d(0, 0, 36px); -o-transform: translate3d(0, 0, 36px); transform: translate3d(0, 0, 36px); box-shadow: -43.2px 54px 18px rgba(0, 0, 0, 0.1), -43.2px 46.8px 18px rgba(0, 0, 0, 0.1); -webkit-transition: -webkit-transform 0.5s, box-shadow 0.5s; -moz-transition: -moz-transform 0.5s, box-shadow 0.5s; transition: transform 0.5s, box-shadow 0.5s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: hideDelay 1.5s, drop 2s 1.5s; -moz-animation: hideDelay 1.5s, drop 2s 1.5s; animation: hideDelay 1.5s, drop 2s 1.5s; cursor: pointer; position: absolute; bottom: 16px; right: 16px; } .fab:before { -webkit-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -moz-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -ms-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -o-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); content: "6dp"; display: block; position: absolute; right: 100%; top: 50%; margin-top: -1em; opacity: 0; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; -moz-transition: opacity 0.5s, -moz-transform 0.5s; transition: opacity 0.5s, transform 0.5s; } .fab:hover { -webkit-transform: translate3d(0, 0, 42px); -moz-transform: translate3d(0, 0, 42px); -ms-transform: translate3d(0, 0, 42px); -o-transform: translate3d(0, 0, 42px); transform: translate3d(0, 0, 42px); box-shadow: -50.4px 63px 21px rgba(0, 0, 0, 0.1), -50.4px 54.6px 21px rgba(0, 0, 0, 0.1); } .fab:hover:before { -webkit-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); -moz-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); -ms-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); -o-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); opacity: 0.8; } .fab:active { -webkit-transform: translate3d(0, 0, 72px); -moz-transform: translate3d(0, 0, 72px); -ms-transform: translate3d(0, 0, 72px); -o-transform: translate3d(0, 0, 72px); transform: translate3d(0, 0, 72px); box-shadow: -86.4px 108px 36px rgba(0, 0, 0, 0.1), -86.4px 93.6px 36px rgba(0, 0, 0, 0.1); } .fab:active:before { content: "12dp"; opacity: 0.8; } .button { width: 100px; height: 36px; border-radius: 2px; background: #e1e1e1; border-bottom: 2px solid #aeaeae; border-left: 2px solid #aeaeae; -webkit-transform: translate3d(0, 0, 12px); -moz-transform: translate3d(0, 0, 12px); -ms-transform: translate3d(0, 0, 12px); -o-transform: translate3d(0, 0, 12px); transform: translate3d(0, 0, 12px); box-shadow: -14.4px 18px 6px rgba(0, 0, 0, 0.1), -14.4px 15.6px 6px rgba(0, 0, 0, 0.1); -webkit-transition: -webkit-transform 0.5s, box-shadow 0.5s; -moz-transition: -moz-transform 0.5s, box-shadow 0.5s; transition: transform 0.5s, box-shadow 0.5s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: hideDelay 0.5s, drop 2s 0.5s; -moz-animation: hideDelay 0.5s, drop 2s 0.5s; animation: hideDelay 0.5s, drop 2s 0.5s; cursor: pointer; position: absolute; bottom: 8px; left: 8px; } .button:before { -webkit-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -moz-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -ms-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -o-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); content: "2dp"; display: block; position: absolute; right: 100%; top: 50%; margin-top: -1em; opacity: 0; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; -moz-transition: opacity 0.5s, -moz-transform 0.5s; transition: opacity 0.5s, transform 0.5s; } .button:hover { -webkit-transform: translate3d(0, 0, 18px); -moz-transform: translate3d(0, 0, 18px); -ms-transform: translate3d(0, 0, 18px); -o-transform: translate3d(0, 0, 18px); transform: translate3d(0, 0, 18px); box-shadow: -21.6px 27px 9px rgba(0, 0, 0, 0.1), -21.6px 23.4px 9px rgba(0, 0, 0, 0.1); } .button:hover:before { -webkit-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); -moz-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); -ms-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); -o-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 56px); opacity: 0.8; } .button:active { -webkit-transform: translate3d(0, 0, 48px); -moz-transform: translate3d(0, 0, 48px); -ms-transform: translate3d(0, 0, 48px); -o-transform: translate3d(0, 0, 48px); transform: translate3d(0, 0, 48px); box-shadow: -57.6px 72px 24px rgba(0, 0, 0, 0.1), -57.6px 62.4px 24px rgba(0, 0, 0, 0.1); } .button:active:before { content: "8dp"; opacity: 0.8; } .dialogContainer { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transition: opacity 0.25s; -moz-transition: opacity 0.25s; transition: opacity 0.25s; } .dialog { width: 240px; height: 240px; border-radius: 2px; background: #FFFFFF; border-bottom: 2px solid #cccccc; border-left: 2px solid #cccccc; -webkit-transform: translate3d(0, 0, 144px); -moz-transform: translate3d(0, 0, 144px); -ms-transform: translate3d(0, 0, 144px); -o-transform: translate3d(0, 0, 144px); transform: translate3d(0, 0, 144px); box-shadow: -172.8px 216px 72px rgba(0, 0, 0, 0.1), -172.8px 187.2px 72px rgba(0, 0, 0, 0.1); -webkit-transition: -webkit-transform 0.5s, box-shadow 0.5s; -moz-transition: -moz-transform 0.5s, box-shadow 0.5s; transition: transform 0.5s, box-shadow 0.5s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: hideDelay 6s, drop 2s 6s; -moz-animation: hideDelay 6s, drop 2s 6s; animation: hideDelay 6s, drop 2s 6s; position: absolute; top: 50%; left: 50%; margin-left: -120px; margin-top: -120px; } .dialog:before { -webkit-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -moz-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -ms-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); -o-transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); transform: rotateX(-90deg) rotateY(-45deg) rotateZ(0deg) translate3d(0, 0, 40px); content: "24dp"; display: block; position: absolute; righ.........完整代码请登录后点击上方下载按钮下载查看
网友评论0