css3 实现大转盘

最新推荐文章于 2024-05-19 21:18:03 发布

编程世界-云

最新推荐文章于 2024-05-19 21:18:03 发布

阅读量974

点赞数

文章标签： css html css3 前端 web前端

本文链接：https://blog.csdn.net/weixin_45761317/article/details/104032256

版权

效果

完整代码

<!DOCTYPE html>
<html lang="CN">
<head>
    <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: 25%;}
    .turntable-wrap .turntable-main .awards-1{-webkit-transform: translate(

最低0.47元/天解锁文章

编程世界-云

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3 实现大转盘

效果完整代码<!DOCTYPE html><html lang="CN"><head> <meta charset="UTF-8"> <meta name="keywords" content="关键字" /> <meta name="description" content="描述" />...
复制链接

扫一扫