问好，欣赏您的精美佳作，赞一个！
http://www.yinhuabbs.cn/data/attachment/forum/201912/20/115232bkxkshnfrzz7qsz7.gif
欣赏学习。大赞！{:1_293:}{:1_293:}{:1_293:} <div style="position: relative" align=center>
<table border="0" cellspacing="0" cellpadding="0" align="center"> <tbody><tr><td>
<div style="width: 1700px; height:1200px; overflow: hidden; position: relative; left: -230px; top: 0px; " align="center">
<style type="text/css">
#outframe {
width:1650px;height:900px;
position:absolute;margin-top:-1000px;
}
#picHolder {
width:250px;height:400px;
position:relative;margin:300px 300px auto 600px;
/*声明一个3D空间*/
transform-style: preserve-3d;
transform: rotateX(-5deg);
animation: animateP 50s linear infinite;
}
#picHolder img {
width:250px;height:400px;
position: absolute;
overflow:hidden;
border-radius:8px;
border:thin blue inset;
}
#picHolder img:nth-child(1){
transform: translateZ(525px);
}
#picHolder img:nth-child(2){
transform: rotateY(27.7deg) translateZ(525px);
}
#picHolder img:nth-child(3){
transform: rotateY(55.4deg) translateZ(525px);
}
#picHolder img:nth-child(4){
transform: rotateY(83.1deg) translateZ(525px);
}
#picHolder img:nth-child(5){
transform: rotateY(110.8deg) translateZ(525px);
}
#picHolder img:nth-child(6){
transform: rotateY(138.5deg) translateZ(525px);
}
#picHolder img:nth-child(7){
transform: rotateY(166.2deg) translateZ(525px);
}
#picHolder img:nth-child(8){
transform: rotateY(193.9deg) translateZ(525px);
}
#picHolder img:nth-child(9){
transform: rotateY(221.6deg) translateZ(525px);
}
#picHolder img:nth-child(10){
transform: rotateY(249.3deg) translateZ(525px);
}
#picHolder img:nth-child(11){
transform: rotateY(277deg) translateZ(525px);
}
#picHolder img:nth-child(12){
transform: rotateY(304.7deg) translateZ(525px);
}
#picHolder img:nth-child(13){
transform: rotateY(332.3deg) translateZ(525px);
}
/*定义一个动画*/
@keyframes animateP {
from {
transform: rotateX(-5deg) rotateY(360deg);
}
to {
transform: rotateX(-5deg) rotateY(0deg);
}
}
</style>
<div style="width:1650px;height:1100px; position:relative;margin:10px 0 32px 20px;overflow:hidden;border-top-left-radius:54px;border-top-right-radius:54px;" >
<img src=https://pic.imgdb.cn/item/60a4b3006ae4f77d3544b65d.jpg width=1650px height=1100px >
<div id="outframe">
<div id="picHolder">
<img src="https://pic.imgdb.cn/item/60a4af8b6ae4f77d35289495.jpg">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d35274689.gif">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746a8.gif">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746c7.gif">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746e5.gif">
<img src="https://pic.imgdb.cn/item/60a4af5f6ae4f77d352746f9.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fc9b.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fcb0.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fcc5.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fce5.gif">
<img src="https://pic.imgdb.cn/item/60a4af776ae4f77d3527fd03.gif">
<img src="https://pic.imgdb.cn/item/60a4af8b6ae4f77d35289465.gif">
<img src="https://pic.imgdb.cn/item/60a4af8b6ae4f77d3528948c.gif">
</div>
</div>
<div id="LRC歌词显示" style="position:absolute;width:80%;left:10%;bottom:120px;">
<img src="https://pic.imgdb.cn/item/60a4b2586ae4f77d353f5ab0.gif" style="width:60px;overflow:hidden;border-radius:50%;" title="点击图标，播放歌曲"></div>
<div style="color:red;font:bold 3em 微软雅黑;position:absolute;top:250px;left:600px;">
金　陵　十　二　钗</div>
</div>
<textarea id='LRC歌词' style="display:none;">
《金陵十二钗》
作词 : 孙红英
作曲 : 栾 凯
演唱 : 孔子雯
LRC歌词编辑:
深秋红枫
谁的金钗风霜中掩埋
仙株寂寞飘玉带
满园芳菲金陵烟花醉
洁来洁去只留那片白
谁的金钗繁花开不败
太虚幻境情天恨海
心比天高辗转化尘埃
香消玉断宛如笑颜在
水做女儿心往事有谁听
一片痴心只为君
花做女儿身春梦了无痕
化作春泥也多情
金陵十二钗道尽千古爱
隔世相闻泪满襟
辗转在红尘繁华终散尽
幽思淡淡花袭人
水做女儿心往事有谁听
一片痴心只为君
花做女儿身春梦了无痕
化作春泥也多情
金陵十二钗道尽千古爱
隔世相闻泪满襟
辗转在红尘繁华终散尽
幽思淡淡花袭人
金陵十二钗道尽千古爱
隔世相闻泪满襟
辗转在红尘繁华终散尽
幽思淡淡花袭人
辗转在红尘繁华终散尽
幽思淡淡花袭人
</textarea>
<script type="text/javascript" >
!window.procLRC && document.write('<script type="text/javascript" src="http://cesholl.cn3v.net/scripts/processLRC0.js" charset="utf-8"><\/script>');
</script>
<script type="text/javascript" >
var gopts = {
// 下面3个参数是必须的！
lrcTxtID:"LRC歌词",
lrcShowID:"LRC歌词显示",
audioURL:"http://music.163.com/song/media/outer/url?id=35408000.mp3",
// 可选的参数
gczh:'28px',
gczt:'楷体',
gcct:true,
dqfs:'center',
gchs:2,
gcys:'red',
gcys1:'skyblue',
//-------------------------------------------------------
showMode:0,
};
setTimeout(function(){
procLRC(gopts);
}, 1000);
</script>
</div>
</td></tr></tbody></table>
</div>
<br><br><br><br><br><br><br><br>
照搬，很多语句都弄不明白。;P 华妹 发表于 2021-6-4 18:08
#outframe {
width:1000px;height:900px;
position:absolute;margin-top:-1000px;
走马灯的位置没固定住 漂亮！欣赏支持！ 醉美水芙蓉 发表于 2021-6-12 20:54
漂亮！欣赏支持！
http://www.yinhuabbs.cn/data/attachment/forum/201912/21/084215njp5lwls4o0j7pno.gif
页:
1
[2]