html5中的CSS属性

末蓝、 2022-07-20 15:11 173阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        .menu ul{
            border-top:15px solid black;
            padding: 0 10px;
            list-style-type: none;
        }
        .menu ul li a{
            color: #fff;
            float:left;
            margin:0 5px;
            font-size: 14px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            width: 65px;
            padding: 10px 5px;
            background: #151515;
            border-radius: 0 0 5px 5px;
        }
        .menu ul li.rotate a{
             background: #D50E19;
        }
        .menu ul li.scale a{
            background: #0c7cb5;
        }
        .menu ul li.scale-x a{
            background: #031a26;
        }
        .menu ul li.scale-y a{
            background: #1b0076;
        }
        .menu ul li.translate a{
            background: #1d421d;
        }
        .menu ul li.translate-x a{
            background: #90cf90;
        }
        .menu ul li.translate-y a{
            background: #8d6cff;
        }
        .menu ul li.skew a{
            background: #D50E19;
        }
        .menu ul li.skew-x a{
            background: #d36363;
        }
        .menu ul li.skew-y a{
            background: #c85e0b;
        }
        .menu ul li.mutil a{
            background: #d39f00;
        }
        .menu ul li.origin a{
            background: #d83832;
        }
    
    
        .menu ul li.rotate a:hover{
            transform: rotate(25deg);
        }
        .menu ul li.scale a:hover{
            transform: scale(0.8,0.8);
        }
        .menu ul li.scale-x a:hover{
            transform: scaleX(0.5);
        }
        .menu ul li.scale-y a:hover{
            transform: scaleY(0.5);
        }
        .menu ul li.translate a:hover{
            transform: translate(-10px,-10px);
        }
        .menu ul li.translate-x a:hover{
            transform: translateX(10px);
        }
        .menu ul li.translate-y a:hover{
            transform: translateY(10px);
        }
        .menu ul li.skew a:hover{
            transform: skew(45deg,15deg);
        }
        .menu ul li.skew-x a:hover{
            transform: skewX(-30deg);
        }
        .menu ul li.skew-y a:hover{
             transform: skewY(-30deg);
        }
        .menu ul li.mutil a:hover{
            transform: rotate(45deg) scale(1.2,1.2);
        }
    
        .menu ul li.origin a:hover{
            transform-origin: left top;
        }
        .menu ul li.origin a:hover{
            transform: rotate(25deg);
        }
    </style>
    <body>
    <h3>CSS3新属性特性</h3>
    <ul>
        <p>CSS3属性选择器</p>
        <li>E[attr ^= "val"]:属性attr开头以val的元素</li>
        <li>E[attr $= "val"]:属性attr结尾以val的元素</li>
        <li>E[attr *= "val"]:属性attr包含val的元素</li>
        <p>CSS3伪类选择器</p>
        <li>:root  匹配文档的跟元素</li>
        <li>E:nth-child(n)  选择所有在其父节点中的第n个位置匹配E的子元素</li>
        <li>E:nth-last-child(n)  选择所有在其父节点中的倒数第n个位置匹配E的子元素</li>
        <li>E:nth-of-type(n)  选择所有在其父节点中同类型的第n个位置匹配E的子元素</li>
        <li>E:nth-last-of-type(n)  选择所有在其父节点中同类型的倒数第n个位置匹配E的子元素</li>
        <li>E:last-child  选择所有在其父节点中最后一个个位置匹配E的子元素</li>
        <li>E:first-of-type  选择所有在其父节点中匹配E的第一个同类型子元素</li>
        <li>E:last-of-type  选择所有在其父节点中匹配E的最后一个同类型子元素</li>
        <li>E:only-child  选择所有在其父节点只包含一个子元素，且该子元素匹配E</li>
        <li>E:only-of-type  选择所有在其父节点只包含一个同类型子元素，且该子元素匹配E</li>
        <li>E:empty  选择匹配E，且该元素不含有子元素</li>
        <li>::selection  例如：::selection{color:red}在页面上只要被选中的文字颜色都变成红色</li>
        <li>out-of-range  input:out-of-range{border 2px solid red}在输入框中填写数字范围，如果超出了范围，则显示红色</li>
        <li>in-range  input:in-range{border 2px solid green}在输入框中填写数字范围，如果符合范围，则显示绿色</li>
        <li>optional：可选，input[type="text"]:optional{background:green}可选input</li>
        <li>required：必填，input[type="text"]:required{background:red}必填input</li>
        <li>E ~ F：选择F元素，且匹配在E元素后的F元素</li>
        <li>E:not(s) : 选择匹配E元素，且过滤掉S选择符的任意元素，例如：p:not(.class1)选择过滤掉class=class1的p元素</li>
        <li>target：例如a标签中href="#id"，点击后会跳转到id为id=id的p标签上，:target{background:green}可以定义其target锚为什么样式</li>
        <p>CSS3边框属性</p>
        <li>border-radius:设置边框圆角</li>
        <li>border-image:这个属性允许你为元素添加边框背景，值：source,slice,width,outset,repeat，例子：#round{border-image:url("xx.png") 30 round}</li>
        <li>border-shadow：可以设置一个或多个下拉阴影的框,值：h-shadow水平阴影位置,v-shadow垂直阴影位置,blur可选，模糊距离,spread可选，阴影大小,color可选，阴影颜色，例子：box-shadow:10px 10px 5px #888888</li>
    </ul>
    <h3>CSS的2D变形</h3>
    <ul>
        <p>Transform属性介绍</p>
        <li>transform属性对元素实现一些变形功能，可用于一些内联元素块级元素，该属性可以旋转，缩放，移动</li>
        <p>常用的变形函数</p>
        <li>translate()沿着x,y移动元素</li>
        <li>scale()改变元素的高和宽，取值包括正数，负数，以及小数</li>
        <li>rotate()旋转元素对象，取值为一个度数值</li>
        <li>skew()倾斜元素对象，取值为一个度数值</li>
        <li>transform-origin:重新定义图像元素的原点，参数(x,y),x:left,center,right,length,%。y:left,center,right,length,%。</li>
    </ul>
    <div class="menu">
        <ul class="clearfix">
            <li class="item rotate"><a href="#">Rotate</a></li>
            <li class="item scale"><a href="#">Scale</a></li>
            <li class="item scale-x"><a href="#">Scale-x</a></li>
            <li class="item scale-y"><a href="#">Scale-y</a></li>
            <li class="item translate"><a href="#">translate</a></li>
            <li class="item translate-x"><a href="#">translate-x</a></li>
            <li class="item translate-y"><a href="#">translate-y</a></li>
            <li class="item skew"><a href="#">skew</a></li>
            <li class="item skew-x"><a href="#">skew-x</a></li>
            <li class="item skew-y"><a href="#">skew-y</a></li>
            <li class="item mutil"><a href="#">mutil</a></li>
            <li class="item origin"><a href="#">origin</a></li>
        </ul>
    </div>
    </body>
    </html>