首页 > 代码库 > CSS3给页面打标签

CSS3给页面打标签

2024-07-21 18:42:26   218人阅读

我们经常会在页面的左上角或者右上角看到类似如图所示的标签，比如页面的链接（最常使用）等，下面我们就实现一个简单的标签

 

 实现步骤是先做一个水平长条，使用CSS3的transform来实现旋转，如果是在左上角的话就逆时针旋转45度，右上角顺时针旋转45度。

代码：

 1 <!DOCTYPE html> 2 <html> 3 <head> 4     <title></title> 5     <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 6     <style> 7         .demo{ 8             display: inline-block; 9             height: 20px; 10             width: 200px; 11             background: #f00;12             text-align: center;13             margin-top: 40px;14             margin-left: -45px;15             text-decoration: none;16             color:#fff;17             -webkit-transform: rotate(-45deg);18             -moz-transform: rotate(-45deg);19             -ms-transform: rotate(-45deg);20             -o-transform: rotate(-45deg);21             transform: rotate(-45deg);22         }23     </style>24 </head>25 <body>26     <a class="demo" href="javasript:;">Follow me</a>27 </body>28 </html>

 

transform：

  1. 浏览器支持

    Internet Explorer 10、Firefox、Opera 支持 transform 属性。

    Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。

    Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。

    Opera 只支持 2D 转换。

  2. 定义和用法
    transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
    默认值：none
    继承性：no
  3. 语法
    transform: none|transform-functions;
    值描述
    none定义不进行转换。
    matrix(n,n,n,n,n,n)定义 2D 转换，使用六个值的矩阵。
    matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义 3D 转换，使用 16 个值的 4x4 矩阵。
    translate(x,y)定义 2D 转换。
    translate3d(x,y,z)定义 3D 转换。
    translateX(x)定义转换，只是用 X 轴的值。
    translateY(y)定义转换，只是用 Y 轴的值。
    translateZ(z)定义 3D 转换，只是用 Z 轴的值。
    scale(x,y)定义 2D 缩放转换。
    scale3d(x,y,z)定义 3D 缩放转换。
    scaleX(x)通过设置 X 轴的值来定义缩放转换。
    scaleY(y)通过设置 Y 轴的值来定义缩放转换。
    scaleZ(z)通过设置 Z 轴的值来定义 3D 缩放转换。
    rotate(angle)定义 2D 旋转，在参数中规定角度。
    rotate3d(x,y,z,angle)定义 3D 旋转。
    rotateX(angle)定义沿着 X 轴的 3D 旋转。
    rotateY(angle)定义沿着 Y 轴的 3D 旋转。
    rotateZ(angle)定义沿着 Z 轴的 3D 旋转。
    skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
    skewX(angle)定义沿着 X 轴的 2D 倾斜转换。
    skewY(angle)定义沿着 Y 轴的 2D 倾斜转换。
    perspective(n)为 3D 转换元素定义透视视图。
 
CSS3给页面打标签






























        

            
                
                  
                
                

                    联系

                    我们