css3总结

之前对技术方面没有过多的总结,今天第一篇博客对css3做了以下总结:

首先css3比较强大的就是动画了,css3动画分为两种:tranation 和 animation;

这两种有什么区别呢??

tranation的动画需要事件触发 animation的动画不许要事件触发就运动 ,tranation 必须放在初始状态;

-webkit-transform:rotate(360deg) scale(1.2) skew(xdeg,ydeg)注意:参数为两位数的小数,正数为放大,小数为缩小,两个参数的时侯表示width 和 height  translate(xpx ypx) 位移。skew(xdeg,ydeg)斜切。

@-webkit-keyframes mymove{ //注意 mymove 是动画名称
form{
} to{
}
}

-webkit-animation:name(动画名称) 1s(动画运行时间)   timing-function(运行方式);

再次说简单说下盒子模型:

display:-webkit-box;
-webkit-box-pack : start(左)end(右) justify(平均分布) center(中)
-webkit-box-align : start(左)end(右) center(中)stretch(拉伸子元素以填充包含块)
-webkit-box-orient:horizontal(水平)vertical(垂直) //注意:以上三个属性都是作用在子元素上的 建议子元素为块元素

-webkit-box-flex:1;元素向父盒子陈开 2是1的两倍 作用在子元素上
-webkit-box-direction: normal/reverse/inherit //reverse反方向显示子元素 inherit子元素继承父元素

display:inline-block; 行内块元素

box-ordinal-group: integer; integer是数值表示子元素的显示次序

时间: 2024-10-18 01:53:45

css3总结的相关文章

css,css3盒子水平垂直居中

垂直居中在面试中经常见到的题目.总结几种,希望大家多多指教. ....<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative;   //父集相对定位 } .box1{ width:50px; height:50px; border:1px solid #000; } </style><body> <div class="box"> &

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi

html+css3实现长方体效果

网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html+css3实现长方体效果<

HTML5 CSS3 诱人的实例: 3D立方体旋转动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的样例,感觉非常不错,只是实在想不出来实际的用处.可是效果非常炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景.即面上的小格格 3. @-webki

CSS3略谈(中二)

一.3D转换:三维变换使用基于二维变换的相同属性,可以让我们基于三个坐标方向对元素进行变换.和二维变形一样,三维变形可以使用transform属性来设置 1. 3D移动 l   方法:translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length),translateY(length), translateZ(length) l   示例: div:hover{ /*Y轴移动+100px*/ /*transform:translateY(10

CSS3的新特性 行内盒子before和after

CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style type="text/css"> 7 /*在DIV1盒子内部前面*/ 8 #div1:before{ 9 width: 100p

CSS3选择器

我不知道是否有其他人能看见我写的内容,由于我是一个渣渣,很多内容都不知道,所以将这些很简单的东西都记录下来,希望不小心点进来的大神们,能吐槽一下我,呃指点一下我.和我一样的小白们希望能相互学习,谢谢了. 选择器的使用 通过选择器的使用,可以不再需要在编辑任何多余的无语义的class属性. 属性选择器: 在使用属性选择器时,需要声明属性和属性值. 声明方法:[att=val],其中att代表属性,val代表属性值. E[att=val]:前面的E表示在何种标签如:div[id=momo],a[he

CSS3特性修改(自定义)浏览器默认滚动条

前言:我们做前端时,会遇到一些需求,要求把默认浏览器的滚动条样式给改写了,诶.好好的改它干啥了,也带不来用户体验,就是好看点嘛!实现原理其实是用了伪元素,webkit的伪元素实现很强,可以把滚动条当成一个页面元素来定义,再结合一些CSS3属性,比如圆角.渐变.rgba等等.最常见的伪元素,我们最熟悉的元素之前和元素之后(::before/::after)[伪类(:hover/:link)].这里写了一个Demo,来看看... 一.HTML <div class="banner_box&qu

css3加载ing动画

项目中ajax交互成功前总会需要给用户提醒,比如请稍候.正在加载中等等,那个等待的动图以前项目中用的是gif,在移动端画质很渣,有毛边,于是在新项目中用css3展示加载中的动画效果. function tipLoading(type,top,left){ if($("arrorbox"))$('#arrorbox').remove(); var dataType=[ '<div class="sk-circle"><div class="