css 变形示例

作者: 贵在随心 | 来源:发表于2019-03-19 16:29 被阅读0次

一、平行四边形

背景知识:transform,伪元素
代码示例:

    <a href="#yolo" class="button">
        <div>Click me</div>
    </a>
    <button class="button">
        <div>Click me</div>
    </button>
    .button {
        position: relative;
        display: inline-block;
        padding: 0.5em 1em;
        border: 0;
        margin: 0.5em;
        background: transparent;
        color: white;
        /* text-transform 控制文本的大小写,capitalize(首字母大写), uppercase(全部大写), lowercase(全部小写) */
        text-transform: uppercase;
        text-decoration: none;
        font: bold 200%/1 sans-serif;
    }
    /*/
        用伪元素实现一个矩形,也可以使用一个冒号代替或者用after
        /*/
    
    .button::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1;
        background: #58a;
        transform: skew(45deg);
    }
平行四边形效果图

二、菱形图片

背景知识:clip-path,transition,transform-origin
代码示例:

<img src="img/search_more.png" />
img {
    margin-top: 30px;
    width: 300px;
    height: 300px;
    clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
    transition: 1s clip-path;
}

img:hover {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform-origin: bottom;
    transform: scale(1.3);
}
菱形图片效果图

三、切角效果

背景知识:css 渐变,border-image,background-clip,calc(),polygon-clip,SVG知识点
主要介绍圆弧切角和直角切角的实现。
1、圆切角
代码示例:

<div class="scoop-corners">圆弧切角的实现:用径向渐变实现;注意:径向渐变中的语法所表示的意思</div>
.scoop-corners {
    margin-top: 10px;
    background: #58a;
    background: radial-gradient(circle at top left, transparent 15px, #58a 0) top left,
                radial-gradient(circle at top right, transparent 15px, #58a 0) top right,
                radial-gradient(circle at bottom right, transparent 15px, #58a 0) bottom right,
                radial-gradient(circle at bottom left, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
    color: white;
    font: 130%/1.6 Baskerville, Palatino, serif;
}
圆弧切角效果图

2、直角切角
有三种实现方案:
2.1 方案一:利用线性渐变解决;需要注意的是:各个方位角所代表的角度。
代码示例:

<div class="bevel-corners-gradients">方案一:利用线性渐变解决;需要注意的是:各个方位角所代表的角度。</div>
.bevel-corners-gradients {
    background: #58a;
    background: linear-gradient(135deg, transparent 15px, #58a 0) top left,
                linear-gradient(-135deg, transparent 15px, #58a 0) top right,
                linear-gradient(-45deg, transparent 15px, #58a 0) bottom right,
                linear-gradient(45deg, transparent 15px, #58a 0) bottom left;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    
    padding: 1em 1.2em;
    max-width: 12em;
    color: white;
    font: 150%/1.6 Baskerville, Palatino, serif;
}
直角切角方案一效果图

2.2 方案二:border-image 与内联SVG:需要对 SVG 的语法进行学习和 polygon多边形函数构图原理的进一步深入。
代码示例:

<div class="bevel-corners">方案2:border-image 与内联SVG:需要对 SVG 的语法进行学习和 polygon多边形函数构图原理的进一步深入</div>
.bevel-corners {
    margin-top: 10px;
    border: 20px solid transparent;
    border-image: 1 url('data:image/svg+xml,\
                            <svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" fill="%2358a">\
                            <polygon points="0,1 1,0 5,0 6,1 6,5 5,6 1,6 0,5" />\
                            </svg>');
    background: #58a;
    background-clip: padding-box;
    
    padding: .2em .3em;
    max-width: 12em;
    color: white;
    font: 150%/1.6 Baskerville, Palatino, serif;
}
直角切角方案二效果图

2.3 方案三: 路径裁切解决方案:最大的缺陷是不可维护性,需要借用预处理器才能更好的维护,但是它可以使用任意类型的背景。
代码示例:

<div class="bevel-corners-clipped">方案三:路径裁切解决方案:最大的缺陷是不可维护性,需要借用预处理器才能更好的维护,但是它可以使用任意类型的背景</div>
.bevel-corners-clipped {
    margin-top: 10px;
    background: #58a;
    -webkit-clip-path: 
        polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
        calc(100% - 20px) 100%,
        20px 100%, 0 calc(100% - 20px), 0 20px);
    clip-path:
            polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            20px 100%, 0 calc(100% - 20px), 0 20px);
    
    padding: 1em 1.2em;
    max-width: 12em;
    color: white;
    font: 150%/1.6 Baskerville, Palatino, serif;
}
直角切角方案三效果图

四、折角效果

背景知识:伪元素,transform,css 渐变
代码示例:

<div class="note1">此效果需要注意的:1、需要借助伪元素来实现,2、在不同角度的折角需要利用三角函数来计算折角的宽高。3、在变形过程中的顺序问题,要先平移在旋转,4、为了可复用性需要借助scss,而scss不支持三角函数,需要借助compass框架</div> 
.note1 {
    position: relative;
    max-width: 30em;
    padding: 2em;
    background: #58a;
    background: linear-gradient(-150deg, transparent 1.5em, #58a 0);
    border-radius: .5em;
}
.note1::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(to left bottom, transparent 50%, rgba(0, 0, 0, .2) 0, rgba(0, 0, 0, .4)) 100% 0 no-repeat;
    width: 1.7em;
    height: 3em;
    -webkit-transform: translateY(-1.3em) rotate(-30deg);
        -moz-transform: translateY(-1.3em) rotate(-30deg);
        -ms-transform: translateY(-1.3em) rotate(-30deg);
            -o-transform: translateY(-1.3em) rotate(-30deg);
            transform: translateY(-1.3em) rotate(-30deg);
    transform-origin: bottom right;
    border-bottom-left-radius: inherit;     
    box-shadow: -.2em .2em .3em -.1em rgba(0, 0, 0, .15);
}
折角效果图

五、梯形标签页

背景知识:伪元素,transform
代码示例:

    <nav>
        <a href="#">Home</a>
        <a href="#" class="selected">Projects</a>
        <a href="#">About</a>
    </nav>
    <main>
        Content area
    </main>
    nav {
        position: relative;
        z-index: 1;
        padding-left: 1em;
    }

    nav > a {
        position: relative;
        display: inline-block;
        padding: .3em 1em 0;
        color: inherit;
        text-decoration: none;
        margin: 0 -.3em;
    } 

    nav > a::before,
    main {
        border: .1em solid rgba(0,0,0,.4);
    }

    nav a::before {
        content: ''; /* To generate the box */
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        z-index: -1;
        border-bottom: none;
        border-radius: .5em .5em 0 0;
        background: #ccc linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,0));
        box-shadow: 0 .15em white inset;
        transform: scale(1.1, 1.3) perspective(.5em) rotateX(3deg);
        transform-origin: bottom;
    }

    nav a.selected { z-index: 2;}

    nav a.selected::before {
        background-color: #eee;
        margin-bottom: -.08em;
    }

    main {
        display: block;
        margin-bottom: 1em;
        background: #eee;
        padding: 1em;
        border-radius: .15em;
    }
    nav.left > a::before {
        transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
        transform-origin: bottom left;
    }

    nav.right { padding-left: 2em; }

    nav.right > a::before {
        transform: scale(1.2, 1.3) perspective(.5em) rotateX(5deg);
        transform-origin: bottom right;
    }
梯形标签页

六、简单的饼图

背景知识:css 渐变,transform,css 动画
代码示例:

    <div class="pie"></div>
    .pie {
        width: 100px; height: 100px;
        border-radius: 50%;
        background: yellowgreen;
        background-image: linear-gradient(to right, transparent 50%, currentColor 0);
        color: #655;
    }

    .pie::before {
        content: '';
        display: block;
        margin-left: 50%;
        height: 100%;
        border-radius: 0 100% 100% 0 / 50%;
        background-color: inherit;
        transform-origin: left;
        animation: spin 3s linear infinite, bg 6s step-end infinite;
    }

    @keyframes spin {
        to { transform: rotate(.5turn); }
    }
    @keyframes bg {
        50% { background: currentColor; }
    }
简单的饼图
这里需要注意动画的形成原理。
css 变形规范参考

相关文章

  • css 变形示例

    一、平行四边形 背景知识:transform,伪元素代码示例: 二、菱形图片 背景知识:clip-path,tra...

  • css3-变形

    .css3-变形 transform 是css的变形属性,通过变形函数,设置具体的变形方式 scale()变形函数...

  • CSS变形、过渡和动画

    CSS实战手册 CSS变形,过渡和动画 1 变形 transform 1.1 旋转:rotate transfor...

  • transform(变形)

    transform(变形) CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS...

  • --- > css3-变形

    transform(变形) CSS3中可以通过transform属性修改元素的变形、旋转、缩放、倾斜特性,在CSS...

  • css选择器权重

    css选择器权重示例: .html .css

  • CSS3之变形

    一、CSS3变形简介 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都称为变形函数(Tra...

  • CSS3 Transform——transform-origin

    关于css3变形 CSS3变形是一些效果的集合,比如平移、旋转、缩放和倾斜效果,每个效果都被称作为变形函数(Tra...

  • 小程序下拉列表

    示例 wxml: css: js:

  • 「CSS」变形

    2D 变形transformrotate()transform-origintranslate()scale()s...

网友评论

    本文标题:css 变形示例

    本文链接:https://www.haomeiwen.com/subject/oewwmqtx.html