css 实现随风摆动
无标题文档
@-webkit-keyframes open {
0% {
-webkit-transform: rotateX(-120deg);
}
25% {
-webkit-transform: rotateX(25deg);
}
50% {
-webkit-transform: rotateX(-15deg);
}
75% {
-webkit-transform: rotateX(10deg);
box-shadow: inset 0 0 0 0 #ccc;
}
100% {
-webkit-transform: rotateX(0deg);
}
}
@-webkit-keyframes clos {
0% {
-webkit-transform: rotateX(0deg);
}
100% {
-webkit-transform: rotateX(-120deg);
}
}
.wrap { width: 240px; position: relative; -webkit-perspective: 800px; margin: 0 auto }
.wrap h3 { margin: 0; height: 40px; background: rgba(255, 102, 0, 1); color: rgba(255, 255, 255, 1); line-height: 40px; text-align: center; font-size: 16px; position: relative; z-index: 10 }
.wrap div { position: absolute; top: 30px; left: 0; -webkit-transform-style: preserve-3d; width: 100%; -webkit-transform-origin: top; -webkit-transform: rotateX(-120deg); z-index: 1 }
.wrap>div:nth-of-type(0n+1) { top: 40px }
.wrap span { display: block; height: 28px; background: rgba(127, 255, 212, 1); color: rgba(255, 255, 255, 1); font: 14px / 28px "宋体"; text-indent: 20px; box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 1); transition: 1s }
.wrap .open { -webkit-transform: rotateX(0deg); -webkit-animation: 5s open ease-in-out }
.wrap .open>span { box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0) }
.wrap .clos { -webkit-transform: rotateX(-120deg); -webkit-animation: 0.7s clos ease-in-out }
.wrap .clos>span { box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 1) }
#btn { position: absolute; left: 0; top: 0; width: 100px; height: 30px; transition: 1s }
这是标题
css 实现随风摆动的更多相关文章
- Unity3D手游开发日记(5) - 适合移动平台的植被随风摆动
一直在思考怎么让场景更有生机,我觉得植被的随风摆动是必不可少的.CE3引擎的植被bending就做得特别棒.我也准备在手机上做一套. 先分析一下植被摆动常见的几种做法.其实不管哪种做法,核心就是让植被 ...
- Unity3D ——强大的跨平台3D游戏开发工具(二)
第二章 Unity3D的简单预览 每个Unity3D版本都会自带一个Demo源文件.在3.0的正式版中,自带的Demo就是网上展示的那款强大的射击游戏.在一般情况下,您只要第一次 打开Unity3D ...
- GDC2017【神秘海域 4】中所使用的顶点着色器技术
原文链接 http://game.watch.impress.co.jp/docs/news/1047802.html 会場:San Francisco Moscone Convention Ce ...
- 关于Unity中蒙皮网格和布料的使用
所以物体的要绘制出来就必须要有网格组件+材质属性,如果还需要其他特效或丰富内容的话,还可以再加组件. 蒙皮网格和布料 1: 例如要模拟衣服,随风摆动,模拟布料需要用到蒙皮网格和布料;2: 蒙皮网格可以 ...
- Unity3D游戏开发从零单排(三) - 极速创建狂拽酷炫的游戏地形
提要 在Unity工作流程内,地形是一个必不可少的重要元素.不论是游戏或虚拟现实都会使用到各种类型的地形效果,在这个教学中我们须要了解到地形的制作基本概念与,当中对于Unity的地形操作部分须要大量的 ...
- 玩转控件:对Dev中GridControl控件的封装和扩展
又是一年清明节至,细雨绵绵犹如泪光,树叶随风摆动.... 转眼间,一年又过去了三分之一,疫情的严峻让不少企业就跟清明时节的树叶一样,摇摇欲坠.裁员的裁员,降薪的降薪,996的996~~说起来都是泪,以 ...
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS类似微软中国首页的竖向选项卡
效果体验:http://hovertree.com/texiao/css/24/ 源码下载:http://hovertree.com/h/bjaf/hardklps.htm 代码如下: <!DO ...
- 纯CSS实现delay连续动画
从前css3还没出来的时候,用jquery的delay方法可以串起一个一个独立的动画片段. 那么在不使用jquery的平台上,如何借助css3来完成一些列动作呢? 有高人做了一个动感十足的人物动画: ...
随机推荐
- Java案例——ArrayList存储学生对象并遍历
package ArrayListDemo;import java.util.ArrayList;import java.util.Scanner;/*案例:存储学生对象并遍历 需求:创建一个存储学生 ...
- 部署 Nginx +uwsgi+centos7+django+supervisor 项目
部署CRM项目 前言 使用软件 nginx 使用nginx是为了它的反向代理功能,项目会通过Django+uWSGI+Nginx进行服务器线上部署. uWSGI python web服务器开发使用WS ...
- 集合 copy
#集合的创建 # set = set(["barry",1,2]) # print(set) # set1 = {1,2,3} #集合的增 # set1 = {'alex','wu ...
- 托管调试助手 "DisconnectedContext":“针对此 RuntimeCallableWrapper 向 COM 上下文 0xd47808 的转换失败,错误如下: 系统调用失败。
参考资料 托管调试助手 "DisconnectedContext":"针对此 RuntimeCallableWrapper 向 COM 上下文 0xd47808 的转换失 ...
- 生成树Toolkit
STP Toolkit 快速收敛: Port Fast 生成树安全: Root Guard BPDU Guard BPDU Filter Port Security 防环: Loop Guard Po ...
- BZOJ3159: 决战(FHQ Treap)
传送门: 解题思路: 算是补坑了,这题除了Invert以外就可以树剖线段树解决了. 考虑Invert操作,延续先前树链剖分的做法,考虑先前算法的瓶颈. 最暴力的方法是暴力交换权值,然而这种方法忽略了当 ...
- SpringCloud和Dubbo?
SpringCloud和Dubbo都是现在主流的微服务架构SpringCloud是Apache旗下的Spring体系下的微服务解决方案Dubbo是阿里系的分布式服务治理框架从技术维度上,其实Sprin ...
- JdbcTemplate?
JdbcTemplate 类提供了很多便利的方法解决诸如把数据库数据转变成基本数据类型或对象,执行写好的或可调用的数据库操作语句,提供自定义的数据错误处理.
- Java 中如何将字符串转换为整数?
String s="123"; int i; 第一种方法:i=Integer.parseInt(s); 第二种方法:i=Integer.valueOf(s).intValue();
- Memcached 服务特点及工作原理是什么?
a.完全基于内存缓存的 b.节点之间相互独立 c.C/S 模式架构,C 语言编写,总共 2000 行代码. d.异步I/O 模型,使用 libevent 作为事件通知机制. e.被缓存的数据以 key ...