H5痣相占卜页面+特效演示（酷炫特效）

用户10106350

发布于 2022-10-28 11:30:17

2.5K0

发布于 2022-10-28 11:30:17

文章被收录于专栏：WflynnWeb

代码已上传至github

github代码地址：https://github.com/Miofly/mio.git

html

<!DOCTYPE html>
<html style="background: rgb(212, 169, 126)">
<head>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <meta name="viewport"
      content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta content="yes" name="apple-mobile-web-app-capable"/>
  <meta content="black" name="apple-mobile-web-app-status-bar-style"/>
  <meta content="telephone=no" name="format-detection"/>
  <meta content="email=no" name="format-detection"/>
  <title>痣相占卜测运</title>
  <script src="jquery.js"></script>
  <script type="text/javascript" src="adaptive.js"></script>
  <link rel="stylesheet" type="text/css" href="css/index.css"/>
<!--<body style="background: rgb(212, 169, 126)">-->
<body style="background: url(../../img/mole/background@2x.png) no-repeat;background-size: cover;">
<div style="overflow-y: hidden!important;position: relative;padding-bottom: 0.3rem;">
  <div style="width:90%;height:6.2rem;background:rgba(253,249,241,1);border-radius:0.22rem;margin-top: 68%;margin-left: 5%;">
    <div style="width:100%;text-align: center;padding-top: 0.7rem">
      <img src="../../img/mole/choice.png" style="width: 5.56rem;height: 0.72rem;">
    </div>

    <div onclick="showChoice()" style="width:92%;height:1.06rem;background:rgba(246,234,223,1);border-radius:0.22rem;position: relative;left: 4%;
    line-height: 1.06rem;top: 0.52rem;">
      <span style="position: absolute;left: 10%;font-size:0.42rem;color:#CD2B34;" id="moleName">点击选择痣的位置</span>
      <img src="../../img/mole/select.png"
         style="width: 0.62rem;height: 0.34rem;position: absolute;right: 0.4rem;top: 0.36rem;">
    </div>
    <div onclick="ljfx()"
       style="width: 100%;text-align: center;margin-top: 1.16rem;
       -webkit-animation: scale-upOne 2s linear 0s infinite alternate;
       -o-animation: scale-upOne 2s linear 0s infinite alternate;animation: scale-upOne 2s linear 0s infinite alternate;">
      <img src="../../img/mole/iconnew@2x.png" style="width: 4.76rem;height: 0.94rem">
    </div>

    <div style="text-align: center;margin-top: 0.4rem">
      <span style="font-size:0.36rem;font-weight: bold">当前有<span style="color: #CD2B34" id="sjs"></span><span>正在在线解答</span></span>
    </div>
  </div>
  <div style="width: 90%;margin-left: 5%;margin-top: 0.8rem">
    <img src="../../img/mole/text.png" style="width: 100%;height: 3.26rem">
  </div>
</div>
<div id="choiceDiv"
   style="display: none;width:90%;height:8rem;background:rgba(255,255,255,1);border-radius:0.22rem;position: fixed;top: 25%;left: 5%;
   overflow-y: auto;padding-top: 20px;padding-bottom: 20px">
  <form style="width: 100%;height: 100%;overflow: auto" id="comment1s">
  </form>
</div>

<div id="tpfx" style="position: fixed;top: 0;z-index: 9999;display: none;width: 100%;height: 100%;background: rgb(17, 12, 44)">
  <div class="mainbox"
     style="background-image: url(../../img/mole/bgfx.png);background-size: 100%;background-repeat: no-repeat;">
    <div class="animation_box">
      <img src="../../img/mole/ani_line.png" class="ani_img ani_line">
    </div>
    <img src="../../img/mole/ani_cir1.png" class="ani_img ani_cir1">
    <img src="../../img/mole/ani_cir2.png" class="ani_img ani_cir2">
  </div>
</div>

<script>
  $('#sjs').html(randomNum(1111111,9999999))
    var tempList = [
        {name: '脸颊', val: '7'},
        {name: '眉毛', val: '9'},
        {name: '嘴角', val: '1'},
        {name: '眼角', val: '2'},
        {name: '嘴唇', val: '35'},
        {name: '眉心', val: '40'},
        {name: '眼眶', val: '36'},
        {name: '鼻梁', val: '37'},
        {name: '鼻尖', val: '38'},
        {name: '颧骨', val: '39'},
        {name: '额头', val: '6'},
        {name: '耳朵', val: '4'},
        {name: '鼻翼', val: '3'},
        {name: '左下巴', val: '5'},
        {name: '右下巴', val: '34'},
        {name: '锁骨部分', val: '17'},
        {name: '脖子', val: '8'},
        {name: '胸部', val: '10'},
        {name: '背部', val: '11'},
        {name: '腹部', val: '13'},
        {name: '腰部', val: '14'},
        {name: '臀部', val: '15'},
        {name: '肩部', val: '16'},
        {name: '肚脐周围', val: '12'},
        {name: '手腕', val: '21'},
        {name: '手背', val: '22'},
        {name: '手指', val: '24'},
        {name: '手掌心', val: '23'},
        {name: '上手臂', val: '18'},
        {name: '下手臂', val: '19'},
        {name: '胳膊肘', val: '20'},
        {name: '腋下', val: '25'},
        {name: '大腿', val: '26'},
        {name: '小腿', val: '27'},
        {name: '膝盖', val: '28'},
        {name: '脚踝', val: '29'},
        {name: '脚背', val: '31'},
        {name: '脚趾', val: '33'},
        {name: '脚后跟', val: '30'},
        {name: '脚底板', val: '32'},
    ]
    $('#comment1s').html('')
    var html = ''
    $.each(tempList, function (key, val) {
        html += '<div onclick="choiceMethod()" style="width: 100%;height: 1.2rem;border-bottom: 1px solid #eeeeee;line-height: 1.2rem;text-align: center">' +
            '<label style="width: 100%;display: block;font-size: 0.5rem;font-weight: bold">' +
            '<input type="radio" name="radio2" value="' + tempList[key].val + '" true_name="' + tempList[key].name + '">' + tempList[key].name + '</label></div>'
    })
    $('#comment1s').append(html)

    function choiceMethod() {
        $('#choiceDiv').hide(500)
        $('#moleName').html($('input[name="radio2"]:checked').attr('true_name'))
    }

    function showChoice() {
        $('#choiceDiv').show(500)
    }

    function ljfx() {
        if ($('input[name="radio2"]:checked').val() == undefined) {
            $('#choiceDiv').show(500)
        } else {
            $('#tpfx').show(500)
            setTimeout(function () {
                location.href = 'http://192.168.3.149:8888/mio/src/html/project/mole/share.html?num=' + $('input[name="radio2"]:checked').val() + ''
            }, 3000)
        }
    }

    function randomNum(min, max) { // 生成随机数 min<=num<=max
        return Math.floor(Math.random() * (max - min + 1)) + min
    }
</script>
</body>
</html>

css

*{padding:0;margin:0;word-wrap:break-word;}html{-webkit-text-size-adjust:none;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,span{padding:0;margin:0;box-sizing:border-box;}body{font:normal "Helvetica Neue",Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Heiti SC","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;}a{text-decoration:none;-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease;color:#333;}a{-webkit-tap-highlight-color:rgba(0,0,0,0);}a,img{border:none;}a,button{outline:none;border:0;}textarea,input,button,select{outline:0;}textarea{overflow:auto;resize:none;}ol,ul{list-style:none;}em,i,small,caption,th{font-weight:normal;font-style:normal;font-size:100%;}a,a:hover,a:active,a:visited,a:link,a:focus,button{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;outline:none;text-decoration:none;}html,body{width:100%;height:100%;}body{color:#333;background-color:#fff;}html{font-size:100px;}@keyframes scale-upOne{0%{opacity:1;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}100%{opacity:1;transform:scale(1.0)}}input[type=radio]{display:inline-block;vertical-align:middle;width:25px;height:25px;-webkit-appearance:none;background-color:transparent;border:0;outline:0 !important;line-height:20px;color:black;}input[type=radio]:after{content:"";display:block;width:20px;height:20px;border-radius:50%;text-align:center;line-height:15px;font-size:15px;color:white;border:2px solid #000;background-color:#fff;box-sizing:border-box;}input[type=radio]:checked:after{content:"L";transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);-webkit-transform:matrix(-0.766044,-0.642788,-0.642788,0.766044,0,0);border-color:#7bbfea;background-color:#7bbfea;}.mainbox{margin:0 auto;width:100%;min-height:100%;position:relative;padding-top:1px;padding-bottom:20px;}.order{position:absolute;z-index:100;display:block;right:0;top:0.8rem;height:30px;}.animation_box{position:absolute;left:32%;width:36%;height:2.7rem;top:3.3rem;overflow:hidden;border-radius:100%;}.ani_img{display:block;position:absolute;}.ani_line{width:100%;}.ani_cir1{width:42.925%;left:28.5375%;top:3rem;}.ani_cir2{width:45.9598%;left:27.0201%;top:3rem;}img.ani_cir1{-webkit-transform-origin:center center;transform-origin:center center;-webkit-animation-fill-mode:both;animation-fill-mode:both;animation:rotates 3s linear infinite;}@keyframes rotates{0%{transform:rotate(360deg);}100%{transform:rotate(0deg);}}img.ani_cir2{-webkit-animation-fill-mode:both;animation-fill-mode:both;animation:rotates_back 3s linear infinite;}@keyframes rotates_back{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}img.ani_line{-webkit-animation-fill-mode:both;animation-fill-mode:both;animation:line_move 4s linear infinite;}@keyframes line_move{0%{top:0;}50%{top:96%;}100%{top:0;}}.getbtn{text-align:center;line-height:50px;border-radius:25px;color:#000;font-size:18px;position:relative;width:90%;left:5%;margin-top:21.5rem;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#00f2ec),color-stop(100%,#00bcf2));background:-webkit-linear-gradient(top,#00f2ec 0%,#00bcf2 100%);background:linear-gradient(to bottom,#00f2ec 0%,#00bcf2 100%);font-weight:bold;}

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-06-16，如有侵权请联系 cloudcommunity@tencent.com 删除

css