效果
完整代码
<!DOCTYPE html>
<html lang="CN">
<head>
web前端开发学习Q-q-u-n:784783012 ,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法
(详细的前端项目实战教学视频,PDF)
<meta charset="UTF-8">
<meta name="keywords" content="关键字" />
<meta name="description" content="描述" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no,email=no">
<meta name="wap-font-scale" content="no">
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<title>大转盘</title>
<link rel="stylesheet" href="css/common.css">
<style>
/* 大转盘 */
.turntable-wrap{position: relative;background: url(../images/bg-turntable.jpg) no-repeat center top #030406;background-size: 100% auto;}
.turntable-wrap .turntable-times{position: absolute;z-index: 3;left: 1rem;right: 1rem;top: 75%;font-size: 3rem;color: #fff;text-align: center;}
.turntable-wrap .turntable-times strong{color: #f00;}
.turntable-wrap .turntable-logo{position: absolute;z-index: 2;left: 50%;bottom: 2rem;width: 40%;-webkit-transform: translate(-50%, 0);-ms-transform: translate(-50%, 0);transform: translate(-50%, 0);}
.turntable-wrap .turntable-main{position: absolute;z-index: 4;left: 0;top: 14%;width: 100%;}
.turntable-wrap .turntable-main [class^="awards-"]{position: absolute;left: 50%;top: 0;z-index: 2;width: 12.5%;height: 50%;font-size: 1.8rem;font-weight: bold;color: #444;text-align: center;-webkit-transform: translate(-50%, 0) rotate(0);-ms-transform: translate(-50%, 0) rotate(0);transform: translate(-50%, 0) rotate(0);-webkit-transform-origin: center bottom;-ms-transform-origin: center bottom;transform-origin: center bottom;}
.turntable-wrap .turntable-main [class^="awards-"]:before{content: "";display: block;height: