首页 > 程序开发 > web前端 > HTML/CSS >

css3学习笔记

2017-08-23

css3学习笔记。transition是过度效果,一般是和hover一起用,transition的属性有height,width常用属性,在hover里面就是会覆盖原来的属性,属性由逗号间隔,各个属性之间没有先后关系,-webkit-transition: width 2s ease-in,height 2s, -webkit-transition。

1,transition是过度效果,一般是和hover一起用,transition的属性有height,width常用属性,在hover里面就是会覆盖原来的属性,属性由逗号间隔,各个属性之间没有先后关系,-webkit-transition: width 2s ease-in,height 2s, -webkit-transition: 2s width ease-in,height 2s, 都是正确的,有一点需要注意的是,延迟发生,width 1s 20s 延迟的20s会在过度时间的后面。

example1 {
            position: absolute;
            bottom: 10px;
            margin:auto;
            background-color: #00B83F;
            height: 200px;
            width: 200px;
            overflow: hidden;
            -webkit-transition: width 2s ease-in,height 2s,-webkit-transform 2s;      }
    example1:hover {
        width: 300px;
        height: 300px;
        -webkit-transform: rotate(180deg);
    }```

2,tranform:translate(X,Y), 让元素偏离原来位置。单位默认是像素。
transform:scale(X,Y) 让元素变为原来的多少倍。

div:hover {animation: 1s rainbow 3;} 要用@keyframe 定义一个动画名称,就是一个函数。

这些都是css3的属性,transform还可以当作一个函数用在transition里面。

定义动画的函数里面可以有位置的改变。

 0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}

动画和transiton交叉使用,在动画的大背景之下,在动画的各个时间点设置transform ,在基元素上面设置transition,只要动画变化过程中有属性和基元素不一致,都会触发到transition。

div
{
    width:100px;
    height:100px;
    background:red;
    position:relative;
    animation:myfirst 5s;
    -webkit-animation:myfirst 5s; /* Safari and Chrome */
    -webkit-transition : width 2s ,-webkit-transform 2s
}


@keyframes myfirst
{
    0%   {background:red; left:0px; top:0px;}
    25%  {background:yellow; left:200px; top:0px; -webkit-transform :rotate(192deg);width : 200px}
    50%  {background:blue; left:200px; top:200px;}
    75%  {background:green; left:0px; top:200px;}
    100% {background:red; left:0px; top:0px;}
}

动画属性里面,alternate infinite alternate 要在infinite使用的前提下才生效。

3,column-count 是指定元素被分割的列数,带有rule的,是指两列之间边框的样式,可以用一个column-rule :px(多宽) solid(之间的样式) #FFFF(颜色) 。column-gap是两列之间的距离。-span 指出元素可以跨多列,不够位置就换行显示。

4,响应式布局 @media only screen and (max-width :800px) 在屏幕小于800px的时候启动另外一种布局。(这里的screen可以是print等其他设备,only | not)
固定盒子的大小,无论怎么改变边距都不影响 box-sizing: border-box; 宽度还是50%而不是50%+*px 会并行显示。

5 对象选择器 {box-shadow:[投影方式] X轴偏移量 Y轴偏移量阴影模糊半径 阴影扩展半径 阴影颜色}

6,

使用于移动端,不适用的话,默认移动端的浏览器的宽度会大于浏览器的宽度。
相关文章
最新文章
热点推荐