71背景练习2（有点好玩）

最新推荐文章于 2021-06-21 12:53:27 发布

广东码农

最新推荐文章于 2021-06-21 12:53:27 发布

阅读量66

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/117950103

版权

图片延迟加载浏览器渲染 CSS伪类资源优化前端性能

关键词由CSDN通过智能技术生成

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

缺点

/* 
            缺点：
                图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求
                    浏览器加载外部资源时是按需加载的，用则加载，不用则不加载
                    想我们上边的练习link会首先加载，而hover和active会在指定状态触发时候才会加载

            这样就会有个问题，当触发link到hover或者hoveractive时，浏览器需要请求资源，所以有时候
            过程中资源没有加载出来的时候，会出现空白
         */

用到的图片

在这里插入图片描述

代码

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景练习2</title>
    <style>
    	a:link {
            display: block;
            width: 479px;
            height: 298px;
            background: url(./imgs/daina.jpg);
        }
        a:hover {
            background: url(./imgs/daina-hover.jpg);
        }
        a:active {
            background: url(./imgs/daina-active.jpg);
        }
    </style>
</head>
<body>
    <a href="javascript:;"></a>
</body>
</html>

效果（动态图，加载慢）

在这里插入图片描述

好玩的玩法（两帧动画）

用到的图片
在这里插入图片描述

<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景练习2</title>
    <style>
        a:link {
            display: block;
            width: 480px;
            height: 270px;
            background: url(./imgs/xiaoxin1.png);
        }
        a:hover {
            background: url(./imgs/xiaoxin1.png);
        }
        a:active {
            background: url(./imgs/xiaoxin2.png);
        }
    </style>
</head>
<body>
    <a href="javascript:;"></a>
</body>
</html>