小九 发表于 2022-3-17 19:39

虞美人


<style type="text/css">
/* 外框盒子 */
#xq { position: relative; left:-395px; top:50px; width: 1400px; height: 600px; background:#333 url('/data/attachment/forum/202203/17/193200ge38trn19pn31p84.jpg') no-repeat center/cover; box-shadow: 4px 4px 5px #888;border-radius:12px;  }
body { overflow-x: hidden; } /*禁用横向滚动条 */
#baiBox {
        margin: auto;
        width: 360px;
        text-align: center;
        font-size: 5rem;
        font-weight: bold;
        color: #EEEE00;
        transform-origin: top;
        animation: yao 0.8s linear infinite alternate;
}
/* 动画 */
@keyframes yao {
        from{  transform: perspective(800px) rotatex(30deg); }
        to { transform: perspective(800px) rotatex(-30deg); }
}
/* 播放按钮 */
.picBtn {
        width: 0px;
        height: 0px;
        border: none;
        outline: none;
        border-radius: 0px;
        background: transparent url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif') no-repeat;
        cursor: pointer;
}
</style>

<div id="xq" >
        <div id="baiBox" style="position: absolute; left:120px; top: 40px; "></div>
        <div style="position: absolute; left:120px; top: 150px; width:400px;text-align:center;">
                <img alt="" src="http://image.hnol.net/c/2021-01/10/10/202101101019478794-5088534.gif"/>
                <div style="position:absolute; width:260px; left:560px; top: 10px; text-align:center;padding:10px;font-size:1em;font-family:'微软雅黑';text-shadow:1px 1px 2px #000;">
                        <marquee  scrollamount="5" direction="left" > </marquee>
                </div>
        </div>
        <!-- 控制按钮应是父盒子的第一代子元素 -->
        <div style="position:absolute; width:120px; left: 10px; top:calc(100% - 140px); text-align:center;">
                <button id="picBtn" class="picBtn"></button>
        </div>
</div>
<!-- 播放器不要界面,无需放在帖子父盒子内 -->
<audio id="music" autoplay="autoplay" loop="loop" src="http://music.163.com/song/media/outer/url?id=1870997672.mp3" ></audio>

<script language="javascript">
var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');
btn.onclick = function(){
        mu.paused ? (mu.play(), btn.style.background="url('https://pic.imgdb.cn/item/622db6215baa1a80ab3dff55.gif')") : (mu.pause(), btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')");
}
mu.addEventListener("ended", function(){
        btn.style.background="url('https://pic.imgdb.cn/item/622db73d5baa1a80ab3e783b.gif')";
});
</script>
</script>
</script>

红影 发表于 2022-3-17 19:44

骓不逝兮可奈何,虞兮虞兮奈若何。千古伤情霸王别姬。
欣赏九儿精美制作{:4_187:}

小九 发表于 2022-3-17 19:46

红影 发表于 2022-3-17 19:44
骓不逝兮可奈何,虞兮虞兮奈若何。千古伤情霸王别姬。
欣赏九儿精美制作

多多练习 黑黑的代码和羽儿点拨的小细节{:5_117:}

红影 发表于 2022-3-17 19:55

小九 发表于 2022-3-17 19:46
多多练习 黑黑的代码和羽儿点拨的小细节

九儿的图图总是那么美的{:4_187:}

大猫咪 发表于 2022-3-17 20:08

真漂亮,小九色彩用的好,歌很喜欢,凄楚中不无激越的音调和曲折回旋,真棒!

{:4_204:}{:4_190:}

绿叶清舟 发表于 2022-3-17 20:10

九真棒啊,这个颜色漂亮

小九 发表于 2022-3-17 20:10

红影 发表于 2022-3-17 19:55
九儿的图图总是那么美的

谢谢影子鼓励! 每一次制图,都是先听音乐,凭音乐找感觉,再凭感觉找图片,已喜欢上一次又一次的毁图,希望自己能一直保持这样的喜欢和创新。{:4_190:}

小九 发表于 2022-3-17 20:12

大猫咪 发表于 2022-3-17 20:08
真漂亮,小九色彩用的好,歌很喜欢,凄楚中不无激越的音调和曲折回旋,真棒!

猫咪晚上好! 用PS 开始由生疏到熟悉了,还需要学很多PS功能,曾经某人对我说,PS的功能非常强大,要体会其中的精髓,做到融汇贯通,不容易。{:4_190:}

大猫咪 发表于 2022-3-17 20:17

小九 发表于 2022-3-17 20:12
猫咪晚上好! 用PS 开始由生疏到熟悉了,还需要学很多PS功能,曾经某人对我说,PS的功能非常强大,要体会 ...

就是   你看看俺们老头就知道,经常PS换人头 {:4_187:}加油小九{:4_204:}

小九 发表于 2022-3-17 20:18

大猫咪 发表于 2022-3-17 20:17
就是   你看看俺们老头就知道,经常PS换人头   加油小九

老头是高手,俺是小白{:5_117:}

东篱闲人 发表于 2022-3-17 20:19

谁把霸王胡子给剃了?{:5_115:}

小九 发表于 2022-3-17 20:20

东篱闲人 发表于 2022-3-17 20:19
谁把霸王胡子给剃了?

不是你吗{:5_115:}

大猫咪 发表于 2022-3-17 20:21

小九 发表于 2022-3-17 20:18
老头是高手,俺是小白

小九已经很棒了{:4_170:} 老头是导师{:4_189:}

东篱闲人 发表于 2022-3-17 20:22

小九 发表于 2022-3-17 20:20
不是你吗

俺淳朴,不干那事。。。{:5_117:}

小九 发表于 2022-3-17 20:24

东篱闲人 发表于 2022-3-17 20:22
俺淳朴,不干那事。。。

不就是淳朴惹的嘛{:5_117:}

东篱闲人 发表于 2022-3-17 20:26

小九 发表于 2022-3-17 20:24
不就是淳朴惹的嘛

淳朴还惹事吗?{:5_115:}

千羽 发表于 2022-3-17 20:32

九儿是在练习溶图啊,挺好的{:4_199:}

小九 发表于 2022-3-17 20:33

千羽 发表于 2022-3-17 20:32
九儿是在练习溶图啊,挺好的

高斯没达到10,回头再尝试{:4_187:}

千羽 发表于 2022-3-17 20:35

给小九点赞,相信努力和勤奋是会有回报的{:4_187:}{:4_204:}

千羽 发表于 2022-3-17 20:36

小九 发表于 2022-3-17 20:33
高斯没达到10,回头再尝试

记得有个老师他每次做图都是高斯5,效果也挺好的{:4_181:}
页: [1] 2
查看完整版本: 虞美人