XP-Play
XP-Play
如何制作MC风格闪烁标语

闪烁标语,具体可以看官方Wiki的介绍:Minecraft Wiki: 闪烁标语 首先新建一个html,并新建一个元素用于闪烁标语

https://assets.xp-play.top/img/post/闪烁标语demo/image1.png
创建一个元素,不过记得要块状元素

然后首先闪烁标语是斜的,这里使用CSS3的transform rotate

https://assets.xp-play.top/img/post/闪烁标语demo/image2.png
看个人喜好啦

其次是让他动起来,这里可以用JavaScript(我以前就是这么干的),或者用CSS3的动画,推荐用动画

CSS3动画的具体用法可以在 W3School 或者 MDN 看,这里只演示让大小跳动 首先用@keyframes创建一个动画

https://assets.xp-play.top/img/post/%E9%97%AA%E7%83%81%E6%A0%87%E8%AF%ADdemo/image3.png
这是一个空白动画

当然现在这个动画什么都没有,我们要让他反复跳动
这里通过设置font-size来实现
开始和结尾设置成一样,把头尾无缝衔接的

https://assets.xp-play.top/img/post/%E9%97%AA%E7%83%81%E6%A0%87%E8%AF%ADdemo/image4.png
然后!还是什么事都没发生

接着只要在中间然字体变大来做到跳动的效果

https://assets.xp-play.top/img/post/%E9%97%AA%E7%83%81%E6%A0%87%E8%AF%ADdemo/image5.png
完成!

接着动画写完了,要把它绑定到我们的闪烁标语上

https://assets.xp-play.top/img/post/%E9%97%AA%E7%83%81%E6%A0%87%E8%AF%ADdemo/image6.png

然后发现网页的闪烁标语它跳动了一下,当然跳了一下就没了 所以我们要给animation加点东西

https://assets.xp-play.top/img/post/%E9%97%AA%E7%83%81%E6%A0%87%E8%AF%ADdemo/image7.png
infinite!

这里的infinite代表这个动画播放无限次 (关于动画的速度曲线,默认的是ease,我个人改成了ease-in-out),然后这个闪烁标语已经完成一大半了

其次,我们要给他加一点点样式

https://assets.xp-play.top/img/post/%E9%97%AA%E7%83%81%E6%A0%87%E8%AF%ADdemo/image9.png
颜色和阴影啦
https://assets.xp-play.top/img/post/%E9%97%AA%E7%83%81%E6%A0%87%E8%AF%ADdemo/image10.png
看起来就是这个亚子

当然,你可以自定义样式

但是,这个字体还是默认字体,总觉得没有内味awa
所以我们给他加上像素字体

但是直接font-family是不可以的,不能保证每个人的电脑都安装像素字体,所以我们要自己导入,具体如何导入 MDZ 关于@font-face都有,这里直接给代码

@font-face {
    font-family: "Minecraft";
    src: url("https://assets.xp-play.top/font/Minecraft-Regular.eot");
    src: local("Minecraft Regular"), local("Minecraft-Regular"),
    url("https://assets.xp-play.top/font/Minecraft-Regular.woff2") format("woff2"),
    url("https://assets.xp-play.top/font/Minecraft-Regular.woff") format("woff"),
    url("https://assets.xp-play.top/font/Minecraft-Regular.otf") format("opentype"),
    url("https://assets.xp-play.top/font/Minecraft-Regular.ttf") format("truetype"),
    url("https://assets.xp-play.top/font/Minecraft-Regular.svg#Minecraft-Regular") format("svg"),
    url("https://assets.xp-play.top/font/Minecraft-Regular.eot?#iefix") format("embedded-opentype");
    font-display: swap;
}

@font-face {
    font-family: "Pixel";
    src: url("https://assets.xp-play.top/font/FZXS12.eot");
    src: local("FZXS12"), local("FZXS12--GB1-0"),
    url("https://assets.xp-play.top/font/FZXS12.woff2") format("woff2"),
    url("https://assets.xp-play.top/font/FZXS12.woff") format("woff"),
    url("https://assets.xp-play.top/font/FZXS12.ttf") format("truetype"),
    url("https://assets.xp-play.top/font/FZXS12.eot?#iefix") format("embedded-opentype"),
    url("https://assets.xp-play.top/font/FZXS12.svg#FZXS12--GB1-0") format("svg");
    font-display: swap;
}

/*以下粗体,斜体,粗斜体用不到,但是我还是贴在这里
@font-face {
    font-family: "Minecraft";
    src: url("https://assets.xp-play.top/font/Minecraft-Bold.eot");
    src: local("Minecraft Bold"), local("Minecraft-Bold"),
    url("https://assets.xp-play.top/font/Minecraft-Bold.woff2") format("woff2"),
    url("https://assets.xp-play.top/font/Minecraft-Bold.woff") format("woff"),
    url("https://assets.xp-play.top/font/Minecraft-Bold.otf") format("opentype"),
    url("https://assets.xp-play.top/font/Minecraft-Bold.ttf") format("truetype"),
    url("https://assets.xp-play.top/font/Minecraft-Bold.svg#Minecraft-Bold") format("svg"),
    url("https://assets.xp-play.top/font/Minecraft-Bold.eot?#iefix") format("embedded-opentype");
    font-weight: bold;
    font-display: swap;
}

@font-face {
    font-family: "Minecraft";
    src: url("https://assets.xp-play.top/font/Minecraft-Italic.eot");
    src: local("Minecraft Italic"), local("Minecraft-Italic"),
    url("https://assets.xp-play.top/font/Minecraft-Italic.woff2") format("woff2"),
    url("https://assets.xp-play.top/font/Minecraft-Italic.woff") format("woff"),
    url("https://assets.xp-play.top/font/Minecraft-Italic.otf") format("opentype"),
    url("https://assets.xp-play.top/font/Minecraft-Italic.ttf") format("truetype"),
    url("https://assets.xp-play.top/font/Minecraft-Italic.svg#Minecraft-Italic") format("svg"),
    url("https://assets.xp-play.top/font/Minecraft-Italic.eot?#iefix") format("embedded-opentype");
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Minecraft";
    src: url("https://assets.xp-play.top/font/Minecraft-BoldItalic.eot");
    src: local("Minecraft Bold Italic"), local("Minecraft-BoldItalic"),
    url("https://assets.xp-play.top/font/Minecraft-BoldItalic.woff2") format("woff2"),
    url("https://assets.xp-play.top/font/Minecraft-BoldItalic.woff") format("woff"),
    url("https://assets.xp-play.top/font/Minecraft-BoldItalic.otf") format("opentype"),
    url("https://assets.xp-play.top/font/Minecraft-BoldItalic.ttf") format("truetype"),
    url("https://assets.xp-play.top/font/Minecraft-BoldItalic.svg#Minecraft-BoldItalic") format("svg"),
    url("https://assets.xp-play.top/font/Minecraft-BoldItalic.eot?#iefix") format("embedded-opentype");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}*/

接着是随机切换

(function(){
    var splashes = ["第一条","第二条","第三条"];
    document.querySelector("#splash").innerText = splashes[Math.ceil(Math.random() * splashes.length) - 1];
})()

完((耶耶耶水了一篇

O7I2

文章作者

发表评论

textsms
account_circle
email

XP-Play

如何制作MC风格闪烁标语
闪烁标语,具体可以看官方Wiki的介绍:Minecraft Wiki: 闪烁标语 首先新建一个html,并新建一个元素用于闪烁标语 创建一个元素,不过记得要块状元素 然后首先闪烁标语是斜的,这里…
扫描二维码继续阅读
2020-06-07