旋转控制图形化样式获取
代码语言:html
所属分类:其他
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style type="text/css" media="all"> @import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap'); :root { --bgColor: #015668; --fontColor: #fff1cf; --buttonBorderColor: #fff1cf; --buttonColor: transparent; --buttonTextColor: #fff1cf; --buttonHoverColor: #fff1cf; --buttonHoverTextColor: #015668; --tileColor: white; } * { margin: 0; padding: 0; box-sizing: border-box; } html { height: 100%; width: 100%; overflow: hidden; } body { background-color: var(--bgColor); color: var(--fontColor); font-family: 'Montserrat', sans-serif; } .wrapper { height: 100vh; width: 100vw; display: flex; flex-direction: column; justify-content: center; align-items: center; } .controls { text-align: center; margin: 30px 0; } .control { margin: 10px 0; } .control span { font-weight: bold; padding-left: 10px; position: relative; display: inline-block; -webkit-transform: translateY(-4px); transform: translateY(-4px) } h1 { margin-bottom: 30px; } .tile { width: 150px; height: 150px; background-color: var(--tileColor); position: relative; z-index: 100; border: 5px solid var(--tileColor); background-image: url('http://repo.bfw.wiki/bfwrepo/image/5d653be845a41.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_400,h_400,/quality,q_90'); background-size: cover; } .bottom { padding-top: 50px; text-align: center; } button { padding: 10px 15px; font-weight: bold; background-color: var(--buttonColor); border: 2px solid var(--buttonBorderColor); color: var(--buttonTextColor); cursor: pointer; margin-bottom: 25px; outline: none; transition: background-color .3s ease; position: relative; display: inline-block; } button:hover { background-color: var(--buttonHoverColor); color: var(--buttonHoverTextColor); } button:active { -webkit-animation: buttonClick; animation: buttonClick; -webkit-animation-duration: .3s; animation-duration: .3s; } #transform { display: block; } #clipboard { opacity: 0; } .tooltip { pointer-events: none; width: 120px; background-color: #000; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; -webkit-transform: translate(50%,50%); transform: translate(50%,50%); position: absolute; z-index: 100; bottom: 125%; margin-left: -60px; margin-bottom: 20px; opacity: 0; transition: opacity 0.5s; } .tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #000 transparent transparent transparent; } @-webkit-keyframes buttonClick { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes buttonClick { 0% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } </style> </head> <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0