css动画样式

1.渐变
线性渐变
background: linear-gradient(red, blue); 默认从上到下可多个颜色
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); 到右透明色渐变
background: linear-gradient(to bottom right, red , blue); 到右下
background: linear-gradient(180deg, red, blue); 角度方向
background: repeating-linear-gradient(red, yellow 10%, green 20%); 重复颜色渐变累加共20%
径向渐变
background: radial-gradient(red, green, blue);
background: radial-gradient(red 5%, green 15%, blue 60%);
background: radial-gradient(circle, red, yellow, green); 园形
background: radial-gradient(60% 55%, closest-side/farthest- corner,blue,green,yellow,black); 尺寸
background: repeating-radial-gradient(red, yellow 10%, green 15%); 重复

<head>
<style>
    .a{
        width: 200px;
        height: 100px;
        background: repeating-linear-gradient(red, yellow 10%, green 20%);
    }
    .b{
        width: 200px;
        height: 100px;
        background: repeating-radial-gradient(circle, red, yellow 10%, green 15%);
    }
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
</body>

2D
transform:rotate(60deg); 转动60度
transform: translate(100px,100px); 移动
transform: scale(2,3); 缩放倍数
transform: skew(20deg,30deg); 倾斜 X:20 Y:30 Y可不写
transform: skewX(20deg); 沿X轴y偏转20度 skewY：沿Y轴
transform:matrix(2,0.5,-0.5,0.866,0,0); x放大，倾斜，倾斜，y放大，x偏移，y偏移

3D
transform: rotateX(120deg);沿着X轴旋转 rotateY

<head>
<style> 
div{
    width:200px;
    height:100px;
    background-color:yellow;
}
    .a{transform:rotate(45deg)}
    .b{transform: translate(150px,0px)}
    .c{transform: scale(0.5,0.5)}
    .d{transform: rotateX(89deg)}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</body>

过渡
transition:width 2s; 宽变动两秒
:hover{width:300px;} 光标宽变成300px
transition: width 2s, height 2s, transform 2s; 宽高转换
:hover{width: 200px; height:200px; transform:rotate(180deg);} 宽变200 高变200 转动180度

动画
animation:myfirst 5s; 执行动画 5秒
@keyframes myfirst{from {background:red;}to {background:yellow;}} 动画：从红变成黄
@keyframes myfirst{0% {background:red;}100% {background:green;}} 动画展示进度百分比对应颜色
@keyframes myfirst{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;}} 进度 {颜色位置}
position:relative; 相对定位（才能移动）
animation:myfirst 5s linear 2s infinite alternate; 执行动画 5秒变动速度开始时间播放次数(无限) 逆向播放(交替)
@keyframes myfirst{0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;}} 进度 {颜色位置}

多列
column-count: 3; 3列
column-gap: 40px; 列间距

<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style> 
    p{
        column-count: 3;
        -webkit-column-count:3; /* Safari and Chrome */
        column-gap: 40px;
        -webkit-column-gap:40px; /* Safari and Chrome */
}
</style>
</head>
<body>
<p>9月10日教师节这天，马云宣布将在一年后不再担任阿里巴巴董事局主席，由现任集团CEO张勇接任。马云将回归他一直以来最热爱的身份——老师。这个决定看似突然，却并不令人意外。就在几天前（9月5日）的2018XIN公益大会教育分论坛上，马云已经透露了今后的打算：“自己最后还是会回到老师这一行，我做老师能得心应手，而且也是性格决定的，我对很多东西充满好奇和想象。”</p>
</body>

弹性（PC 转移动格式不变）
display: flex/inline-flex; 父元素加放大缩小宽度不影响布局
direction: rtl; 爷元素加排列方式父子右到左
flex-direction: row-reverse; 父元素加排列方式子横向反转 column-reverse：纵向反转排列 column：纵向
justify-content: flex-start/center/flex-end/space-between/space-around; 左中右隔开包裹水平父加
align-items:flex-start/center/flex-end；上中下整体放置父加
flex-wrap: nowrap/wrap/wrap-reverse; 单行多行多行反转子加
order: -1; 顺序小在前子元素块加

猜你喜欢