集中一下 - 第18页 - 时光如水 - 花潮论坛

绿叶清舟 发表于 2022-3-18 21:17

本帖最后由绿叶清舟于 2022-3-18 22:07 编辑 <br /><br /><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-3-19 09:38

绿叶清舟 发表于 2022-3-19 21:58

本帖最后由绿叶清舟于 2022-4-16 21:49 编辑 <br /><br /><style type="text/css">

.picBtn {
   width: 40px;
   height: 90px;
   border: none;
   outline: none;
   border-radius: 8px;
   background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif') no-repeat;
   cursor: pointer;
}

</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -280px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/6235e0935baa1a80aba79977.jpg>
<DIVstyle="position: relative; LEFT: -300px; TOP: 290px">
            <div style="position:absolute; width:120px; left: 400px; top:calc(100% - 40px); text-align:center;">
            <button id="picBtn" class="picBtn"></button>
   </div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif')") : (mu.pause(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif')");
}
mu.addEventListener("ended", function(){
   btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif')";
});
</script>

绿叶清舟 发表于 2022-3-20 15:37

本帖最后由绿叶清舟于 2022-3-20 15:46 编辑

<style type="text/css">

.picBtn {
   width: 80px;
   height: 33px;
   border: none;
   outline: none;
   border-radius: 8px;
   background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/20/153236bvavmexq8e34de4a.gif') no-repeat;
   cursor: pointer;
}

</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -280px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/6236d95c5baa1a80ab32fa39.jpg>
<DIVstyle="position: relative; LEFT: -300px; TOP: 290px">
            <div style="position:absolute; width:80px; left: 400px; top:calc(100% 80px); text-align:center;">
            <button id="picBtn" class="picBtn"></button>
   </div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/20/153236bvavmexq8e34de4a.gif')") : (mu.pause(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/20/153236bvavmexq8e34de4a.gif')");
}
mu.addEventListener("ended", function(){
   btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/20/153236bvavmexq8e34de4a.gif')";
});
</script>

绿叶清舟 发表于 2022-3-21 19:46

本帖最后由绿叶清舟于 2022-3-21 19:59 编辑

<style>
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(0, 0, 0, .8); cursor: pointer; position: relative; }
#clkBtn::before { content: ''; position: absolute; left: -2px; top: 0px; background: rgba(0, 0, 0, .2)url('https://www.huachaowang.com/data/attachment/forum/202203/21/194339wpdv10rdowp0n00p.gif'); width: 100px; height: 100px; border: 1px solid #555; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 44px; background: #2a559e; transform-origin: 0 0; animation: go 30s linear infinite; }
@keyframes go { to { transform: rotate(360deg);} }
</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -280px; width:1000px;TOP: 200px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=800 background=https://pic.imgdb.cn/item/6238644227f86abb2a107c9b.jpg>
<DIVstyle="position: relative; LEFT: 830px; TOP: 290px">
            <div id="clkBtn">
   <div id="zhizhen"></div>
</div>
   </div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>

<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>

绿叶清舟 发表于 2022-3-24 19:35

本帖最后由绿叶清舟于 2022-3-24 19:41 编辑 <br /><br /><style type="text/css">

.picBtn1 {
   width: 150px;
   height: 108px;
   border: none;
   outline: none;
   border-radius: 8px;
   background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/24/192852thin3n35iyi9i5yt.gif') no-repeat;
   cursor: pointer;
}

</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/623c575527f86abb2a713604.jpg>
<DIVstyle="position: relative; LEFT: 50px; TOP: 190px">
            <div style="position:absolute; width:120px; left: 800px; top:calc(100% 180px); text-align:center;">
            <button id="picBtn1" class="picBtn1"></button>
   </div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/24/192852thin3n35iyi9i5yt.gif')") : (mu.pause(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/24/192852thin3n35iyi9i5yt.gif')");
}
mu.addEventListener("ended", function(){
   btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/24/192852thin3n35iyi9i5yt.gif')";
});
</script>

绿叶清舟 发表于 2022-3-24 19:41

绿叶清舟 发表于 2022-3-26 20:03

本帖最后由绿叶清舟于 2022-3-26 20:46 编辑 <br /><br /><style type="text/css">

.picBtn1 {
   width: 150px;
   height: 108px;
   border: none;
   outline: none;
   border-radius: 8px;
   background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/24/192852thin3n35iyi9i5yt.gif') no-repeat;
   cursor: pointer;
}

.waiDiv { width:10%; min-height: 30px; padding:20px 0; background: .25; }
.water {
margin: auto;
width: 10px;
height: 10px;
box-sizing: border-box;
border-radius: 30% 70% 70% 30% / 30% 35% 65% 70%;
box-shadow: inset 1px 2px 3px rgba(0,0,0,.5),1px 1px 2px rgba(0,0,0,.3),1px 1px 3px rgba(0,0,0,.5),inset -1px -1px 5px rgba(255,255,254,.83);
animation: wmv 1s linear infinite;

}
@keyframes wmv{
20% { border-radius: 30% 70% 53% 47% / 28% 44% 56% 72%; }
40% { border-radius: 30% 70% 39% 61% / 34% 39% 61% 66%; }
60% { border-radius: 25% 75% 45% 55% / 40% 55% 45% 60%;}
80% { border-radius: 28% 72% 31% 69% / 32% 39% 61% 68%;}

}
</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/623f07c327f86abb2a70a3a4.jpg>
<DIVstyle="position: relative; LEFT: 50px; TOP: 230px">
            <div style="position:absolute; width:120px; left: 230px; top:calc(100% 180px); text-align:center;">
            <button id="picBtn1" class="picBtn1"></button>
   </div>
<DIVstyle="position: relative; LEFT: 965px; TOP: -221px">
<div class="waiDiv">
<div class="water"></div>
</div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/24/192852thin3n35iyi9i5yt.gif')") : (mu.pause(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/24/192852thin3n35iyi9i5yt.gif')");
}
mu.addEventListener("ended", function(){
   btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/24/192852thin3n35iyi9i5yt.gif')";
});
</script>

绿叶清舟 发表于 2022-3-27 20:30

本帖最后由绿叶清舟于 2022-3-27 21:15 编辑 <br /><br /><style type="text/css">

.pBox {
   position: absolute;
   animation: Roll 25s linear infinite;
   display: flex;
}
.pBox:hover {
   cursor: pointer;
   animation-play-state: paused;
}
.pBox img {
   width: 273px;
   height:161px;
   float: left;
}
@keyframes Roll {
   from { transform: translateX(-50); }
   to { transform: translateX(80%); }
}
</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -320px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=690 background=https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-82116585c2b9e1898daad300c11c3822_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650975648&t=26bb89e60b21f93b31839c133ba8b26c>
<DIVstyle="position: relative; LEFT: 50px; TOP: 130px">
            <div style="position:absolute; width:120px; left: 230px; top:calc(100% -880px); text-align:center;">
            <div class="mBox">
   <div id="pBox" class="pBox">
            <img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqq.yh31.com%2Ftp%2FPhoto6%2FLGXL%2F20109%2F201009280841499277.gif&refer=http%3A%2F%2Fqq.yh31.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650974168&t=ba407da133e6b086383631ee1762c25b" />
                        <img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fqq.yh31.com%2Ftp%2FPhoto6%2FLGXL%2F20109%2F201009280841499277.gif&refer=http%3A%2F%2Fqq.yh31.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1650974168&t=ba407da133e6b086383631ee1762c25b" />
   </div>
</div>
</div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<audio id="ktv" src="音乐" loop="loop" autoplay="autoplay"></audio>

<script language="javascript">
var ktv = document.getElementById('ktv');
document.getElementById('pBox').onclick=function(){ ktv.paused ? ktv.play() : ktv.pause(); }
</script>

绿叶清舟 发表于 2022-3-30 21:02

本帖最后由绿叶清舟于 2022-3-30 21:07 编辑 <br /><br /><style>

/* 树叶 */
.leaf {
position: relative;
width: 30px;
height: 30px;
border-radius: 0 100% 0 100%;
background: darkgreen;
left: calc(50% - 150px);

}
/* +倒放的树叶 */
.leaf1 {
background: linear-gradient(45deg, darkgreen 50%, green 50%)
}

</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -280px; width:1200px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/6244549d27f86abb2a8b8859.jpg>

<divstyle="position: relative; LEFT: 280px; TOP: 500px" id="mybox" class="leaf leaf1"></div>
<EMBED style="POSITION: relative; WIDTH: 870px; TOP: -50px; LEFT: 70px" height=500 type=application/x-shockwave-flash pluginspage=http://www.macromedia.com/go/getflashplayer width=870 src=https://www.56.com/flashApp/swf_effect/f28.swf allowNetworking="internal" allowScriptAccess="never" quality="high" invokeurls="false" wmode="transparent">
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<audio id="music" autoplay="autoplay" loop="loop" src="https://www.joy127.com/url/89317.mp3" ></audio>

<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>

绿叶清舟 发表于 2022-4-2 20:39

本帖最后由绿叶清舟于 2022-4-2 20:41 编辑 <br /><br /><style>

/* 树叶 */
.leaf {
position: relative;
width: 30px;
height: 30px;
border-radius: 0 100% 0 100%;
background: darkgreen;
left: calc(50% - 150px);

}
/* +倒放的树叶 */
.leaf1 {
background: linear-gradient(45deg, darkgreen 50%, green 50%)
}

</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: 0px; width:500px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=368 background=https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201401%2F26%2F20140126223514_yCjms.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651492558&t=02ab4b9f01895a8fa271423171e659de>

<divstyle="position: relative; LEFT: 280px; TOP: 500px" id="mybox" class="leaf leaf1"></div>
<IMG style="POSITION: relative;opacity: 0.6; WIDTH: 500px; TOP:-20px; LEFT: 0px" height=368 width=500 src=https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdingyue.ws.126.net%2F2021%2F0815%2Fcfaaba4cg00qxvo0q03b3d200go009eg00go009e.gif&refer=http%3A%2F%2Fdingyue.ws.126.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651489156&t=754318014e92edc6ba32cf4902a4c1c8>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>

<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>

绿叶清舟 发表于 2022-4-9 20:59

本帖最后由绿叶清舟于 2022-4-9 21:30 编辑 <br /><br /><style>
.stage{
   margin: auto;
   position: relative;
   width: 760px;
   height: 560px;
   background: #;
   perspective: 3000px;
   perspective-origin: 50% 50%;
}
.circle {
   position: absolute;
   left: calc(50% - 150px);
   top: calc(50% - 150px);
   width: 100px;
   height: 100px;
   transform-style: preserve-3d;
   animation: rot 10s linear infinite;
}
.circle div {
   position: absolute;
   width: 100%;
   height: 100%;
   border: 1px solid #bfddf0;
   border-radius: 50%;
}
.circle div:nth-child(1){ transform:rotateY(0deg);}
.circle div:nth-child(2){ transform:rotateY(30deg);}
.circle div:nth-child(3){ transform:rotateY(60deg);}
.circle div:nth-child(4){ transform:rotateY(90deg);}
.circle div:nth-child(5){ transform:rotateY(120deg);}
.circle div:nth-child(6){ transform:rotateY(150deg);}
@keyframes rot{
   0%{ transform: rotateZ(30deg) rotateY(0turn);}
   100%{ transform: rotateZ(30deg) rotateY(1turn);}
}
</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -280px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/625182d8239250f7c5b79fb8.jpg>
<DIVstyle="position: relative; LEFT: 15px; TOP: -150px" class="stage">
   <div class="circle">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
   </div>
</div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

绿叶清舟 发表于 2022-4-12 21:13

本帖最后由绿叶清舟于 2022-4-12 21:15 编辑 <br /><br /><style type="text/css">

.picBtn {
   width: 120px;
   height: 120px;
   border: none;
   outline: none;
   border-radius: 8px;
   background: transparent url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif') no-repeat;
   cursor: pointer;
}

</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -208px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/62557ad6239250f7c5e2a408.jpg>
<DIVstyle="position: relative; LEFT: -300px; TOP: 290px">
            <div style="position:absolute; width:120px; left: 400px; top:calc(100% - 40px); text-align:center;">
            <button id="picBtn" class="picBtn"></button>
   </div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<audio id="music" autoplay="autoplay" loop="loop" src="音乐" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif')") : (mu.pause(), btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif')");
}
mu.addEventListener("ended", function(){
   btn.style.background="url('https://www.huachaowang.com/data/attachment/forum/202203/19/205013amed58kkek6de88d.gif')";
});
</script>

绿叶清舟 发表于 2022-4-18 21:04

本帖最后由绿叶清舟于 2022-4-18 21:07 编辑 <br /><br /><style type="text/css">
/* 音乐控制按钮 */
.btn {
   width: 60px; height: 60px; left: 40px; top: 40px; border-radius: 50%;
   filter: drop-shadow(0px 2px 4px gray); cursor: pointer; position: relative;
}
/* 伪元素按钮修饰 */
.btn::before {
   content: ''; position: absolute; width: 100%; height: 100%;
   background: #ffcc00 radial-gradient(circle at 35% 40%,rgba(255,255,255,.6), rgba(0,0,255,.15));
   border-radius:50%; opacity: .25;
}
</style>

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -208px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/625d61ff239250f7c59c35e8.jpg>
<DIVstyle="position: relative; LEFT: -300px; TOP: 290px">
            <div style="position:absolute; width:120px; left: 400px; top:calc(100% 10px); text-align:center;">
            <div class="btn"></div>
   </div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<script language="javascript">
let flag = true;//true = 自动播放; false = 手动播放
let btn = document.querySelector('.btn');
let au = document.createElement('audio');
au.src = 'http://music.163.com/song/media/outer/url?id=1905007692.mp3';
au.autoplay = flag;
au.loop = true;
au.display = 'none';
btn.appendChild(au);
let tt = flag ? setInterval(bgChange,200) : undefined;
bgChange();
btn.onclick = function() {
   flag ? (clearInterval(tt), au.pause(), flag = false) : (tt = setInterval(bgChange,200), au.play(), flag = true);
}
function bgChange() {
            let c1 = `#${Math.random().toString(16).substr(-6)}`;
            let c2 = `#${Math.random().toString(16).substr(-6)}`;
            btn.style.background = `linear-gradient(120deg, ${c1} 0%, ${c2} 100%)`;
}
</script>

绿叶清舟 发表于 2022-4-22 20:40

本帖最后由绿叶清舟于 2022-4-26 22:27 编辑 <br /><br />

<DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -80px; width:900px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=1200 background=https://pic.imgdb.cn/item/6262a14e239250f7c5198799.jpg>
            <div style="position:absolute; width:80px; left: 400px; top:calc(100% 80px); text-align:center;">
            <img class="img1" src="https://pic.imgdb.cn/item/622b46ee5baa1a80ab0a99ba.gif" alt="" />

   </div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=3 height=6 src="音乐"></iframe>

绿叶清舟 发表于 2022-4-26 22:36

绿叶清舟 发表于 2022-5-1 20:53

本帖最后由绿叶清舟于 2022-5-1 20:59 编辑 <br /><br /><DIV align=center color=#ff0000 >
<tablestyle="position: relative; LEFT: -200px; width:1000px;TOP: 180px"border="0" cellspacing="0" cellpadding="0">
<TBODY><TR><TD height=700 background=https://pic.imgdb.cn/item/626e7fb2239250f7c5d017de.jpg>
            <div style="position:absolute; LEFT: 80px; TOP: 530px;">
            <div id="txtBox" style="margin: auto; width: 400px; font-size: 1em;"></div>
   </div>
</TD></TR>
</table></div><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<script language="javascript">

var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = "过了一个真正的劳动节，团了五斤蚕豆三十九元，这时候放坏了可舍不得，只能一口气全剥了。还是第一次知道原来五斤可以出来这么多的豆，平时怕麻烦市场里买的都是剥好的算来比疫情前可便宜多了。今天过节嘛炒了一碗，还分了二袋进了冷冻。边装边想这是这次疫情的又一收获吧，这日子不是就得这么过的吗？以后。。。以后怕又会忘记了又怕麻烦了。虚心接受，屡教不改就是酱子的吧。 ";

setInterval(function(){
   txtBox.innerHTML = str.substring(0, idx) + "|";
   idx += 1;
   if(idx > str.length) idx = 0;
}, 200);

</script>

绿叶清舟 发表于 2022-5-12 20:14

本帖最后由绿叶清舟于 2022-5-18 22:01 编辑 <br /><br />

<div style="position:relative; left:-200px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1000px;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:#3C3C3C 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>
<DIV align=center><br><IMG border=0 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstatic.missevan.com%2Fcoversmini%2F202004%2F25%2Fe62ed94f5d242de9a9af4683d9e6f64e235308.jpg&refer=http%3A%2F%2Fstatic.missevan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654916832&t=d210f4df2eb842c927de346e5f085e54" width=500 _height="500"><br><br><br>

<section data-role="outer" label="Powered by 135editor.com" style="">
<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="107201">
<section style="text-align: center;margin: 10px auto;">
<section style="display:flex;justify-content: center;align-items: flex-end;"><section class="assistant" style="box-sizing:border-box;width: 75px;flex-shrink: 0;"><img class="assistant" style="box-sizing:border-box;vertical-align:inherit;width: 100%; display: block;" src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvSmFGdlB2dkEySjA1eXNNZVFldVh4aWNhb2xtVXRwMGhObEg4MzdENzRTYXpGM0VMWmFUVkx3WE9EZmZZaWJHeFdWcGFwTzI4eWliZGljaWFyNmdNYUllYnZpYUEvMD93eF9mbXQ9cG5n" data-ratio="0.52" data-w="113" data-width="100%"></section><section class="135brush" data-brushtype="text" style="font-size: 14px;letter-spacing: 1.5px;color: #5f7ad2;margin: 0 0 5px -30px;" hm_fix="320:609">一荤一素 - 毛不易
</section>
</section>
</section>
</section>

<br><div id="txtBox" style="margin: auto; width: 400px; font-size: 1em;"></div><br>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="音乐地址"></iframe>

<br><br></DIV>

</div>
</div>
</div>
<br><br><br><br><br><br>

<script language="javascript">

var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = "想好的试试白酒酱料整个小炒肉的翻看冰箱发现蕃茄得赶紧的吃了，改做了罗宋汤。汤里该放卷心菜的可是那份菜心快不行了必须得先吃了再加今天蔬菜得超标了。吃完早餐暖的壶到现在茶还没泡上。洗着的衣服啥时停了都不知道，只得重新再洗一遍。今天这是啥日子来的，得去查查黄历。发来的物资照例午餐肉和那半根红肠投喂了邻居家的狗，那个象腌过的黄瓜，被切去了头的萝卜，和长得象韮菜的蒜苗直接扔了出去。或许又会被说上海人怎样怎样，可又知不知道咱也曾经珍惜过，算啦只想说那汤好鲜，昨天整的红糖糍粑早餐就吃了些，比纯糯米粉的口感强了很多，以后再做南瓜饼时就这么整了。";

setInterval(function(){
   txtBox.innerHTML = str.substring(0, idx) + "|";
   idx += 1;
   if(idx > str.length) idx = 0;
}, 200);

</script>

绿叶清舟 发表于 2022-5-12 20:15

本帖最后由绿叶清舟于 2022-5-18 22:01 编辑

<div style="position:relative; left:-200px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1000px;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:#3C3C3C 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>
<DIV align=center><br><IMG border=0 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fstatic.missevan.com%2Fcoversmini%2F202004%2F25%2Fe62ed94f5d242de9a9af4683d9e6f64e235308.jpg&refer=http%3A%2F%2Fstatic.missevan.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654916832&t=d210f4df2eb842c927de346e5f085e54" width=500 _height="500"><br><br><br>

<section data-role="outer" label="Powered by 135editor.com" style="">
<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="107201">
<section style="text-align: center;margin: 10px auto;">
<section style="display:flex;justify-content: center;align-items: flex-end;"><section class="assistant" style="box-sizing:border-box;width: 75px;flex-shrink: 0;"><img class="assistant" style="box-sizing:border-box;vertical-align:inherit;width: 100%; display: block;" src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvSmFGdlB2dkEySjA1eXNNZVFldVh4aWNhb2xtVXRwMGhObEg4MzdENzRTYXpGM0VMWmFUVkx3WE9EZmZZaWJHeFdWcGFwTzI4eWliZGljaWFyNmdNYUllYnZpYUEvMD93eF9mbXQ9cG5n" data-ratio="0.52" data-w="113" data-width="100%"></section><section class="135brush" data-brushtype="text" style="font-size: 14px;letter-spacing: 1.5px;color: #5f7ad2;margin: 0 0 5px -30px;" hm_fix="320:609">一荤一素 - 毛不易
</section>
</section>
</section>
</section>

<br><div id="txtBox" style="margin: auto; width: 400px; font-size: 1em;"></div><br>
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="音乐地址"></iframe>

<br><br></DIV>

</div>
</div>
</div>
<br><br><br><br><br><br>

<script language="javascript">

var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = "想好的试试白酒酱料整个小炒肉的翻看冰箱发现蕃茄得赶紧的吃了，改做了罗宋汤。汤里该放卷心菜的可是那份菜心快不行了必须得先吃了再加今天蔬菜得超标了。吃完早餐暖的壶到现在茶还没泡上。洗着的衣服啥时停了都不知道，只得重新再洗一遍。今天这是啥日子来的，得去查查黄历。发来的物资照例午餐肉和那半根红肠投喂了邻居家的狗，那个象腌过的黄瓜，被切去了头的萝卜，和长得象韮菜的蒜苗直接扔了出去。或许又会被说上海人怎样怎样，可又知不知道咱也曾经珍惜过，算啦只想说那汤好鲜，昨天整的红糖糍粑早餐就吃了些，比纯糯米粉的口感强了很多，以后再做南瓜饼时就这么整了。";

setInterval(function(){
   txtBox.innerHTML = str.substring(0, idx) + "|";
   idx += 1;
   if(idx > str.length) idx = 0;
}, 200);

</script>

大猫咪 发表于 2022-5-14 13:07

清舟字怎么出不来了{:4_187:}{:4_190:}

页: 8 9 10 11 12 13 14 15 16 17 [18] 19 20

花潮论坛's Archiver