错误时空
本帖最后由 马黑黑 于 2022-1-17 12:27 编辑 <br /><br /><style type="text/css">.rbox { margin: 0 auto; width: 700px; min-height: 466px; transform-style: preserve-3d; transition: 1s; }
.rbox:hover { transform: rotateY(180deg); cursor: pointer; }
.fbox, .bbox { width: 699px; height: 466px; position: absolute; backface-visibility: hidden; }
.fbox { background: transparent url('https://638183.freep.cn/638183/Pic/cwuk.jpg') no-repeat; }
.bbox { background: #aaa; transform: rotateY(180deg); padding:10px; font-size: 1em; }
.bbox h2, p { padding: 6px; text-align:center; }
.btnDiv {
margin: 0 auto;
position: relative;
width: 32px;
height: 32px;
border: none;
background: gray;
border-radius: 20%;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.5);
cursor: pointer;
}
.btnDiv:hover {
opacity: .8;
box-shadow: 1px 1px 2px 1px rgba(0,0,0,.5);
}
.btnDiv:active {
opacity: .8;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,.9);
}
.btn-play {
position: absolute;
width: 0px;
height: 0px;
border: 10px solid #000;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
border-left-color:#eee;
left: 12px;
top: 6px;
}
.btn-pause {
position: absolute;
display:none;
width: 2px;
height: 20px;
border-right: 4px solid #eee;
border-bottom:0px;
border-left: 4px solid #eee;
left: 11px;
top: 6px;
}
</style>
<div class="rbox">
<div class="fbox"></div>
<div class="bbox">
<h2>错误时空</h2>
<div style=" column-count: 3; ">
填不满半排观众的电影<br>
直到散场时突然亮起灯<br>
字幕定格在某某出品和发行<br>
我目送 他们行色匆匆<br>
像个自不量力的复读生<br>
完不成金榜题名的使命<br>
命不是猜剪刀石头布的决定<br>
那么任性<br>
我吹过你吹过的晚风<br>
那我们算不算 相拥<br>
可如梦初醒般的两手空空<br>
心也空<br>
我吹过你吹过的晚风<br>
是否看过同样 风景<br>
像扰乱时差留在错位时空<br>
终是空 是空<br>
数不完见证许愿的繁星<br>
没灵验谁来安慰坏心情<br>
十字路口闪烁不停的信号灯<br>
有个人 显然心事重重<br>
三个字 只能说给自己听<br>
仰着头不要让眼泪失控<br>
哪里有可以峰回路转的宿命<br>
我不想听<br>
我吹过你吹过的晚风<br>
那我们算不算 相拥<br>
可如梦初醒般的两手空空<br>
心也空<br>
我吹过你吹过的晚风<br>
是否看过同样 风景<br>
像扰乱时差留在错位时空<br>
终是空 是空<br>
我吹过你吹过的晚风<br>
空气里弥漫着 心痛<br>
可我们 最后 在这错位时空<br>
终成空<br>
我吹过你吹过的晚风<br>
空气里弥漫着 心痛<br>
可我们 最后 在这错位时空<br>
终成空 成空<br>
</div>
<audio id="ymusic" src="https://638183.freep.cn/638183/imusic/cwsk.mp3" loop="loop"></audio>
<p>马黑黑 二〇二二年一月十七日</p>
<div id="btnDiv" class="btnDiv">
<div id="btn-play" class="btn-play"></div>
<div id="btn-pause" class="btn-pause"></div>
</div>
</div>
</div>
<script language="javascript">
var mu = document.getElementById('ymusic');
var btn = document.getElementById('btnDiv');
var playbtn = document.getElementById('btn-play');
var pausebtn = document.getElementById('btn-pause');
btn.onclick = function(){ iplay(1); }
mu.addEventListener("ended", function(){ iplay(0); })
function iplay(flag){
if(flag==1){
mu.paused ? (mu.play(), playbtn.style.display="none", pausebtn.style.display="block") : (mu.pause(), playbtn.style.display="block", pausebtn.style.display="none");
}else{
playbtn.style.display= "block";
pausebtn.style.display = "none";
}
}
</script>
音乐老是链接不过来{:5_103:} 黑黑设定一下空间占位，我的评分跑到图片背后去了{:4_173:} 这个好看，鼠标滑过，图片翻转，前面图片北面歌词，很奇特{:4_187:} 红影 发表于 2022-1-17 12:15
这个好看，鼠标滑过，图片翻转，前面图片北面歌词，很奇特
这个用到了3d变换（旋转），也不是很复杂吧 红影 发表于 2022-1-17 12:14
黑黑设定一下空间占位，我的评分跑到图片背后去了
好的好的。我本来是不想让评分的{:5_106:} 这个 特效不错 真棒{:5_116:} 马黑黑 发表于 2022-1-17 12:16
这个用到了3d变换（旋转），也不是很复杂吧
很漂亮，奇特的构思{:4_187:} 马黑黑 发表于 2022-1-17 12:28
好的好的。我本来是不想让评分的
记得那个动画帖子里也有教如何撑开空间，这会我又忘记了{:4_173:} 红影 发表于 2022-1-17 13:18
记得那个动画帖子里也有教如何撑开空间，这会我又忘记了
其实简单的吧，不设置高度就可以了 马黑黑 发表于 2022-1-17 12:08
音乐老是链接不过来
链接过来了。歌曲还是挺好听呢{:4_187:} 马黑黑 发表于 2022-1-17 13:36
其实简单的吧，不设置高度就可以了
总想不起来是如何操作的，仅限于知道有撑开的语句{:4_173:} 红影 发表于 2022-1-17 13:41
链接过来了。歌曲还是挺好听呢
还行吧，小孩喜欢 红影 发表于 2022-1-17 13:42
总想不起来是如何操作的，仅限于知道有撑开的语句
很多时候这个高度很纠结的 马黑黑 发表于 2022-1-17 13:50
还行吧，小孩喜欢
现在很多歌曲都还不错的。 红影 发表于 2022-1-17 13:52
现在很多歌曲都还不错的。
我听的少。我的空间以前从未上传音乐，今天是第一首 马黑黑 发表于 2022-1-17 13:51
很多时候这个高度很纠结的
嗯嗯，需要琢磨一下用多少值。 红影 发表于 2022-1-17 14:14
嗯嗯，需要琢磨一下用多少值。
这个要计算。比如，子框设置了padding值，它是参与高宽计算的，以高度为例：
子框高度+子框padding*2 = 子框总高度 马黑黑 发表于 2022-1-17 13:54
我听的少。我的空间以前从未上传音乐，今天是第一首
我好像特别习惯自动播放，进来就听多好，像现在想听了还得去点一下{:4_173:}
你这个点开后，播放完后是重复播放呢，刚注意到。
这首歌曲真假声交织，营造了一份梦幻样的伤感。 红影 发表于 2022-1-17 14:23
我好像特别习惯自动播放，进来就听多好，像现在想听了还得去点一下
你这个点开后，播放完后 ...
关于自动播放：标准的做法是不自动播放的，这个w3c有过讨论，最后决定播放与否由来访者决定。
关于音乐，我不太懂。