css3动画，阴影，加快页面加载，块级模式的小总结

最新推荐文章于 2026-06-08 15:51:12 发布

原创最新推荐文章于 2026-06-08 15:51:12 发布 · 733 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

本文介绍了 CSS3 中的动画实现方法，包括不同浏览器的兼容性处理，并提供了提高网页加载速度的实用建议。

css3：

-----------------------------------动画-------------------------------------

<pre name="code" class="css">#page1.active #page1-2{
    animation: page1-2 3s ease 1.5s forwards;
    -moz-animation: page1-2 3s ease 1.5s forwards;	/* Firefox */
    -webkit-animation: page1-2 3s ease 1.5s forwards;	/* Safari 和 Chrome */
    -o-animation: page1-2 3s ease 1.5s forwards;	/* Opera */

@keyframes page1-2
{
    0% {left: 200%;  top: 200%;opacity: 0}
    50% {left: 13.125%;  top: 45.775%;opacity: 0.1}
    100% {left: 13.125%;  top: 45.775%;opacity:1}
}

@-moz-keyframes page1-2 /* Firefox */
{
    0% {left: 200%;  top: 200%;opacity: 0}
    50% {left: 13.125%;  top: 45.775%;opacity: 0.1}
    100% {left: 13.125%;  top: 45.775%;opacity:1}
}

@-webkit-keyframes page1-2/* Safari 和 Chrome */
{
    0% {left: 200%;  top: 200%;opacity: 0}
    50% {left: 13.125%;  top: 45.775%;opacity: 0.1}
    100% {left: 13.125%;  top: 45.775%;opacity:1}
}

@-o-keyframes page1-2 /* Opera */
{
    0% {left: 200%;  top: 200%;opacity: 0}
    50% {left: 13.125%;  top: 45.775%;opacity: 0.1}
    100% {left: 13.125%;  top: 45.775%;opacity:1}
}

-------------------------------阴影--------------------------------

在 CSS3 中，text-shadow 可向文本应用阴影。
文本阴影效果
您能够规定水平阴影、垂直阴影、模糊距离，以及阴影的颜色：
实例
向标题添加阴影：
h1
{
text-shadow: 5px 5px 5px #FF0000;
}

-------------------------------------加快页面加载时间------------------------------
1.优化图片

2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

3.优化CSS（压缩合并css，如margin-top,margin-left...)

4.网址后加斜杠（如www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）

5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。

这不但影响速度，也影响浏览体验。当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。

从而加载时间快了，浏览体验也更好了。）

6.减少http请求（合并文件，合并图片）

-------------------------------------(function(){})();和(function(){}())每个括号的用途和区别----------------------------------------

(function(){…})(); 这种写法是因为JS中没有块级作用域的概念，所以可以用lambda函数来模仿块级作用域，这个的作用是定义并立即调用一个lambda函数，这个函数中定义的任何变量，都在执行结束时将被销毁，这样写还有个好处就是可以避免命名空间的污染。
(function(){…}()); 这种应该算是模块模式的写法，是为单例创建私有变量和特权方法使单例得到增强。

如果都能运行那最终效果是一样的那个括号只是为了激活语法

    var some=function()
    {
      //块级作用域
    };
    some();
    (function(){
      //块级作用域
    })();      //相当于函数表达式，后面可接括号
    function(){
        //块级作用域
    }();       //相当于函数声明。error
    
    (function(){
        
    }());