CSS 设计对象元素鼠标悬停动画

对象元素

[input] [button] [div] …

样式设计

input 按钮元素

默认状态

input[type=button] { /*默认状态样式*/
  cursor: pointer;
  border: none;
  outline: none;
  border-radius: 3px;
  background: #007bff8f;
  transition: transform .3s ease-in-out;
}

悬停动画

input[type=button]:hover { /*悬停样式*/
  background-color: #007bffdb;
  transform: translateY(-5px);
  transition: transform .3s ease-in-out;
}

div 隔层元素

默认状态

div.passwordText { /*默认状态样式*/
    font-family: Consolas, "Microsoft YaHei", Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 24px;
    text-align: center;
    border: 1px solid #607d8b;
    border-radius: 3px;
    width: 100%;
    height: 50px;
    padding: 5px;
    overflow: overlay;
    transition: transform .3s ease-in-out;
}

悬停动画

div.passwordText:hover { /*悬停样式*/
    font-family: Consolas, "Microsoft YaHei", Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
    font-size: 24px;
    text-align: center;
    border: 1px solid #03a9f4;
    border-radius: 3px;
    width: 100%;
    height: 50px;
    padding: 5px;
    overflow: overlay;
    color: #007bff8f;
    cursor: pointer;
    transform: translateY(-5px);
    transition: transform .3s ease-in-out;
}

动画逻辑

关键代码

transform: translateY(-5px);
transition: transform .3s ease-in-out;

代码过程

transform: translateY(-5px); //响应悬停和悬停恢复默认过程的元素偏移位置和偏移量；

transition: transform .3s ease-in-out; //响应悬停和悬停恢复默认过程的动画样式和时间以及路径；