《天边的爱人》-- 乌兰托娅
本帖最后由 加林森 于 2022-5-20 13:57 编辑 <br /><br /><style>.spiBox {
top:120px;left:-302px;
position: relative;
width: 1200px;
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: #20B2AA #40E0D0 #48D1CC #008080;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:580px;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-5-19 18:09
欣赏美乐，问候队长。
老梦下午好。刚才去吃晚饭去了。 加林森 发表于 2022-5-19 18:18
老梦下午好。刚才去吃晚饭去了。
喝点没有啊？ 草原情 队长好制作，歌美图靓，真棒！晚上好！
{:4_204:}{:4_190:} 梦油 发表于 2022-5-19 19:03
喝点没有啊？
没有喝，吃面条的。 马黑黑 发表于 2022-5-19 19:29
草原情
是的是的。 大猫咪 发表于 2022-5-19 19:30
队长好制作，歌美图靓，真棒！晚上好！
猫猫晚上好。我喜欢她唱的歌曲，很欢快的。{:4_204:}{:4_190:} 加林森 发表于 2022-5-19 19:40
猫猫晚上好。我喜欢她唱的歌曲，很欢快的。
嗯 非常好听 队长晚上好！ 大猫咪 发表于 2022-5-19 19:42
嗯 非常好听 队长晚上好！
就是。猫猫吃没？ 加林森 发表于 2022-5-19 19:39
是的是的。
好听 队长换了个蝴蝶，和按钮的颜色更相配了，背景图也好看，欣赏队长好制作{:4_187:} 加林森 发表于 2022-5-19 19:44
就是。猫猫吃没？
吃了队长 晚上吃得早{:4_204:}{:4_179:} 马黑黑 发表于 2022-5-19 20:02
好听
是啊。 红影 发表于 2022-5-19 20:05
队长换了个蝴蝶，和按钮的颜色更相配了，背景图也好看，欣赏队长好制作
是的，都换了，颜色都统一了。 大猫咪 发表于 2022-5-19 20:06
吃了队长 晚上吃得早
好的好的。 {:4_174:} 队长现在的图图在进步了，继续加油！
页:
[1]
2