HTML5实现图形挤压变形效果DEMO演示

分享到:
<!DOCTYPE html>
<!-- saved from url=(0065)http://www.html5tricks.com/demo/html5-image-extrusion/index2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta charset="UTF-8">

  <title>HTML5实现图形挤压变形效果DEMO演示</title>

  <link rel="stylesheet" href="http://www.html5tricks.com/demo/html5-image-extrusion/css/normalize.css">

    <link rel="stylesheet" href="./HTML5实现图形挤压变形效果DEMO演示_files/style.css" media="screen" type="text/css">

</head>
<style>
</style>
<body>

  <div class="zone">
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>
  <div class="blob"></div>

  <span class="repulse" style="left: 66px; top: 41px;"></span>
</div>

  <script src="./HTML5实现图形挤压变形效果DEMO演示_files/jquery.js"></script>

  <script src="./HTML5实现图形挤压变形效果DEMO演示_files/index.js"></script>



</body></html>
昵    称:
验证码:

相关文档:

  • html5匹配不同分辨率样式
    .abc{height:300px;border:1pxsolid#000;margin:0auto} @mediascreenand(min-width:1201px){ .abc{width:1200px} } /*设置了浏览器宽度不小于1201px时abc显示1200px宽度*/ @med...
  • HTML5学习笔记
    HTML5学习笔记 1.HTML5-新特性 HTML5中的一些有趣的新特性: 用于绘画的canvas元素 用于媒介回放的video和audio元素 对本地离线存储的更好的...
  • 慢牛股票-基于Sencha+Cordova的股票类APP
    13,14这两年,我的业余时间都花在了移动互联网技术和股票技术分析上,14年底,终于开发完成慢牛,上线小米应用商店、应用宝、百度...
  • 7个惊艳的HTML5 Canvas动画效果及源码
    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来。另外,Canvas上绘制图形非常简单,本文就分享...
  • 【转帖】39个让你受益的HTML5教程
    39个让你受益的HTML5教程...
  • PHP笔记(HTML篇)
    学过很多语言,最近终于决定要学PHP了。 学习PHP,首先总要学习HTML,那么,我也从HTML开始吧! 首先学习任何编程语言,看再多书,都...
  • 国内开源html5游戏引擎全收录
    本文引自《国内开源html5游戏引擎全收录》 游戏开发这潭水太深,英文水平太差,不敢看国外的,而且这几年国内技术水平也挺高了不少...
  • [转]浅析天猫H5站点
    前言 我们做前端开发的时候,很有可能会做一个竞品分析,比如我就做过去哪儿、艺龙、同程等与携程的移动站点竞品分析,竞品分析...
  • [html5/css3]html5的全局属性
    <!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title>html5全局属性</title> <scripttype="text/javascript">...
  • html5游戏之createjs以及“找不同”实践
    今天给大家介绍一款h5游戏的小框架,createjs,相信很多人都接触过。先简单介绍下createjs:CreateJS为CreateJS库,可以说是一款为HTML5游戏开...
  • Html5实践之EventSource
    最近尝试了一下服务器端的推送,之前的做法都是客户端轮询,定时向服务器发送请求。但这造成了我的一些困扰: 1:轮询是由客户端...
  • HTML5和CSS3技术出来了 还需要学习CSS2吗?
    HTML5和CSS3技术出来了还需要学习CSS2吗? 答案是必须学习CSS2.0版技术。 因为CSS3是基于CSS2版本升级添加一些效果,但这些布局效果只有高...
  • 学习笔记:HTML5 Canvas绘制简单图形
    HTML5Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作。 <canvasid="mycanvas"height="700"width="1024"style="border:1pxsolid#aaa;text-align:center;"> 你...
  • 20款免费响应式的 HTML5 网站模板下载
    今天这篇文章给大家带来的是20款免费响应式的HTML5网站模板,大家可以借助这些优秀的网站模板创建自己的优秀网站。响应式(ResponsiveD...
  • 不常用但很不错的html5效果
    这里精选了一组很酷的HTML5效果。HTML5是现Web开发领域的热点,拥有很多让人期待已久的新特性,特别是在移动端,Web开发人员可以借助HT...
  • HTML5 本地裁剪图片并上传至服务器(转)
    很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的。但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后...
  • 利用html5压缩图片,产出base64图片
    /*将页面选择的图片等比压缩成指定大小(长边固定)file:图片文件callBack:回调函数maxLen:长边的长度*/functionmakePic(file,callBack,maxLen){ varurl...
  • html5 反色+倒影
    <body><canvasid="c1"width="800"height="400"></canvas><scripttype="text/javascript">varoC=document.getElementById("c1");varoGC=...
  • 修改http中的refer(转)
    Referrer的重要性 HTTP请求中有一个referer的报文头,用来指明当前流量的来源参考页。例如在www.sina.com.cn/sports/上点击一个链接到达cctv.com首...
  • HTML5 game engines
    ThefollowingarefewexamplesofgameenginesimplementedwithHTML5andJavaScript: Construct2:OneofthefirstWebGLenabledHTML5gameengines.ExportspurelytoHTML5a...