|
|
楼主 |
发表于 2022-3-19 09:38
|
显示全部楼层
<style type="text/css">
.bbox { background: #aaa; transform: rotateY(180deg); padding:10px; font-size: 1em; }
.bbox h2, p { padding: 6px; text-align:center; }
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .5); cursor: pointer; position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(0, 0, 0, .0); width: 88px; height: 88px; border: 1px solid #FFF; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: red; transform-origin: 0 0; animation: go 28s linear infinite; }
@keyframes go { to { transform: rotate(360deg); }
}
</style>
<div style="position:relative; left:-234px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1060px;background:rgba(0,0,0,0.6) url('https://www.huachaowang.com/data/attachment/forum/202107/18/201853yloklkfpq75i3m7z.jpg'); ">
<div align="center" style="border-radius:6px; width:100%;background:#333333 url('https://www.huachaowang.com/data/attachment/forum/202107/22/181925u9wpzch8zhcupb8e.gif');">
<div align="center" style="border-radius:1px; width:93%;background:rgba(0,0,0,0.6) url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F742560263775fc9024bb7ab0ee9d5484db5e7b821c654-9Vnfnj_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647868182&t=d3bf28f932dd21ae959293f26cbe72c4');">
<br>
<br>
<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="107050"><section style="text-align: center;margin: 10px auto;"><section style="display:inline-block;">
<section style="display: flex;justify-content: flex-start;align-items: flex-end;margin: 0 0 -4px 15%;"><section class="assistant" style="box-sizing: border-box; width: 2px; height: 8px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 8px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 7px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 7px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 6px; background-color: rgb(47, 208, 254); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 1px; height: 6px; background-color: rgb(255, 255, 255); overflow: hidden;"></section>
<section class="assistant" style="box-sizing: border-box; width: 2px; height: 5px; background-color: rgb(47, 208, 254); overflow: hidden;"></section></section>
<section style="border: 1px solid rgb(53, 146, 253); padding: 3px; border-radius: 20px; box-sizing: border-box;">
<section style="background-image: linear-gradient(to right, rgb(53, 146, 253), rgb(167, 208, 255)); padding: 4px 23px; border-radius: 20px; box-sizing: border-box;">
<section style="font-size: 16px;letter-spacing: 1.5px;color: #fff;"><strong class="135brush" data-brushtype="text" hm_fix="321:369">嘀嗒 - 侃侃</strong></section></section></section></section></section></section>
<br>
<IMG border=0 src="https://img1.baidu.com/it/u=1894630809,3156164015&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281" width=500 _height="281">
<br><br>
<div id="clkBtn">
<div id="zhizhen"></div>
</div>
<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>
<br><br>
<div id="txtclock"></div>
</div>
</div>
</div>
<br><br><br><br><br><br>
<script language="javascript">
var aud = document.getElementById('music');
var btn = document.getElementById('clkBtn');
var zz = document.getElementById('zhizhen');
btn.onclick = function(){ aud.paused ? (aud.play(), zz.style.animationPlayState = "running") : (aud.pause(), zz.style.animationPlayState = "paused"); }
aud.addEventListener("ended", function(){ zz.style.animationPlayState = "running"; });
</script>
<script language="javascript">
showTime();
setInterval(showTime, 1000);
function showTime(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
var date = d.getDate();
var day = d.getDay() + 1;
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
document.getElementById("txtclock").innerHTML = year + "年" + month + "月" + date + "日 星期 " + day + " " + hour + ":" + minute + ":" + second;
}
</script> |
|
楼主: 绿叶清舟
显身卡
发表于 2022-5-14 13:07
