CSS3 之高级动画(6)CSS3 clip-path属性实现的几何图形变形动画
clip-path
属性介绍:
clip-path
属性可以创建一个只有元素的部分区域可以显示的剪切区域。
区域内的部分显示,区域外的隐藏。
剪切区域是被引用内嵌的URL定义的路径或者外部svg的路径。
使用:
具体还支持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属性实现的几何图形变形动画的更多相关文章
- Unity插件 - MeshEditor(六) 变形动画状态机
变形动画状态机--MeshAnimator,是针对MeshAnimation的状态管理器,有大量类似Unity animator的功能,但MeshAnimator操作会更加简便,更加直观,居家旅(zh ...
- CSS3实践之路(六):CSS3的过渡效果(transition)与动画(animation)
刚开始W3C CSS Workgroup拒绝将CSS3 transition与animation加入官方标准,一些成员认为过渡效果和动画并非样式属性,而且已经可以用脚本实现.所以请大家明白,特别是We ...
- CSS3展现精彩的动画效果 css3的动画属性
热火朝天的css3无疑吸引了很多前端开发者的眼球,然而在css3中的动画属性则是新功能中的主打招牌,说到css3的动画属性不得不让人想起这三个属性:Transform﹑Transition﹑Anima ...
- css3学习--css3动画详解一(animation属性)
***介绍的属性并不完全,写的都是我认为容易混淆的难点属性,所以属性会在最后综合案例展示~ 一.Keyframes介绍: Keyframes被称为关键帧,其类似于Flash中的关键帧.在CSS3中其主 ...
- (一)CSS3动画应用 - CSS3 实现 侧边栏展开收起
@keyframes 规则用于创建动画. @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不 ...
- CSS3集锦之新增选择器、圆角、阴影、透明度、transition动画、transform变形、animation动画
---恢复内容开始--- 一.CSS3新增选择器 1.nth-chlid(n)用法 selector:nth-chlid(n)指找到第n个子元素并且该元素为selector标签 <!DOCTYP ...
- 关于JS动画和CSS3动画的性能差异
本文章为综合其它资料所得. 根据Google Developer,Chromium项目里,渲染线程分为main thread和compositor thread. 如果CSS动画只是改变transfo ...
- CSS3 基本属性 浅析(含选择器、背景阴影、3D转换、动画等)
1渐进增强原则 2私有前缀 不同浏览器在发布不同版本(一般测试版)时会加前缀,新增属性加上前缀进行支持测试: Chrome浏览器:-webkit-border-radius: 5px; ...
- 使用jquery封装的动画脚本(无动画、css3动画、js动画)
自己封装好的showhide.js 包含无动画.css3动画.js动画 包括:fade(淡入淡出) slideUpDown(上下滑动) slideLeftRight(左右滑动) fadeSlid ...
随机推荐
- bootstrap上下左右条纹边框悬停表格的使用
懒得找地址:https://jingyan.baidu.com/album/0bc808fc3d88941bd585b94c.html?picindex=1
- syx学习笔记
SYX复活了,在悲痛之际,希望能让自己获得更多的知识,更有进步,所以留此博客 数学 推荐blog: 1 2 原根表 FFT(快速傅里叶变换) 2019/12/05 √ 博客 blog 题目 Q1 NT ...
- 吴裕雄--天生自然JAVAIO操作学习笔记:RandomAccessFile
import java.io.File ; import java.io.RandomAccessFile ; public class RandomAccessFileDemo01{ // 所有的异 ...
- C++ 动态多态
背景 以前的学习,只是简单地知道:面向对象的三大特性(封装.继承.多态) ,在项目开发中,用到了多态而自己却不知道. 多态(Polymorphism)按字面的意思就是"多种状态". ...
- CRC校验算法详解
CRC(Cyclic Redundancy Check)循环冗余校验是常用的数据校验方法,讲CRC算法的文章很多,之所以还要写这篇,是想换一个方法介绍CRC算法,希望能让大家更容易理解CRC算法. 先 ...
- 需要多个参数输入时-----------------考虑使用变种的Builder模式
业务需求: 创建一个不可变的Person对象,这个Person可以拥有以下几个属性:名字.性别.年龄.职业.车.鞋子.衣服.钱.房子. 要求: 其中名字和性别是必填项,而其他选填项可以根据情况自由输入 ...
- Java 解决Emoji表情过滤问题
Emoji表情从三方数据中获取没有过滤,导致存入DB的时候报错. 原因: UTF-8编码有可能是两个.三个.四个字节.Emoji表情是4个字节,而Mysql的utf8编码最多3个字节,所以数据插不进去 ...
- mysql sql语句不同平台上大小写区分
- memortstream Base64编码和filestream base64编码不同
memorystream base64 function BaseImage(fn: string): string; var m1: TMemoryStream; m2: TStringSt ...
- Hadoop数据压缩技术
一.Hadoop数据压缩及其优缺点 1.压缩技术的好处与坏处 好处: 减少存储磁盘空间 降低IO(网络的IO和磁盘的IO) 加快数据在磁盘和网络中的传输速度,从而提高系统的处理速度. 坏处: 由于使用 ...