马黑黑 发表于 2022-3-14 12:10

Hello world

<style type="text/css">
/* 背景图层 */
#mama {
        margin: auto;
        position: relative;
        width: 760px;
        height: 560px;
        background: #000 url('https://638183.freep.cn/638183/Pic/2022/back.jpg') no-repeat center/cover;
        background-position: 0 0;
        backdrop-filter: blur(1px);
        animation: chgBgd 1s ease infinite alternate;
}
/* 图片层 */
#sImg {
        position: absolute;
        left: 550px;
        top: 32px;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        opacity: 0.8;
        filter: blur(2px);
}
/* 图片层鼠标滑过 */
#sImg:hover {
        cursor: pointer;
        filter: blur(0)brightness(110%);
        transform: rotate(180deg);
}
/* 文本层 */
#txtC {
        position: absolute;
        width: 282px;
        height: 200px;
        line-height: 200px;
        left: 20px;
        top: 20px;
        font-family: Arial;
        font-size: 2em;
        color: #eee;
        text-align: center;
        text-shadow: 1px 1px 1px #ffcc00, 2px 2px 2px #aaa;
        background: rgba(255, 255, 255,.1);
        animation: chgColor 1s ease-in-out infinite alternate;
}
/* 文本层iframe元素 */
#txtC iframe {
        position: absolute;
        left: -10px;
        top: -10px;
        border: none;
        opacity: .9;
}
/* 文本层鼠标滑过 */
#txtC:hover {
        cursor: pointer;
        filter: brightness(120%);
}
/* 文本层变色 */
@keyframes chgColor{
        0% { color: navy; }
        20% { color: green; }
        40% { color: red; }
        60% { color: white; }
        80% { color: olive; }
        100% { color: tomato; }
}

@keyframes chgBgd {
        to { background-position: -15px 0; }
}

</style>

<div id="mama">
        <div id="txtC">HELLO WORLD</div>
        <img id="sImg" alt="" src="https://638183.freep.cn/638183/Pic/2022/back1.jpg" />
</div>

<script>

var wy = document.createElement('iframe');
wy.src = "https://music.163.com/outchain/player?type=2&id=1381922058&auto=1&height=32";
document.getElementById('txtC').appendChild(wy);

</script>

加林森 发表于 2022-3-14 12:29

哇，老黑这个制作容入了很多教程里的东西，厉害厉害，佩服佩服。{:4_199:}

马黑黑 发表于 2022-3-14 12:40

加林森 发表于 2022-3-14 12:29
哇，老黑这个制作容入了很多教程里的东西，厉害厉害，佩服佩服。

你都看出来了

加林森 发表于 2022-3-14 12:43

马黑黑 发表于 2022-3-14 12:40
你都看出来了

看出来了，我得跟着学习了。

马黑黑 发表于 2022-3-14 12:53

加林森 发表于 2022-3-14 12:43
看出来了，我得跟着学习了。

如此甚好

加林森 发表于 2022-3-14 13:08

马黑黑 发表于 2022-3-14 12:53
如此甚好

嗯嗯

马黑黑 发表于 2022-3-14 13:10

加林森 发表于 2022-3-14 13:08
嗯嗯

{:4_181:}

加林森 发表于 2022-3-14 13:12

马黑黑 发表于 2022-3-14 13:10


<style>
/* 文本层 */
.txtCeng {
      margin: 10px auto 0;
      width: 400px;
      height: 200px;
      line-height: 200px;
      font-family: Arial, '微软雅黑';
      font-size: 4em;
      color: #eee;
      text-align: center;
      text-shadow: 1px 1px 1px #ffcc00, 2px 2px 2px #aaa;
      background: rgba(255, 255, 255, .1);
      animation: chgColor 5s ease-in-out infinite alternate;
}
/* 文本层变色 */
@keyframes chgColor {
      0% { color: navy; }
      20% { color: green; }
      40% { color: red; }
      60% { color: olive; }
      80% { color: olive; }
      100% { color: tomato; }
}
</style>

<div class="txtCeng">谢谢老黑指导！</div>

马黑黑 发表于 2022-3-14 13:16

加林森 发表于 2022-3-14 13:12
/* 文本层 */
.txtCeng {
      margin: 10px auto 0;


引用没问题了，下一步是理解代码

加林森 发表于 2022-3-14 13:17

马黑黑 发表于 2022-3-14 13:16
引用没问题了，下一步是理解代码

是的，必须搞懂才行。

红影 发表于 2022-3-14 14:17

文字变色和图片翻转看到过，背景层移位还是头一次看到这样使用{:4_173:}

马黑黑 发表于 2022-3-14 14:58

红影 发表于 2022-3-14 14:17
文字变色和图片翻转看到过，背景层移位还是头一次看到这样使用

嗯，以前一直没有使用背景动态移位

来看你 发表于 2022-3-14 15:42

加林森 发表于 2022-3-14 13:12
/* 文本层 */
.txtCeng {
      margin: 10px auto 0;


这字还带变色的，队长也腻害

红影 发表于 2022-3-14 15:54

马黑黑 发表于 2022-3-14 14:58
嗯，以前一直没有使用背景动态移位

也挺有趣的呢{:4_187:}

加林森 发表于 2022-3-14 15:57

来看你 发表于 2022-3-14 15:42
这字还带变色的，队长也腻害

看看下午好，我这个是跟到老黑学习的。

马黑黑 发表于 2022-3-14 17:23

红影 发表于 2022-3-14 15:54
也挺有趣的呢

还行还行吧

小辣椒 发表于 2022-3-14 17:46

黑黑，好制作，效果特别好{:4_187:}

小辣椒 发表于 2022-3-14 17:47

欣赏加学习，晚上再上来仔细看看{:4_189:}

马黑黑 发表于 2022-3-14 18:14

小辣椒 发表于 2022-3-14 17:47
欣赏加学习，晚上再上来仔细看看

小辣椒下午好

马黑黑 发表于 2022-3-14 18:15

来看你 发表于 2022-3-14 15:42
这字还带变色的，队长也腻害

队长无所不能
页: [1] 2 3 4
查看完整版本: Hello world