css3的一些小方法

上次我们用css3做动画,都是定义动画,其实我们有个简单的方法,就是使用动画库,所谓的动画库就是一个已经写好的css文件,它里面包含了很多做好的动画,我们使用时只要调用就可以了,它的步骤有这几步:

1:先用link引入动画库css文件。

2:给希望要动画的元素设置class(动画名  animated)。

3:动画播放完毕,移除class。

这里要考虑到浏览器的兼容性:

这里用到一个one,它是一次性事件,这样写的话,等于每次执行注册事件都会绑定一次兼容和清除class。这样很占资源,我们我们一般把这句放在最前面,然而放在最前面后不能用one,要改为on。

它起到的效果和上面一个是一样的。

如果我们一个项目用到的动画少的话,引入整个动画库,也有点浪费资源,我们可以截取其中的一段动画,把他放在样式设置里。

有个小功能说下,我们页面中一般都是一些传统的字体,那我们要怎么设置一些特殊的字体呢?有两种方法,我们可以用iconfont(阿里的图标)或者是有字库,但有字库是需要注册,登入才可以使用。使用方法里面都有,很简单。

说个布局的方法把,我们之前都是用定位或者浮动来定位,今天教大家一个新方法,是弹性布局。

1:在父元素中要写display:flex;这是开启弹性布局。

2:如果子元素对其方式都一样,那只要在父元素中设置:

上面的是设置X轴的对其方式,下面是设置Y轴的对其方式,但这不是绝对的。

Flex弹性布局有方向的,它本来就有水平和竖直两种,上面的是默认的水平,然而想要竖直的布局,那我们要在父元素中加一句:flex-direction:column;加了这一句后X轴,Y轴也会改变下。

3:如果想要单独设置每个的对齐方式,那在子元素中设置align-self:;

4:子元素设置的属性,可以设置flex:1;所在的比例,也可以直接设置宽高。

5:子元素之间可以换位置的,使用order:;默认的第一个是0,值越小,越靠前。

6:弹性布局默认是不开启换行的,如果要换行的,是需要开启,需要在父元素中加:

7:弹性布局是可以嵌套使用的,但是每嵌套一层,就要加一个display:flex;

时间: 2024-11-03 21:15:41

css3的一些小方法的相关文章

IE兼容CSS3圆角border-radius的方法

IE兼容CSS3圆角border-radius的方法 优化网站js效果,网上看见一个很简单方便的兼容圆角的方法,记下来. 和大家分享一下,知道的高手就当捧个过场.嘻嘻 1.下载border-radius.htc 2.CSS .radius{ -moz-border-radius: 11px; -webkit-border-radius: 11px; border-radius: 11px; behavior: url(border-radius.htc); } 优点: 一.最为方便让IE实现圆角

让IE浏览器支持CSS3圆角属性的方法

如果要想在IE浏览器中实现圆角的效果,我们一般都会采用圆角图片的方式.用图片的话,基本就跟浏览器没有多大关系了,因为任何浏览器都支持这种方式.今天我们主要是讲解如果用CSS3样式表来实现圆角效果,值得注意的是,IE6/7/8这三个IE浏览器版本都不支持CSS3的解析,只有还不太主流的IE9支持CSS3和HTML5的标准.让IE支持CSS3的解析方法有很多种,(HTML5 Shiv – 让该死的IE系列支持HTML5吧)下面介绍一种实用的让IE支持CSS3解析的方法——IE利用VML矢量可标记语言

IOS 应用 退出的一个小方法

AppDelegate * app=(AppDelegate *)[[UIApplication sharedApplication]delegate]; UIWindow *window = app.window; [UIView animateWithDuration:1.0f animations:^{ window.alpha = 0; window.frame = CGRectMake(window.bounds.size.width/2.0, window.bounds.size.w

提高自信的30个小方法

你自信吗?面对挫折.压力.困惑.障碍时,我们难免会丧失气场,怀疑自己的能力,但没有真正的自信生活就没有底气和光亮.下面是提高自信的30个小方法,说不定对你有帮助哦~ 1.学习是件好事,所以报个学习班充实一下自己并且享受这种主动学习知识的乐趣.你会发现你的头脑越充实,你就越自信!如果你没有时间上夜校,那么每天晚上给自己留半个小时去阅读吧.我会选择阅读那些我从来没有接触到的领域.比如我是个学习理科的,我就会让自己读些管理学,经济学,政治,宗教的书籍.虽然有的时候我并不能理解书中的内容,但就是抱着一种

(转)java中查找List的快捷小方法

相信java开发的程序员,经常会遍历list里的数据,来查找想要的数据.之后选出来在做处理,我这有个小方法在大量数据的情况下能更快捷,当然这方法只对菜鸟有点用,对老鸟来说也许有更好的方法,请指点 遍历list的时候请把list里的每条数据安一个关键字放到map当中去如: for (Map<String, String> subMap : resourceList) {     resourceMap.put(subMap.get("OBJECTNAME"), subMap)

(iOS)开发中收集的小方法

1.颜色转变成图片 - (UIImage *)createImageWithColor:(UIColor *)color {     CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);     UIGraphicsBeginImageContext(rect.size);     CGContextRef context = UIGraphicsGetCurrentContext();     CGContextSetFillColorWithCo

一款html5和css3实现的小机器人走路动画

之前介绍了好多款html5和css3实现的动画,今天要给大家带来一款html5和css3实现的小机器人走路动画.该实例的人物用html5绘画的,动画效果是html5和css3实现的.一起看下效果图. 在线预览   源码下载 实现的代码. html代码: <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www

jQuery提供的小方法

jQuery提供的小方法: 1.选择器 + 事件 + 函数 = 复杂的交互 2.循环处理与选择器匹配的各个元素:each() $("#").each(function(){ $(this).unblind('click'); }); 3.隐藏:hide():显示:show(): 4.向上滑动并消失:slideUp():     slideDown(): slideToggle();为动作指示“如果原来朝上,就向下滑动:如果原来朝下,就向上滑动”: 5.淡出:fadeOut():淡入fa

IOS开发之页面间传值的几种小方法

最正经的页面间传值方式莫过于代理传值,今天写的几种小方法不包括代理传值,因为是自学的原因,现在都不知道这几种方法的优缺点,往知道的朋友指正一下: 第一种:属性传值:(这种方法在故事版无效,适合纯代码编写时使用,为什么???) 前提:比如说有两个视图控制器:AViewController和BViewController,他们之间想从A传值到B, ——>在AViewController.m文件中 (1)导入BViewController #import "BViewController.h&q