css动画海报 |css 链接滑动效果 透明度

//设置动画关键帧
@keyframes move {
0% {
transform: translateY(-10px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
}
//应用动画到元素上
.poster {
animation: move 2s ease infinite;
}
//添加其他样式
.poster {
width: 300px;
height: 400px;
background: url("poster.jpg");
background-size: cover;
position: relative;
animation: move 2s ease infinite;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 30px;
color: white;
text-shadow: 1px 1px 1px black;
}
.button {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
padding: 10px 30px;
background: white;
border-radius: 20px;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 2px;
color: #ff7f50;
}
.button:hover {
background: #ff7f50;
color: white;
}

以上是一个简单的CSS动画海报制作的过程。关键在于设置动画关键帧，通过transform属性对元素进行移动，使用animation属性将动画应用到元素上，还需加入其他样式来让海报更加酷炫。