相册1.0

最新推荐文章于 2021-08-28 21:02:36 发布

啃西瓜的小煤球

最新推荐文章于 2021-08-28 21:02:36 发布

阅读量266

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/A1010574609/article/details/101271587

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<html>

<head>
    <meta charset="utf-8">
    <title>相册</title>
    <style>
        div {
            width: 150px;
            height: 100px;
            /* border边框, 1px边框宽度，solid边框样式，实体，red边框颜色 */
            border: 1px solid red;
            /* 设置背景图片, url背景图片的地址 */
            background-image: url(yusan_ren-014.jpg);
            /* padding内边距 */
            padding: 10px;
            /* 设置背景是否重复，no-repeat不重复 repeat重复 */
            background-repeat: no-repeat;
            /* 设置背景图片的起始点 position位置 */
            background-position: center;

            /* 设置定位 absolute绝对 top,right,bottom,left上右下左*/
            position: absolute;
            left: 150px;
            top: 100px;

            transition: 2s linear;
        }

        /* 让鼠标放到div标签上时，执行{}中的样式 */

        div:nth-child(n):hover {
            border: 1px solid blue;
            /* transform变换，转换; scale缩放, skew倾斜, deg=degree度 rotate旋转 */
            transform: scale(2, 2) rotate(30deg);
            /* transition过渡, 1s过渡所花费的时间, ease-in-out过渡的速率，由慢到快再到慢，ease平滑过渡， linear匀速， ease-in由慢到快, ease-out由快到慢*/
            transition: 2s linear;
        }
        /* 取第二个div */
        div:nth-child(2) {
            background-color: aqua;
            position: absolute;
            left: 350px;
            top: 100px;
            /*transform: scale(0.5) skew(-30deg);*/

            background-image: url(yusan_ren-014.jpg);
        }
        
    </style>
</head>

<body>
    <!-- div=>divide分割 -->
    <div></div>
    <div></div>
</body>

</html>

啃西瓜的小煤球

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
相册1.0

<html><head> <meta charset="utf-8"> <title>相册</title> <style> div { width: 150px; height: 100px; /* borde...
复制链接

扫一扫

专栏目录