- 浏览: 414833 次
- 性别:
- 来自: 上海
文章分类
最新评论
-
IThead:
纠结了几天,用了你的方法,现在解决了,谢谢!
Eclipse 写Javascript卡死问题 -
Rubicon__:
你好,我在运用PageWidget这个类时,出现第一页翻到第二 ...
android翻书效果实现原理( 贝塞尔曲线绘制原理/点坐标计算) -
lionios:
如果不显示printDialog,则打印出来的是空白页,请问你 ...
Print打印机例子 -
rayln:
weiqiulai 写道哥们儿,我怎么没有看到监控队列的配置和 ...
JMS监听MQ实例 -
weiqiulai:
哥们儿,我怎么没有看到监控队列的配置和代码?
JMS监听MQ实例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> body { background:#e2b29f; font-size:120%; padding:100px; } .rabbit { width:5em; height:3em; background:#ffffff; border-radius:70% 90% 60% 50%; position:relative; box-shadow: -0.2em 1em 0 -0.75em #b78e81; -webkit-transform: rotate(0deg) translate(-2em,0); -webkit-animation: hop 1s infinite linear; z-index:1; } .rabbit:before { content:""; position:absolute; width:1em; height:1em; background:white; border-radius:100%; top:0.5em; left:-0.3em; box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1em 0 white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.3em white, 4em 1em 0 -0.4em white;; -webkit-animation: kick 1s infinite linear; } .rabbit:after { content:""; position:absolute; width:.75em; height:2em; background:white; border-radius:50% 100% 0 0; -webkit-transform: rotate(-30deg); right:1em; top:-1em; border-top:1px solid #f7f5f4; border-left: 1px solid #f7f5f4; box-shadow:-0.5em 0em 0 -0.1em white; } .clouds { background:white; width:2em; height:2em; border-radius:100% 100% 0 0; position:relative; top:-5em; opacity(0); -webkit-transform: translate(0,0); -webkit-animation: cloudy 1s infinite linear forwards; box-shadow:5em 2em 0 -0.3em white, -2em 2em 0 0 white; } .clouds:before,:after { content:''; position:absolute; box-shadow:5em 2em 0 -0.3em white, -2em 2em 0 0 white; } .clouds:before { width:1.25em; height:1.25em; border-radius:100% 100% 0 100%; background:white; left:-30%; bottom:0; } .clouds:after { width:1.5em; height:1.5em; border-radius:100% 100% 100% 0; background:white; right:-30%; bottom:0; } @-webkit-keyframes hop { 20% { -webkit-transform: rotate(-10deg) translate(1em,-2em); box-shadow: -0.2em 3em 0 -1em #b78e81; } 40% { -webkit-transform: rotate(10deg) translate(3em,-4em); box-shadow: -0.2em 3.25em 0 -1.1em #b78e81; } 60%,75% { -webkit-transform: rotate(0) translate(4em,0); box-shadow: -0.2em 1em 0 -0.75em #b78e81; } } @-webkit-keyframes kick { 20%,50% { box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 1.5em 0 white, 4em 1.75em 0 -0.3em white, 4em 1.75em 0 -0.3em white, 4em 1.9em 0 -0.4em white; } 40% { box-shadow: 4em 0.4em 0 -0.35em #3f3334, 0.5em 2em 0 white, 4em 1.75em 0 -0.3em white, 4.2em 1.75em 0 -0.2em white, 4.4em 1.9em 0 -0.2em white; } } @-webkit-keyframes cloudy { 40% { opacity(0.75); -webkit-transform: translate(-3em,0); } 55% { opacity: 0; -webkit-transform: translate(-4em,0); } 90% { -webkit-transform: translate(0,0); } } </style> </head> <body> <div class="rabbit"> </div> <div class="clouds"> </div> </body> </html>
发表评论
-
文字实现水平垂直居中
2014-01-11 09:58 910文字实现水平垂直居中的关键代码: display: ... -
CSS3 Media Queries在iPhone4和iPad上的运用
2014-01-07 00:01 1044http://www.w3cplus.com/css3/css ... -
box-sizing使用
2013-07-17 13:32 677box-sizing : content-box || bor ... -
如何通过CSS3的Clip制作饼图
2013-05-10 16:46 1029CSS3是个非常强大的玩意, 大家可以看看我的例子, 可以实现 ... -
CSS3的keyframe动画介绍
2013-05-07 13:50 493#sun.VeryHuo { animation-name ... -
CSS3 Media Queries
2013-04-27 10:44 809转载: http://www.w3cplus.co ... -
Three.js的模型软件Blender
2013-04-09 14:41 1113使用Blender软件可以非常简单的导出3D模型为json字符 ... -
本地文件拖拽到浏览器
2013-03-19 13:22 1058利用HTML5的File API可以实现文件拖拽到服务器上 直 ... -
最简单的拖拽效果
2013-01-28 16:46 769html5中提供了drag的效果, 通过事件可以进行拖拽元素, ... -
斜坡算法
2013-01-17 16:52 1437斜坡算法, 通过canvas画斜坡的算法, 知道这个算法后, ... -
如何创建一个Chrome应用
2013-01-08 15:48 0看附件的详细介绍 -
Canvas宝典
2012-12-13 15:35 690Canvas宝典, 神器!! -
CSS区分横屏和竖屏
2012-09-21 14:57 1200如何区分横屏和竖屏, 在CSS中? //竖屏 @media ... -
利用HTML5的WebGL制作的3D图形
2012-06-27 14:55 1622这里介绍一篇翻译的文章, 写的非常好, 大家可以去看看WebG ... -
KinticJs的基本用法
2012-06-11 15:42 924Kintic是html5中canvas的一个框架,效率高,包小 ... -
CSS3伪类选择器
2012-06-03 15:38 872CSS3的一个伪类选择器“:nth-child()”。 语法: ... -
canvas是如何绘画基本shape的(矩形、直线、圆弧、贝赛尔曲线)
2012-05-04 15:43 1678转载: http://www.cnblogs.com/amtf ... -
input框语音功能
2012-04-06 12:26 937Webkit内核的input框带有语音功能, 请看实例 &l ... -
-webkit-内核滚动条样式覆盖
2012-02-23 21:18 1746今天看了下Chrome的网上商城, 感觉他们的滚动条很特别. ... -
CSS3 Border-Image图片裁剪用法
2012-02-17 01:17 1524转载:http://www.zhangxinxu.com/wo ...
相关推荐
小兔子快快跑HTML5游戏源码,运行需要服务器环境,已经反复测试,放心使用。
游戏介绍:通过点击屏幕弹跳到达兔子窝 源码存放环境:LINUX 6.X + Nginx 环境
运行,兔子,跑酷游戏,H5源代码,效果和神庙逃亡差不多,用键盘上下左右控制,手机也可以运行,用手指左右上下滑动
canvas+javascript+html5网页下游戏 奔跑把小兔子 积分模式 闯关跑酷休闲游戏支持手机版
技术栈: Vue 3:利用Vue 3的最新特性,如Composition API、Teleport、Fragments等,提供更加灵活的组件编写和复用方式。 Vite:作为下一代的前端构建工具,Vite提供了快速的冷启动、即时的模块热更新(HMR)和真正...
第1节 算法和数据结构路线、注意点与常见问题.mp4 第2节 认识复杂度、对数器、二分法.mp4 第3节 异或运算相关面试题.mp4 第4节 一些基础的数据结构.mp4 第5节 归并排序及其相关面试题.mp4 第6节 归并排序附加题、...
第一课|AI智能绘画前期准备以及搭建工具 第二课|关键词的获取方式以及应用,一节课解锁全部技巧 第三课|AI智能绘内核讲解PROMPT框架以及IMAGETOIMAGE 第四课|赋能运营插画,实际商业项目代练 ...
699xlIDt6c#^Lazui8iwZ*amTYDBjO#x
autosar示例,反正打不开,整个积分
无
...此外,教程还提供了实验环境的搭建方法和测试用例的设计,鼓励读者通过实践来加深理解。每讲末尾的思考题旨在促进读者的主动学习,将被动听课转变为主动探索。主讲人还鼓励读者积极留言交流,以便对教程内容进行...
bootloader demo
Spring系列面试题129道
weirui烧写脚本示例
这是一个MSP430与ADS1230进行SPI通信的程序
这套资源是专为希望提升工作效率的职场人士设计的Python办公自动化教程。它从Python的基础语法讲起,逐步引导学习者掌握变量、数据类型、控制语句等核心概念,并通过实际案例深入讲解如何应用Python处理日常工作中的...