禅茶一味 TO 马黑黑（字节姑娘效果学习）
<style type="text/css">/* 外框盒子 */
#xq { position: relative; left:-214px; top:120px; width: 1024px; height: 591px; background: url('https://pic.imgdb.cn/item/6235793b5baa1a80abd1b6ad.jpg'); box-shadow: 4px 4px 5px #888; border-radius:12px;}
/* 字节姑娘 */
#textBox {
margin: 10px auto 0;
width: 233px;
height: 320px;
border-radius: 80%;
color: transparent;
font-size: 10px;
letter-spacing: -3px;
white-space: normal;
word-wrap: break-word;
word-break: break-all;
background: #333 url('https://pic.imgdb.cn/item/6235698e5baa1a80abac9e6a.png') no-repeat
center/cover;
background-clip: text;
-webkit-background-clip: text;
}
/* 变色文字 */
.txtBg {
font-size: 4rem;
font-family: '楷体','微软雅黑';
color: transparent;
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
background-image: linear-gradient(90deg, DarkKhaki, OliveDrab, transparent, tan, DarkKhaki);
background-size: 300px 100px;
background-position: 300px 0;
border: 1px solid;
background-clip: text;
-webkit-background-clip: text;
animation: chgc 2s linear infinite;
}
@keyframes chgc {
from { background-position: -300px 0; }
to { background-position: 0 0; }
}
/* 播放按钮 */
#clkBtn { width: 100px; height: 100px; border-radius: 50%; background: rgba(202, 255, 112, .4); cursor: pointer; position: relative; }
#clkBtn::before { content: ''; position: absolute; left: 5px; top: 5px; background: rgba(202, 255, 112,
.2);
width: 88px; height: 88px; border: 1px solid #BCEE68; border-radius: 50%; }
#zhizhen { position: absolute; left: 50px; top: 50px; width: 2px; height: 40px; background: #556B2F;
transform-origin: 0 0; animation: go 10s linear infinite; }
@keyframes go { to { transform: rotate(360deg);} }
</style>
<div id="xq" >
<div id="textBox" style="position: absolute; left:340px; top: 60px; opacity: .55;"></div>
<div style="position: absolute; left:200px; top: 50px; width:547px;">
<img alt="" src="https://pic.imgdb.cn/item/62357b1e5baa1a80abd5d64a.gif"/></div>
<div class="txtBg" style="position: absolute; left:300px; top: 440px;">禅茶一味</div>
<div id="clkBtn" style="left: 800px; top: 150px;">
<div id="zhizhen"></div>
</div></div>
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=27965197.mp3" ></audio>
<script language="javascript">
var letter = " 禅茶 静 品味 ";
var ttStr = "";
for(j=0; j<390; j++){
ttStr += (j%2 == 0 ? letter.toUpperCase() : letter);
}
document.getElementById("textBox").innerHTML = ttStr + " 2022-3-12";
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>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br> 不能评分呢 字节姑娘上的文字颜色受字节背衬图片影像，索性找个浅色的背景了。{:4_173:}
@马黑黑说过要做个这个的，来收作业{:4_187:}
那个变色文字我想改浅点，结果发现自己去配色就差了好多{:4_173:} 播放器整成了溏心蛋了哇。{:4_189:} 有创意 影子既有创意，又有才艺，效果图的堆积，好棒啊{:4_187:} 优美的笛声出自那吹笛姑娘呢，选图和音乐融合的天衣无缝，真好{:4_185:} 字节姑娘是中间那个马字吗？ 古琴声？ 加林森 发表于 2022-3-19 21:43
播放器整成了溏心蛋了哇。
哈哈，还真有点像{:4_173:} 马黑黑 发表于 2022-3-19 21:46
有创意
把字节姑娘放在帖子里觉得还不错，尤其对不透明图片，会有部分透明了的感觉。 千羽 发表于 2022-3-19 21:53
影子既有创意，又有才艺，效果图的堆积，好棒啊
谢谢羽儿，只是做个测试，看看字节图放到帖子里是什么效果{:4_173:} 千羽 发表于 2022-3-19 21:56
优美的笛声出自那吹笛姑娘呢，选图和音乐融合的天衣无缝，真好
谢谢羽儿鼓励，抱抱{:4_179:} 樵歌 发表于 2022-3-20 10:38
字节姑娘是中间那个马字吗？
不是是中间那个椭圆形，是用禅茶等文字组成的。底图我用了茶烟，然后用黑黑的字节图的效果。 辫子哥哥 发表于 2022-3-20 11:43
古琴声？
找了个巫娜的音乐，不知道是什么乐器呢。 红影 发表于 2022-3-20 22:27
把字节姑娘放在帖子里觉得还不错，尤其对不透明图片，会有部分透明了的感觉。
效果很神奇 红影 发表于 2022-3-20 22:26
哈哈，还真有点像
还挺好玩的。{:4_170:} 我刚才在手机回的，现在上电脑了。别生气哈，我开玩笑的。 美美古琴与笛子的配合真好听。{:4_187:}