html css3 动画效果记录 方案一 transition ：hover ,方案二 animation 有点帅，记录一下

目录

​​效果​​

​​css鼠标悬浮事件 ：hover​​

​​方案一 transition 设置前 后样式 ​​

​​介绍​​

​​代码​​

​​方案二    animation  定义 设置​​

​​介绍​​

​​代码​​

效果

平滑的出现效果效果执行时间0.9s秒

css鼠标悬浮事件 ：hover

.systemInfoTop div:hover {

    /* animation: ss 0.9s; */

   height:260px;

    margin-top:-30px;

  

}

方案一 transition 设置前 后样式 

介绍

鼠标移入 执行效果 ，执行前对div 做transition 做效果的设置时间

使用 :hover 进行添加鼠标悬浮事件

代码

.systemInfoTop div {
    width: 250px;
    float: left;
    margin-left: 16px;
    background: #fff;
    height: 200px;
    box-shadow: 3px 2px 10px #888888;
    border-radius: 10px;
    cursor: pointer;
    padding: 20px 0 0 20px;
    color: #3D2E87;
    transition:height 0.9s;
    transition:margin-top 0.9s;
    /* animation: ss 0.9s; */
}

.systemInfoTop div:hover {
    /* animation: ss 0.9s; */
   height:260px;
    margin-top:-30px;
  
}

方案二    animation  定义 设置

介绍

要做效果的div 元素{
     animation  ss方法  设置一个方法，然后对方法 操作
}
@keyframes  ss方法 {
  from 原来样式
}
to{
新样式
}

代码

.systemInfoTop div {
    width: 250px;
    float: left;
    margin-left: 16px;
    background: #fff;
    height: 200px;
    box-shadow: 3px 2px 10px #888888;
    border-radius: 10px;
    cursor: pointer;
    padding: 20px 0 0 20px;
    color: #3D2E87;
     

    /*定义ss css 方法  执行 0.9秒*/
 animation: ss 0.9s; 
}

@keyframes ss {
    from {/*执行前效果*/
        height: 200px;
        margin-top: 0px;
    }
    to {/*执行后效果*/
        height: 260px;
        margin-top: -30px;
    }
}

ok

持续更新