-
transform-rotate查看全部
-
transform-translate查看全部
-
transform以及transition查看全部
-
结构与用法查看全部
-
第一章 1、HTML5标签： figure 规定独立流内容（图片、代码等） figcaption figure元素标题 2、CSS3内容： transform: translate ------ 平移 translate(x,y) rotate ----------- 旋转 rotate(90deg) 正值顺时针 transform-origion:0 0 ; 旋转点，默认center scale ------------缩放 scale(0.5,0.5) scale(x,y) skew --------------- 斜切扭曲 skew(50deg,20deg) skew(x,y) 3、CSS3内容： transition: property ------------- 检索或设置对象中的参与过渡的属性: all transform 等 duration：过渡动画的持续时间 timing-function:检索或设置对象中过渡的动画类型（Linear，ease,ease-in,ease-out,ease-in-out） delay:检索或设置对象中延迟过渡的时间 4、媒体查询： @media screen and (width:800px){....} @import url(example.css) screen and (width:800px); <link media="screen and (width:800px)" rel="stylesheet" href="example.css" />查看全部
-
(小技巧) 如果我们想让一个元素不可见,那么我们可以来设置透明度: 如: opacity:0; 那么此时这个元素就是不可见的了查看全部
-
注意:当使用transform来写动画的时候,如果同时需要两个动画效果,那么此时只需要一个空格就可以的,不需要在重写一个transform: 如: transform:translate(0px,0px) rotete(360deg);查看全部
-
img{opacity:0.8} 使用opacity可以用来设置透明度查看全部
-
@media screen and (min-width:1001px){figure{width:33%}} 其中的min-width:1001px表示当宽度最小为1001px,也就是大于1001px的时候 @media screen and (min-width:601px) and (max-width:1000px){figure{width:49%}} 大于601px 小于100px 的时候 @media screen and (max-width:600px){figure{width:100%;}} 小于600px的时候查看全部
-
一定要注意:transform是和translate(),skew()等函数来使用的, h2:hover{ transition:all 2s ease-in-out; background:#F00; transform:translate(100px,100px); }查看全部
-
小技巧: 我们在使用transition的时候,由于第一个参数是我们要为那个属性设置动画,如果一个一个来设置会比较麻烦,此时我们就可以使用transition:all 2s....这种方式来实现,使用all, 那么我们在后面要为哪个属性添加动画,直接取去写就好了查看全部
-
代码讲解: transition:transform 2s ease-in-out; transform:translate(100px,100px); 其中transition是要为那个属性设置动画,这里的对象是transform(改变的属性),时间是2s,方式是ease-in-out,而transform的效果是translate位移,所以总结来说就是实现2s中的位移的ease-in-out的动画效果查看全部
-
skew():如果有两个参数,只会执行后面的一个参数的效果查看全部
-
注意: transform-origin的设置不止对rotate属性有效果,对于其他的属性也是有作用的查看全部
-
有的时候我们使用旋转属性的时候,其中我们需要去改变原点的位置,那么此时我们就可以使用transfrom-origin属性: 如: transform-origin:0 0;以上就是将原点设置在了左上角那个点查看全部
举报
0/150
提交
取消