首页
Search
1
Linux 下 Bash 脚本 bad interpreter 报错的解决方法
45 阅读
2
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
38 阅读
3
如何在 IOS Shadowrocket 上配置服务
34 阅读
4
Arch Linux 下解决 KDE Plasma Discover 的 Unable to load applications 错误
34 阅读
5
如何在 Clash for Windows 上配置服务
30 阅读
clash
服务器
javascript
全部
游戏资讯
登录
Search
加速器之家
累计撰写
635
篇文章
累计收到
0
条评论
首页
栏目
clash
服务器
javascript
全部
游戏资讯
页面
搜索到
339
篇与
的结果
2024-08-22
解决iOS端微信H5网页不自动播放音乐问题
iso端不自动播放音乐是个问题,我们可以通过微信的jssdk来解决<?php header("Access-Control-Allow-Origin:*"); $appid = "appid"; $secret = "secret"; // 步骤1.生成签名的随机串 function nonceStr($length){ $str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1NGJBQRSTUVWXYZ';//随即串,62个字符 $strlen = 62; while($length > $strlen){ $str .= $str; $strlen += 62; } $str = str_shuffle($str); return substr($str,0,$length); } // 步骤2.获取access_token $result = http_get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$secret); $json = json_decode($result,true); $access_token = $json['access_token']; function http_get($url){ $oCurl = curl_init(); if(stripos($url,"https://")!==FALSE){ curl_setopt($oCurl, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($oCurl, CURLOPT_SSL_VERIFYHOST, FALSE); curl_setopt($oCurl, CURLOPT_SSLVERSION, 1); //CURL_SSLVERSION_TLSv1 } curl_setopt($oCurl, CURLOPT_URL, $url); curl_setopt($oCurl, CURLOPT_RETURNTRANSFER, 1 ); $sContent = curl_exec($oCurl); $aStatus = curl_getinfo($oCurl); curl_close($oCurl); if(intval($aStatus["http_code"])==200){ return $sContent; }else{ return false; } } // 步骤3.获取ticket $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$access_token"; $res = json_decode ( http_get ( $url ) ); $ticket = $res->ticket; // 步骤4.生成wx.config需要的参数 $surl = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; $ws = getWxConfig( $ticket,$surl,time(),nonceStr(16) ); function getWxConfig($jsapiTicket,$url,$timestamp,$nonceStr) { $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url"; $signature = sha1 ( $string ); $WxConfig["appId"] = $appid; $WxConfig["nonceStr"] = $nonceStr; $WxConfig["timestamp"] = $timestamp; $WxConfig["url"] = $url; $WxConfig["signature"] = $signature; $WxConfig["rawString"] = $string; return $WxConfig; } ?> <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style"> </head> <script> <script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script> // 配置接口成功 wx.config({ appId: '<?php echo $appid; ?>', timestamp: '<?php echo $ws["timestamp"]; ?>', nonceStr: '<?php echo $ws["nonceStr"]; ?>', signature: '<?php echo $ws["signature"]; ?>', jsApiList: [ // 必填,需要使用的JS接口列表 'playVoice', // 播放录音的接口 ] }); wx.ready(function() { document.getElementById('music1').play(); $('#music1').on('ended',function(){ document.getElementById('music1').play(); }) }); </script> </body> </html>
2024年08月22日
4 阅读
0 评论
0 点赞
2024-08-22
HTML动画,花飘动效果
html代码<div id="banner"> <img src="https://www.tpxhm.com/fdetail/images/2018/fiveActive/banner_01.jpg" alt=""> <a href="javascript:void(0)" onclick="openS();return false;" class="btn"> <img src="https://www.tpxhm.com/fdetail/images/2018/fiveActive/btn1_03.png" alt=""> </a> <div class="hua hua1"><img src="https://www.tpxhm.com/fdetail/images/2018/fiveActive/hua1.png" alt=""></div> <div class="hua hua2"><img src="https://www.tpxhm.com/fdetail/images/2018/fiveActive/hua2.png" alt=""></div> <div class="hua hua3"><img src="https://www.tpxhm.com/fdetail/images/2018/fiveActive/hua4.png" alt=""></div> </div>css代码:/*banner*/ #banner { width: 100%; position: relative; overflow: hidden; } #banner > img { width: 100%; min-height: 340px; } #banner .btn{ width:21%; position: absolute; left:39.5%; bottom:-10%; z-index:3; } .hua{ position: absolute; } .hua1{ width:5%; animation: dong1 6s linear infinite ; -webkit-animation:dong1 6s linear infinite ; -o-animation:dong1 6s linear infinite ; -moz-animation:dong1 6s linear infinite ; } .hua2{ width:3%; animation: dong2 7s linear infinite ; -webkit-animation:dong2 7s linear infinite ; -o-animation:dong2 7s linear infinite ; -moz-animation:dong2 7s linear infinite ; } .hua3{ width:6%; animation: dong3 8s linear infinite ; -webkit-animation:dong3 8s linear infinite ; -o-animation:dong3 8s linear infinite ; -moz-animation:dong3 8s linear infinite ; } /*动画一*/ @keyframes dong1{ 0% {left: 83%;top: 0;} 20% {left: 70%;top: 11%;} 40% {left: 54%;top: 25%;} 60% {left: 37%;top: 36%;} 80% {left: 16%;top: 46%;} 100% {left: -10%;top: 54%;} } @-webkit-keyframes dong1{ 0% {left: 83%;top: 0;} 20% {left: 70%;top: 11%;} 40% {left: 54%;top: 25%;} 60% {left: 37%;top: 36%;} 80% {left: 16%;top: 46%;} 100% {left: -10%;top: 54%;} } @-moz-keyframes dong1{ 0% {left: 83%;top: 0;} 20% {left: 70%;top: 11%;} 40% {left: 54%;top: 25%;} 60% {left: 37%;top: 36%;} 80% {left: 16%;top: 46%;} 100% {left: -10%;top: 54%;} } @-o-keyframes dong1{ 0% {left: 83%;top: 0;} 20% {left: 70%;top: 11%;} 40% {left: 54%;top: 25%;} 60% {left: 37%;top: 36%;} 80% {left: 16%;top: 46%;} 100% {left: -10%;top: 54%;} } /*动画二*/ @keyframes dong2{ 0% {left: 98%;top: 23%;} 10% {left: 92%;top: 33%;} 20% {left: 85%;top: 42%;} 30% {left: 76.5%;top: 50%;} 40% {left: 68%;top: 58%;} 50% {left: 59%;top: 67%;} 60% {left: 48%;top: 74.6%;} 70% {left: 37%;top: 83%;} 80% {left: 24%;top: 88%;} 90% {left: 12%;top: 94%;} 100% {left: -5%;top: 98%;} } @-webkit-keyframes dong2{ 0% {left: 98%;top: 23%;} 10% {left: 92%;top: 33%;} 20% {left: 85%;top: 42%;} 30% {left: 76.5%;top: 50%;} 40% {left: 68%;top: 58%;} 50% {left: 59%;top: 67%;} 60% {left: 48%;top: 74.6%;} 70% {left: 37%;top: 83%;} 80% {left: 24%;top: 88%;} 90% {left: 12%;top: 94%;} 100% {left: -5%;top: 98%;} } @-moz-keyframes dong2{ 0% {left: 98%;top: 23%;} 10% {left: 92%;top: 33%;} 20% {left: 85%;top: 42%;} 30% {left: 76.5%;top: 50%;} 40% {left: 68%;top: 58%;} 50% {left: 59%;top: 67%;} 60% {left: 48%;top: 74.6%;} 70% {left: 37%;top: 83%;} 80% {left: 24%;top: 88%;} 90% {left: 12%;top: 94%;} 100% {left: -5%;top: 98%;} } @-o-keyframes dong2{ 0% {left: 98%;top: 23%;} 10% {left: 92%;top: 33%;} 20% {left: 85%;top: 42%;} 30% {left: 76.5%;top: 50%;} 40% {left: 68%;top: 58%;} 50% {left: 59%;top: 67%;} 60% {left: 48%;top: 74.6%;} 70% {left: 37%;top: 83%;} 80% {left: 24%;top: 88%;} 90% {left: 12%;top: 94%;} 100% {left: -5%;top: 98%;} } /*动画三*/ @keyframes dong3{ 0% {left: 39%;top: 75.8%;} 50% {left: 18%;top: 86.5%;} 100% {left: -10%;top: 96%;} } @-webkit-keyframes dong3{ 0% {left: 39%;top: 75.8%;} 50% {left: 18%;top: 86.5%;} 100% {left: -10%;top: 96%;} } @-moz-keyframes dong3{ 0% {left: 39%;top: 75.8%;} 50% {left: 18%;top: 86.5%;} 100% {left: -10%;top: 96%;} } @-o-keyframes dong3{ 0% {left: 39%;top: 75.8%;} 50% {left: 18%;top: 86.5%;} 100% {left: -10%;top: 96%;} }
2024年08月22日
3 阅读
0 评论
0 点赞
2024-08-22
css3实现舞台灯管效果
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div class="head pr"> <a href="https://www.tpxhm.com/fdetail/44.html" target="_blank"> <img src="https://www.tpxhm.com/fdetail/images/banner_01.jpg" alt=""> <i class="hoverlight"></i> <i class="hoverlight1"></i> </a> </div> <style>.pr{ position: relative} .banner{ background: #170f1c; overflow: hidden} .banner img{ width: 100%} .banner ul{ position: absolute; right:50%; top:50%; margin-right: -32%; margin-top:10%; width:30%; color: #fff; text-align: center } .banner ul li{ width: 20%; display: inline-block; margin-right: 3%; line-height: 30px; font-size: 18px} .banner ul li:nth-child(1) img{ animation:rollIn 1s; -webkit-animation: rollIn 1s } .banner ul li:nth-child(2) img{ animation:rollIn 2s; -webkit-animation: rollIn 1.4s } .banner ul li:nth-child(3) img{ animation:rollIn 3s; -webkit-animation: rollIn 1.8s } .banner ul li:nth-child(4) img{ animation:rollIn 3s; -webkit-animation: rollIn 2.2s } .hoverlight { cursor: pointer; position: absolute; left: 0px; bottom: -10%; width: 20%; height: 200%; background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); animation: light_move 5s 2s infinite linear; -webkit-animation: light_move 4.5s 2s infinite linear; transform-origin:0 bottom; -webkit-transform-origin:0 bottom; }.hoverlight1 { cursor: pointer; position: absolute; left: 90%; bottom: -30%; width: 10%; height: 200%; background-image: linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image: -moz-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image: -webkit-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image: -o-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); background-image: -ms-linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,0.1),rgba(255,255,255,0)); animation: light_move1 5s 4s infinite linear; -webkit-animation: light_move1 4.5s 2s infinite linear; transform-origin:0 bottom; -webkit-transform-origin:0 bottom; } @keyframes bounce{0%,20%,53%,80%,to{animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-5px,0)}70%{animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,-4px,0)}} @keyframes rollIn{0%{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}to{opacity:1;transform:none}}.rollIn{animation-name:rollIn}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(-120deg)}} @keyframes rotate{ 0%{ -webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);transform: rotate(0deg);} 50%{ -webkit-transform: rotate(360deg);-moz-transform: rotate(90deg);transform: rotate(360deg);} 100%{ -webkit-transform: rotate(0deg);-moz-transform: rotate(90deg);transform: rotate(0deg);} } @keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.move{ -webkit-animation: movement 3s linear normal both infinite; -o-animation: movement 3s linear normal both infinite; animation: movement 3s linear normal both infinite; } .move1{ -webkit-animation: movement1 3s linear normal both infinite; -o-animation: movement1 3s linear normal both infinite; animation: movement1 3s linear normal both infinite; } .move2{ -webkit-animation: movement2 3s linear normal both infinite; -o-animation: movement2 3s linear normal both infinite; animation: movement2 3s linear normal both infinite; } .move3{ -webkit-animation: movement3 3s linear normal both infinite; -o-animation: movement3 3s linear normal both infinite; animation: movement3 3s linear normal both infinite; }@keyframes movement { 0% { -webkit-transform: translate(0px,-3px); transform: translate(0px,-3px); } 25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); } 50% { -webkit-transform: translate(6px,10px); transform: translate(6px,10px); } 75% { -webkit-transform: translate(8px,0px); transform: translate(8px,0px); } 100% { -webkit-transform: translate(0px,-3px); transform: translate(0px,-3px); } } @-webkit-keyframes movement { 0% { -webkit-transform: translate(0px,-3px); transform: translate(0px,-3px); } 25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); } 50% { -webkit-transform: translate(6px,10px); transform: translate(6px,10px); } 75% { -webkit-transform: translate(8px,0px); transform: translate(8px,0px); } 100% { -webkit-transform: translate(0px,-3px); transform: translate(0px,-3px); } } @keyframes movement1 { 0% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); } 25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); } 50% { -webkit-transform: translate(-6px,-10px); transform: translate(-6px,-10px); } 75% { -webkit-transform: translate(8px,0px); transform: translate(8px,0px); } 100% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); } } @-webkit-keyframes movement1 { 0% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); } 25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); } 50% { -webkit-transform: translate(-6px,-10px); transform: translate(-6px,-10px); } 75% { -webkit-transform: translate(8px,0px); transform: translate(8px,0px); } 100% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); } } @keyframes movement2 { 0% { -webkit-transform: translate(10px,3px); transform: translate(10px,3px); } 25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); } 50% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); } 75% { -webkit-transform: translate(-8px,0px); transform: translate(-8px,0px); } 100% { -webkit-transform: translate(10px,3px); transform: translate(10px,3px); } } @-webkit-keyframes movement2 { 0% { -webkit-transform: translate(10px,3px); transform: translate(10px,3px); } 25% { -webkit-transform: translate(3px,6px); transform: translate(3px,6px); } 50% { -webkit-transform: translate(6px,-3px); transform: translate(6px,-3px); } 75% { -webkit-transform: translate(-8px,0px); transform: translate(-8px,0px); } 100% { -webkit-transform: translate(10px,3px); transform: translate(10px,3px); } }@keyframes movement3 { 0% { -webkit-transform: translate(-10px,3px); transform: translate(-10px,3px); } 25% { -webkit-transform: translate(-4px,6px); transform: translate(-4px,6px); } 50% { -webkit-transform: translate(2px,8px); transform: translate(2px,8px); } 75% { -webkit-transform: translate(-8px,0px); transform: translate(-8px,0px); } 100% { -webkit-transform: translate(-10px,3px); transform: translate(-10px,3px); } } @-webkit-keyframes movement3 { 0% { -webkit-transform: translate(-10px,3px); transform: translate(-10px,3px); } 25% { -webkit-transform: translate(-4px,6px); transform: translate(-4px,6px); } 50% { -webkit-transform: translate(2px,8px); transform: translate(2px,8px); } 75% { -webkit-transform: translate(-8px,0px); transform: translate(-8px,0px); } 100% { -webkit-transform: translate(-10px,3px); transform: translate(-10px,3px); } } @keyframes light_move { 0% {transform:rotate(0deg); opacity: 0} 30%{transform:rotate(40deg); opacity: 1} 75%{transform:rotate(90deg);} 100%{transform:rotate(0deg);} }@-webkit-keyframes light_move { 0% {-webkit-transform:rotate(0deg);opacity: 0} 30%{-webkit-transform:rotate(40deg);opacity: 1} 75%{-webkit-transform:rotate(90deg);} 100%{-webkit-transform:rotate(0deg);} }@keyframes light_move1 { 0% {transform:rotate(0deg);opacity: 0} 30%{transform:rotate(-40deg);opacity: 1} 75%{transform:rotate(-90deg);} 100%{transform:rotate(0deg);} }@-webkit-keyframes light_move1 { 0% {-webkit-transform:rotate(0deg);opacity: 0} 30%{-webkit-transform:rotate(-40deg);opacity: 1} 75%{-webkit-transform:rotate(-90deg);} 100%{-webkit-transform:rotate(0deg);} } </style> </body> </html>
2024年08月22日
2 阅读
0 评论
0 点赞
2024-08-22
html常见样式代码、小结
outline: none; ----文本框去掉鼠标点击边框颜色box-sizing:border-box; ----给li列表加hover悬停效果会出现抖动问题可以加这句代码letter-spacing:5px ----给文字加左右边距resize:none; ----禁止textarea鼠标点击拉动大小
2024年08月22日
3 阅读
0 评论
0 点赞
2024-08-22
css3实现正六边形图片+悬停效果
html代码<div class="boxF pic1"> <div class="boxS"> <div class="boxT" style="background-image: url(1.jpg);"> <div class="overlay"> <a>正六边形</a> </div> </div> </div> </div>css代码 .lineF, .lineS { position: absolute; visibility: hidden; } .lineS { top: 182px; left: 105px; } .boxF, .boxS, .boxT, .overlay { width: 240px; height: 290px; overflow: hidden; } .boxF, .boxS { visibility: hidden; } .boxF { transform: rotate(30deg); float: left; margin-left: 10px; -ms-transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); } .boxS { transform: rotate(-60deg); -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); } .boxT { transform: rotate(30deg); background: no-repeat 50% center; background-size: 100% auto; -ms-transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); visibility: visible; } .overlay { transition: all 250ms ease-in-out 0s; display: none; position: relative; } .overlay:hover { background-color: rgba(0,0,0,0.6); cursor: pointer; } .boxT:hover .overlay { display: block; } .overlay a { transform: rotate(90deg); display: block; /*display: inline-block;*/ position: absolute; left: 14%; top: 45%; text-align: center; width: 220px; height: 32px; line-height: 35px; color: White; font-size: 24px; font-weight: normal; }
2024年08月22日
5 阅读
0 评论
0 点赞
1
...
54
55
56
...
68