clip-path

属性介绍:

clip-path属性可以创建一个只有元素的部分区域可以显示的剪切区域。

区域内的部分显示,区域外的隐藏。

剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径。

使用:

不可思议的CSS之clip-path

css中clip-path属性的运用

具体还支持SVG路径

maker工具,你画好图形,代码就在下面: http://bennettfeely.com/clippy/

主流浏览器支持情况:

效果实现:

html:

<div></div>

css:

html,
body {
  height: 100%;
}

body {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  background: #999999;
}

div {
  width: 75vmin;
  height: 75vmin;
  -webkit-animation: shape 10s ease-in-out infinite both;
  animation: shape 10s ease-in-out infinite both;
}

@-webkit-keyframes shape {

  from,
  to {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: url('./267323.jpg') center;
  }

  14.28571% {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: url('./267323.jpg') left top;
  }

  28.57143% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
    clip-path: polygon(50% 0, 50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
    background: url('./267323.jpg') right bottom;
  }

  42.85714% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 25%, 100% 75%, 50% 100%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 50% 0, 100% 25%, 100% 75%, 50% 100%, 50% 100%, 0 75%, 0 25%);
    background: url('./267323.jpg') left bottom;
  }

  57.14286% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 38%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 0 38%);
    clip-path: polygon(50% 0, 50% 0, 100% 38%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 0 38%);
    background: url('./267323.jpg') right top;
  }

  71.42857% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    clip-path: polygon(50% 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    background: url('./267323.jpg') right right;
  }

  85.71429% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 50% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 50% 0);
    clip-path: polygon(50% 0, 50% 0, 50% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 50% 0);
    background: url('./267323.jpg') left center;
  }
}

@keyframes shape {

  from,
  to {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: url('./267323.jpg') center;
  }

  14.28571% {
    -webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
    background: url('./267323.jpg') left top;
  }

  28.57143% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
    clip-path: polygon(50% 0, 50% 0, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0 60%, 10% 20%);
    background: url('./267323.jpg') right bottom;
  }

  42.85714% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 25%, 100% 75%, 50% 100%, 50% 100%, 0 75%, 0 25%);
    clip-path: polygon(50% 0, 50% 0, 100% 25%, 100% 75%, 50% 100%, 50% 100%, 0 75%, 0 25%);
    background: url('./267323.jpg') left bottom;
  }

  57.14286% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 38%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 0 38%);
    clip-path: polygon(50% 0, 50% 0, 100% 38%, 100% 38%, 82% 100%, 18% 100%, 0 38%, 0 38%);
    background: url('./267323.jpg') right top;
  }

  71.42857% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    clip-path: polygon(50% 0, 50% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
    background: url('./267323.jpg') right right;
  }

  85.71429% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 50% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 50% 0);
    clip-path: polygon(50% 0, 50% 0, 50% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 50% 0);
    background: url('./267323.jpg') left center;
  }
}

CSS3 之高级动画(6)CSS3 clip-path属性实现的几何图形变形动画的更多相关文章

  1. Unity插件 - MeshEditor(六) 变形动画状态机

    变形动画状态机--MeshAnimator,是针对MeshAnimation的状态管理器,有大量类似Unity animator的功能,但MeshAnimator操作会更加简便,更加直观,居家旅(zh ...

  2. CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)

    刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...

  3. CSS3展现精彩的动画效果 css3的动画属性

    热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...

  4. css3学习--css3动画详解一(animation属性)

    ***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...

  5. (一)CSS3动画应用 - CSS3 实现 侧边栏展开收起

    @keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不 ...

  6. CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画

    ---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...

  7. 关于JS动画和CSS3动画的性能差异

    本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...

  8. CSS3 基本属性 浅析(含选择器、背景阴影、3D转换、动画等)

    1渐进增强原则 2私有前缀  不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试:     Chrome浏览器:-webkit-border-radius: 5px;   ...

  9. 使用jquery封装的动画脚本(无动画、css3动画、js动画)

    自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出)  slideUpDown(上下滑动)  slideLeftRight(左右滑动)  fadeSlid ...

随机推荐

  1. bootstrap上下左右条纹边框悬停表格的使用

    懒得找地址:https://jingyan.baidu.com/album/0bc808fc3d88941bd585b94c.html?picindex=1

  2. syx学习笔记

    SYX复活了,在悲痛之际,希望能让自己获得更多的知识,更有进步,所以留此博客 数学 推荐blog: 1 2 原根表 FFT(快速傅里叶变换) 2019/12/05 √ 博客 blog 题目 Q1 NT ...

  3. 吴裕雄--天生自然JAVAIO操作学习笔记:RandomAccessFile

    import java.io.File ; import java.io.RandomAccessFile ; public class RandomAccessFileDemo01{ // 所有的异 ...

  4. C++ 动态多态

    背景 以前的学习,只是简单地知道:面向对象的三大特性(封装.继承.多态) ,在项目开发中,用到了多态而自己却不知道. 多态(Polymorphism)按字面的意思就是"多种状态". ...

  5. CRC校验算法详解

    CRC(Cyclic Redundancy Check)循环冗余校验是常用的数据校验方法,讲CRC算法的文章很多,之所以还要写这篇,是想换一个方法介绍CRC算法,希望能让大家更容易理解CRC算法. 先 ...

  6. 需要多个参数输入时-----------------考虑使用变种的Builder模式

    业务需求: 创建一个不可变的Person对象,这个Person可以拥有以下几个属性:名字.性别.年龄.职业.车.鞋子.衣服.钱.房子. 要求: 其中名字和性别是必填项,而其他选填项可以根据情况自由输入 ...

  7. Java 解决Emoji表情过滤问题

    Emoji表情从三方数据中获取没有过滤,导致存入DB的时候报错. 原因: UTF-8编码有可能是两个.三个.四个字节.Emoji表情是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去 ...

  8. mysql sql语句不同平台上大小写区分

  9. memortstream Base64编码和filestream base64编码不同

    memorystream base64 function BaseImage(fn: string): string; var   m1: TMemoryStream;   m2: TStringSt ...

  10. Hadoop数据压缩技术

    一.Hadoop数据压缩及其优缺点 1.压缩技术的好处与坏处 好处: 减少存储磁盘空间 降低IO(网络的IO和磁盘的IO) 加快数据在磁盘和网络中的传输速度,从而提高系统的处理速度. 坏处: 由于使用 ...