马黑黑 发表于 2022-1-1 08:32

祝福2022

本帖最后由 马黑黑 于 2022-1-1 08:43 编辑 <br /><br /><style type="text/css">

.dDiv {
        width:100%;
        height:400px;
        line-height:400px;
        color:transparent;
        font-family:SimHei,NSimSun,'Microsoft YaHei';
        font-size:60px;
        font-weight:bold;
        background:#000;
        text-align:center;
        border-radius:8px 12px;
        box-shadow:4px 4px 6px #000;
}

.sp { animation:iFlash 6s linear infinite; }
.dDiv span:nth-child(1) { animation-delay:0s; }
.dDiv span:nth-child(2) { animation-delay:0.4s; }
.dDiv span:nth-child(3) { animation-delay:0.8s; }
.dDiv span:nth-child(4) { animation-delay:1.2s; }
.dDiv span:nth-child(5) { animation-delay:1.6s; }
.dDiv span:nth-child(6) { animation-delay:2s; }
.dDiv span:nth-child(7) { animation-delay:2.4s; }
.dDiv span:nth-child(8) { animation-delay:2.8s; }
.dDiv span:nth-child(9) { animation-delay:3.2s; }

@keyframes iFlash {
        0%,100% {
                color:white;
                text-shadow:        2px 2px 4px coral,
                                                2px 2px 10px coral,
                                                2px 2px 20px coral,
                                                2px 2px 40px coral,
                                                2px 2px 50px coral,
                                                2px 2px 60px coral,
                                                2px 2px 0px coral,
                                                2px 2px 80px coral,
                                                2px 2px 90px coral,
                                                2px 2px 100px coral;
        }
        30%,90% {
                color:transparent;
                text-shadow:none;
        }
}

</style>

<div class="dDiv">
        <span class="sp">2</span>
        <span class="sp">0</span>
        <span class="sp">2</span>
        <span class="sp">2</span>
        <span class="sp">萬</span>
        <span class="sp">事</span>
        <span class="sp">如</span>
        <span class="sp">意</span>
        <span class="sp">！</span>

</div>

<iframe style="position:relative;top:-400px;" frameborder="no" border="0" marginwidth="0" marginheight="0" width="330" height="86" src="https://music.163.com/outchain/player?type=2&amp;id=5281399&amp;auto=1&amp;height=66"></iframe>

马黑黑 发表于 2022-1-1 08:35

本帖最后由 马黑黑 于 2022-1-1 08:38 编辑

祝福框参考代码：
<style type="text/css">

.dDiv {
      width:100%;
      height:400px;
      line-height:400px;
      color:transparent;
      font-family:SimHei,NSimSun,'Microsoft YaHei';
      font-size:60px;
      font-weight:bold;
      background:#000;
      text-align:center;
      border-radius:8px 12px;
      box-shadow:4px 4px 6px #000;
}

.sp { animation:iFlash 6s linear infinite; }
.dDiv span:nth-child(1) { animation-delay:0s; }
.dDiv span:nth-child(2) { animation-delay:0.4s; }
.dDiv span:nth-child(3) { animation-delay:0.8s; }
.dDiv span:nth-child(4) { animation-delay:1.2s; }
.dDiv span:nth-child(5) { animation-delay:1.6s; }
.dDiv span:nth-child(6) { animation-delay:2s; }
.dDiv span:nth-child(7) { animation-delay:2.4s; }
.dDiv span:nth-child(8) { animation-delay:2.8s; }
.dDiv span:nth-child(9) { animation-delay:3.2s; }

@keyframes iFlash {
      0%,100% {
                color:white;
                text-shadow:
                        2px 2px 4px coral,
                        2px 2px 10px coral,
                        2px 2px 20px coral,
                        2px 2px 40px coral,
                        2px 2px 50px coral,
                        2px 2px 60px coral,
                        2px 2px 0px coral,
                        2px 2px 80px coral,
                        2px 2px 90px coral,
                        2px 2px 100px coral;
      }
      30%,90% {
                color:transparent;
                text-shadow:none;
      }
}

</style>

<div class="dDiv">
      <span class="sp">2</span>
      <span class="sp">0</span>
      <span class="sp">2</span>
      <span class="sp">2</span>
      <span class="sp">萬</span>
      <span class="sp">事</span>
      <span class="sp">如</span>
      <span class="sp">意</span>
      <span class="sp">！</span>
</div>

樵歌 发表于 2022-1-1 08:53

新年第一天，黑黑双开始出新招了。

樵歌 发表于 2022-1-1 08:54

黑黑新年快乐！{:4_176:}{:4_176:}

马黑黑 发表于 2022-1-1 09:58

樵歌 发表于 2022-1-1 08:53
新年第一天，黑黑双开始出新招了。

新年快乐！

马黑黑 发表于 2022-1-1 09:58

樵歌 发表于 2022-1-1 08:54
黑黑新年快乐！

干杯

红影 发表于 2022-1-1 11:08

这个居然全部是代码实现的，太帅了{:4_199:}

红影 发表于 2022-1-1 11:10

文字色彩还能这样设计，看着那些字儿好美啊。太帅了{:4_199:}

马黑黑 发表于 2022-1-1 11:15

红影 发表于 2022-1-1 11:08
这个居然全部是代码实现的，太帅了

新年好！回帖奖励没领到手么？

红影 发表于 2022-1-1 11:18

没看明白animation里的6s和后面的最大值3.2s的关系，后面只逐步加0.4倒是看明白了{:4_173:}

马黑黑 发表于 2022-1-1 11:19

红影 发表于 2022-1-1 11:10
文字色彩还能这样设计，看着那些字儿好美啊。太帅了

这个实现起来比较繁琐：动画方面需要引入延时功能；文字修饰方面，一是多重阴影，二是设计子元素样式而且是一个一个设计，文字多了不好做。

马黑黑 发表于 2022-1-1 11:20

红影 发表于 2022-1-1 11:18
没看明白animation里的6s和后面的最大值3.2s的关系，后面只逐步加0.4倒是看明白了

这个不是很严格，根据需要合理设计吧

小辣椒 发表于 2022-1-1 11:32

漂亮，黑黑又有新东东了{:4_178:}

小辣椒 发表于 2022-1-1 11:33

也是祝黑黑新的一年心想事成，一帆风顺，万事如意!

加林森 发表于 2022-1-1 11:41

老黑新年快乐！又有新制作了啊，这个得学学！{:4_199:}

马黑黑 发表于 2022-1-1 11:52

小辣椒 发表于 2022-1-1 11:32
漂亮，黑黑又有新东东了

这个其实简单，就是组织代码繁琐一点

马黑黑 发表于 2022-1-1 11:53

加林森 发表于 2022-1-1 11:41
老黑新年快乐！又有新制作了啊，这个得学学！

这个套用和修改就行。nth-child 有多少个字就有多少行

加林森 发表于 2022-1-1 11:54

马黑黑 发表于 2022-1-1 11:53
这个套用和修改就行。nth-child 有多少个字就有多少行

好的好的

马黑黑 发表于 2022-1-1 11:55

加林森 发表于 2022-1-1 11:54
好的好的

nth-child运行animation的时间设置一次加大就好

加林森 发表于 2022-1-1 12:13

马黑黑 发表于 2022-1-1 11:55
nth-child运行animation的时间设置一次加大就好

明白了。
页: [1] 2
查看完整版本: 祝福2022