1.
text-align: justify; // 段落两端对齐
transform: scale(0.5); // 放大/缩小倍数
opacity: 0.5; // 透明度
animation-timing-function: linear; // 匀速运动
animation-timing-function: ease-out; // 先快后慢
animation-timing-function: ease-in; // 先慢后快
ursor:pointer; // 鼠标变手状
transition:all 1.5s; // 时间
2. 使用CSS animation更改按钮的悬停状态
<button>Register</button>
css:
button { border-radius: 5px; color: white; background-color: #0F5897; padding: 5px 10px 8px 10px;
background: linear-gradient(35deg,#ccffff,#ffcccc); // 背景渐变
animation-iteration-count: infinite; // 动画连续运行
animation-iteration-count: 3; // 动画运行 3 次
}
button:hover {
animation-name: background-color; // name
animation-duration: 2000ms; // 过程持续 2 秒
animation-fill-mode:forwards; // 鼠标移上去突出效果
}
@keyframes background-color{ // name
100%{
background-color: #4791d0;
}
}
@keyframes rainbow {
0% {
background-color: blue;
top: 0px;
left:0px;
}
50% {
background-color: green;
top: 50px;
left:25px;
}
100% {
background-color: yellow;
top: 0px;
left:-25px;
}
}