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); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0