Day8

一、Columns

1、 Simple Example (column-count)——简单的示例（列计算）

代码：

<head>
    <meta charset="utf-8">
    <style>
        #multi-columns {
            -moz-column-count: 2;
            -webkit-column-count: 2;
            column-count: 2;
        }
    </style>
</head>

<body>
    <div id="multi-columns">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum</div>
</body>

实现：

2、图片动态旋转

代码：

<head>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0px;
            background-image: url("D:/私人/图片/壁纸/flower.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
        }

        .photo {
           margin: 30px;
           width:90px ;

            animation: 0ms;

            -webkit-animation: rotateImg 3s linear infinite;

            vertical-align: middle;
        }

        @keyframes rotateImg {
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
        }

        @-webkit-keyframes rotateImg{
            0%{-webkit-transform : rotate(0deg);}
            100%{-webkit-transform : rotate(360deg);}
        }

        #flower{
            position:fixed;
            left: 0;
            top: 0;
            background: url(),url();
            -webkit-animation: flower 15s linear infinite;
            animation: flower 15s linear infinite;
        }

        @keyframes flower{
            0% {transform: rotate(0deg);}
            100% {transform: rotate(360deg);}
        }
        @-webkit-keyframes flower{
            0%{-webkit-transform : rotate(0deg);}
            100%{-webkit-transform : rotate(360deg);}
        }
    </style>
</head>

<body>
    <img class="photo" src="D:/私人/图片/壁纸/taohua.jpg">
    <div id="flower"></div>
</body>

实现：

 

二、Clipping and Masking

1、Clipping and Masking: Overview and Difference——裁剪和屏蔽：概述和说明

通过剪切和掩蔽，您可以使元素的某些指定部分变透明或不透明

 

posted @ 2023-02-07 10:52  末叶da  阅读(36)  评论(0)    收藏  举报