A-A+

css显示Microsoft Logo动画

2018年11月04日 建站之旅

如果你查看三好菌的《Win10专业网》的About页面,会发现其中有几个微软徽标动画(如图)。如果你喜欢想要下载,但是右键点击时却不会显示“图片另存为”选项,这是因为这几个动画根本不是gif图片文件,而是用css来实现的。

css显示Microsoft Logo动画

当然,三好菌没这个创意,css也写不这么好,这是奉行的拿来主义,借用的大神 @Michael Gillett 的。

你可以看一下 Michael Gillett 展示这些 css 动画效果的 Microsoft loading animations 网页。

Michael Gillett已将Microsoft loading animations项目开源于GitHub,感兴趣的话前去下载吧。

下载地址:https://github.com/MichaelGillett/MicrosoftAnimations

如何显示css动画

你需要先把animations.css上传到你的网站。

注意:需要先删除animations.css中定义网页全局的代码。删除范围从264行 body 开始到292行 footer 结束。

在想要显示css动画的页面中添加链接animations.css代码:

1
<link rel="stylesheet" href="Styles/CSS/Animations/animations.css" type="text/css" />

然后在想要显示css动画的地方插入形如以下的代码:

1
2
3
4
5
6
7
8
    <section>
         <div class="simpleLoader1 squareAnimation animationContainer">
            <div class="square square1"></div>
            <div class="square square2"></div>
            <div class="square square3"></div>
            <div class="square square4"></div>
        </div>
    </section>

这段代码的显示效果就是本文开始作为例子展示的那个动画效果。

按照类似的代码,总共可以展示六种动画效果。

标签:

给我留言