《回来爱的身边》 -林忆莲 - 第2页 - 欢乐水吧 - 花潮论坛

马黑黑 发表于 2022-2-27 13:42

队长回了木有

加林森 发表于 2022-2-27 16:17

本帖最后由加林森于 2022-5-19 18:15 编辑 <br /><br />马黑黑发表于 2022-2-27 13:42
队长回了木有
回什么啊？

<style>
.spiBox {
top:120px;left:-214px;
position: relative;
width: 1024px;
height: 576px;
background: #FFF url('https://pic.imgdb.cn/item/6286080809475431298701b6.jpg') no-repeat center/cover;
box-shadow: 4px 4px 5px #888;
border-radius:12px;
}
.ball { /* 球体 */
   left:200px;top: 180px; width: 60px; height: 60px;
   background: Blue linear-gradient(135deg,rgba(65,105,225,.85),rgba(100,149,237,.95));
   position: absolute; border-radius: 50%;
   filter: drop-shadow(2px 2px 6px rgba(0,0,0,.7));
   transform: skew(2deg); cursor: pointer;
}
.ball::before { content: ''; position: absolute; } /* 伪元素：修饰 */
.ball::before { /* 伪元素一：高亮 */
   left: 0; top: 0; width: 100%; height: 100%; border-radius: 50%;
   background: radial-gradient(circle at 35% 40%,rgba(255,255,255,.75),rgba(0,0,0,.15));
}

.ball div { /* 子元素共2个：动画 */
   position: absolute; border: 8px solid rgba(0,0,0,.45); border-radius: 50%;
   border-color: #4682B4 #6495ED #4682B4 #6495ED;opacity: .55;
}
.ball div:nth-child(1) { left: -8px; top: -8px; right: -8px; bottom: -8px; animation: rot 4s linear infinite;}
.ball div:nth-child(2) { left: -16px; top: -16px; right: -16px; bottom: -16px;animation: rot 12s linear infinite; }
@keyframes rot { to { transform: rotate(1turn); } } /* 动画转圈 */
.spiBox img {
   position: absolute;
   width: 139px;
   height: 108px;
   top: 40%;
   right: 0px;
   animation: walk 42s linear infinite;
}
@keyframes walk {
   0% { transform: rotate(0deg); right: 300px;top:330px; }
   10% { transform: rotate(0deg); right: 470px;top:310px; }
   20% { transform: rotate(0deg); right: 640px;top:290px; }
   30% { transform: rotate(0deg); right: 810px;top:290px; }
   40% { transform: rotate(0deg); right: 980px;top:310px; }
   50%{ transform: rotateY(180deg); right: 1000px;top:330px; }
   60%{ transform: rotateY(180deg); right: 830px;top:350px; }
   70%{ transform: rotateY(180deg); right: 660px;top:370px; }
   80%{ transform: rotateY(180deg); right: 490px;top:370px; }
   90%{ transform: rotateY(180deg); right: 320px;top:350px; }
   100%{ transform: rotateY(360deg); right: 300px;top:330px; }
}
.xiewen {/* 斜纹文本 */
   position: absolute;left:480px;top: -10px;
   width: 338px;
   height: 200px;
   line-height: 200px;
   font-family: '微软雅黑', '宋体';
   font-size: 3.2rem;
   font-weight: 900;
   text-align: center;
   background: darkgreen linear-gradient(45deg, transparent 45%, #eee 45%, #ccc 55%, transparent 0);
   background-size: 4px 4px;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   -webkit-text-stroke: 2px #111;
   animation: wenzi 4s linear infinite alternate;
}
@keyframes wenzi { 0%{opacity: 0.8;} 100% { opacity: 0.3; } }

/* 文字走马灯 */
.txtFly {
   position: absolute;
   --w: 300px;
   width: var(--w);
   left: 350px;
   top: 488px;
   overflow: hidden;
}
.txtFly div {
   word-break: keep-all;
   white-space: nowrap;
   font: normal 22px /24px '楷体','微软雅黑';
   color:#ccff99; text-shadow: 0 0 2px #ff66ff;
   animation: fly 50s linearinfinite;
}
/* 走马灯动画 */
@keyframes fly {
            from { transform: translateX(100%); }
            to { transform: translateX(calc(-120% - var(--w))); }
   }
</style>
<div class="spiBox">
   <img src="https://pic.imgdb.cn/item/6235d74f5baa1a80ab9d74a0.gif" alt="" />
<div class="ball">
   <div></div>
   <div></div>
</div>
<div class="xiewen">天边的爱人</div>
<div class="txtFly" >
<div>天边的爱人--乌兰托娅是骏马我给你地阔和天高

是雄鹰我给你苍茫和浩淼

我知道你梦中有一片草原

风儿吹花儿开是我的微笑

闭上眼能感觉彼此的拥抱

每一刻都听见热烈的心跳

如果是心与心相互有感应

从此我会珍惜每一分一秒

天边的爱人啊你知道不知道
。。。。。。</div>
</div></div><br><br><br><br><br><br><br><br><br><br><br><br>

<script>
let flag = true;
let ball = document.querySelector(".ball");
let au = document.createElement("audio");
au.src = "https://www.joy127.com/url/15083.mp3";
au.autoplay = flag;
au.loop= true;
au.style.display = "none"
ball.appendChild(au);
ball.onclick = function(){
   if(flag) {
            Array.from(this.children).forEach(function(item){item.style.animationPlayState = "paused"; });
            au.pause();
            flag = false;
   } else {
            Array.from(this.children).forEach(function(item){item.style.animationPlayState = "running"; });
            au.play();
            flag = true;
   }
}
</script>

加林森 发表于 2022-2-27 16:20

大猫咪发表于 2022-2-27 12:10
非常喜欢谢谢队长中午好

猫猫下午好！{:4_204:}{:4_190:}

马黑黑 发表于 2022-2-27 19:04

加林森发表于 2022-2-27 16:17
回什么啊？

回来爱的身边

加林森 发表于 2022-2-27 19:31

马黑黑发表于 2022-2-27 19:04
回来爱的身边

可以的可以的。{:4_189:}

马黑黑 发表于 2022-2-27 20:03

加林森发表于 2022-2-27 19:31
可以的可以的。

挺好挺好

加林森 发表于 2022-2-27 20:57

马黑黑发表于 2022-2-27 20:03
挺好挺好

是啊是啊

马黑黑 发表于 2022-2-27 21:20

加林森发表于 2022-2-27 20:57
是啊是啊

继续继续

加林森 发表于 2022-2-27 21:21

马黑黑发表于 2022-2-27 21:20
继续继续

好的好的

马黑黑 发表于 2022-2-27 21:26

{:4_181:}

加林森 发表于 2022-2-27 21:33

马黑黑发表于 2022-2-27 21:26

今天喝没有？

马黑黑 发表于 2022-2-27 21:35

加林森发表于 2022-2-27 21:33
今天喝没有？

哪有不喝的

加林森 发表于 2022-2-27 21:35

马黑黑发表于 2022-2-27 21:35
哪有不喝的

那就好，准备先活一千年再说。

马黑黑 发表于 2022-2-27 21:37

加林森发表于 2022-2-27 21:35
那就好，准备先活一千年再说。

千年龟呀

加林森 发表于 2022-2-27 21:38

马黑黑发表于 2022-2-27 21:37
千年龟呀

哈哈，你想多了吧。

马黑黑 发表于 2022-2-27 22:34

加林森发表于 2022-2-27 21:38
哈哈，你想多了吧。

多多益善吧

加林森 发表于 2022-2-27 22:59

马黑黑发表于 2022-2-27 22:34
多多益善吧

也是也是

页: 1 [2]

花潮论坛's Archiver