tourguide实现手机端移动端app新手引导指引教程效果代码
代码语言:html
所属分类:布局界面
代码描述:tourguide实现手机端移动端app新手引导指引教程效果代码
代码标签: 端 移动 端 app 新手 引导 指引 教程 效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/popper-min.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.5.15.3.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/all.5.15.4.js"></script> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/tourguide.css"> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tourguide.min.js"></script> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); :root{ --border-radius-big: 1rem; --border-radius-small: .3rem; --box-shadow: 14px 26px 55px -19px rgba(0,0,0,0.61); --green-primary: #5DB075; --green-secondary: #4B9460; --light-grey: #E8E8E8; --dark-grey: #BDC5CD; --font-dark: #000; --font-light: #666666 --font-white: #fff; } *, *::after, *::before{ font-family: 'Poppins', sans-serif; margin: 0; padding: 0; box-sizing: border-box; } /* width */ ::-webkit-scrollbar { width: 0px; } /* Track */ ::-webkit-scrollbar-track { background: transparent; } /* Handle */ ::-webkit-scrollbar-thumb { background: transparent; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: transparent; } body{ background: var(--light-grey) !important; height: 100vh; width: 100%; overflow: hidden; } .main{ width: 100%; display: flex; justify-content: center; align-items: center; height: 100%; } .tour_btn{ position: fixed; top: 2%; left: 10%; padding: .5rem 1rem; cursor: pointer; border-radius: var(--border-radius-small); background: red; color: white; border: none; font-size: 1.2rem; font-weight:600; z-index: 99; } .phone{ height: 800px; min-width: 400px; width: 400px; border-radius: var(--border-radius-big); overflow: hidden; background: #fff; box-shadow: var(--box-shadow); position: relative; } .phone_header{ height: 25px; width: 100%; background-color: #060606; position: relative; } .phone_header::after{ content: ""; width: 50px; height: 10px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: grey; margin: auto; border-radius: var(--border-radius-small); } .phone_footer{ height: 50px; widht: 100%; background-color: #060606; position: relative; } .phone_footer::after{ content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; height: 40px; width: 40px; border-radius: 50%; background: grey; margin:auto; } .phone_main{ position: relative; background: #fff; height: 725px; overflow: auto; width: 400px; } .phone_main_header{ display: flex; flex-direction: row; justify-content: space-between; background: var(--green-primary); padding: .5rem 1rem; position: sticky; top: 0; left: 0; right: 0; z-index: 2; font-weight: 500; } .user_header{ padding: 2.5rem 1rem 7rem; background: var(--green-primary); position: relative; display: flex; flex-direction: column; } .user_titel{ display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; color: white; } .user_titel span{ cursor: pointer; } .user_image { position: absolute; bottom: -5rem; left: 0; right: 0; margin: auto; height: 10rem; width: 10rem; background: #fff; box-shadow: var(--box-shadow); border-radius: 50%; overflow: hidden; } .user_image img{ width: 100%; height: 100%; padding: .3rem; border-radius: 50%; } .user_main{ display: flex; justify-content: center; padding-top: 6rem; text-align: center; } .posts{ display: flex; flex-direction: column; width: 100%; height: 100%; padding: .3rem .5rem 4rem; position: relative; } .post_card{ text-align: left; width: 80%; margin: 1rem auto; padding: 1rem .7rem ; position: relative; box-shadow: var( --box-shadow); border-radius: var(--border-radius-big); } .post_card::before{ font-family: "Font Awesome 5 Brands"; content: "\f099"; color: var(--green-primary); font-weight: 700; display: inline-block; text-align: center; font-style: normal; font-variant: normal; text-rendering: auto; -webkit-font-smoothing: antialiased; position: absolute; left:-1rem; } .subject{ font-weight: 600; } .description{ font-size: .9rem; line-height: 1.4; } .action{ margin-top: .5rem; display: flex; justify-content: space-around; color: white; } .action span{ height: 40px; width: 40px; border-radius: 50%; padding: .5rem; text-align: center; cursor: pointer; font-weight: 600; background: var(--green-secondary); } .gallery{ display: flex; flex-wrap: wrap; justify-content: space-around; gap: 1rem; padding: 1rem .5rem; } .gallery_image{ height: 150px; width: 150px; background: #000; position: relative; } .gallery_image img{ height: 100%; width: 100%; object-fit: cover; border-radius: var(--border-radius-small); box-shadow: var(--box-shadow); } .gallery_image img:hover{ transform: scale(1.1) } .phone_main_footer{ position: sticky; bottom: 0; left: 0; right: 0; padding: .5rem 1rem; display: flex; justify-content: space-around; background: rgba( 255, 255, 255, 0.25 ); box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); backdrop-filter: blur( 4px ); -webkit-backdrop-filter: blur( 4px ); border: none; border-radius: 1rem 1rem 0 0; } .tablinks{ width: 20%; padding: .5rem 0; cursor: pointer; background: none; color: var(--font-dark); font-weight: 700; border: none; font-size: 1.1rem; } .phone_main_footer button.active { border-bottom: 5px solid var(--green-primary); } </style> </head> <body> <button class="tour_btn" id="tourbutton"> Start tour </button> <div class="main"> <div class="phone"> <div class="phone_header"></div> <div class="phone_main"> <div class="phone_main_header"> <div class="time"><span id="time_span"></span></div> <div class="header_icon"> <span><i class="fas fa-wifi"></i></span> <span><i class="fas fa-signal"></i></span> <span><i class="fas fa-battery-three-quarters"></i></span> </div> </div> <div class="phone_main_body"> <div id="Profil" class="tabcontent"> <div class="user_header"> <div class="user_titel"> <span data-tour="step: 2; title: Settings; content: Here you can update your privacy settings and other stuff">Settings</span> <h1>Profile </h1> <span data-tour="step: 1; title: Login; content: Click here to Login/out to your account">Logout</span> </div> <div class="user_image" data-tour="step: 3; title: Profil-Pic; content: Show the world your face and upload your best personal snapshot"><img src="//repo.bfw.wiki/bfwrepo/image/608013b6c1026.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_100.........完整代码请登录后点击上方下载按钮下载查看
网友评论0