淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3动画海报是一种很酷的设计元素,可以为网站和博客增添生动和动态感。要制作CSS3动画海报,必须熟悉CSS3中的动画属性和选择器。

/*创建CSS3动画海报*/
#poster {
width: 400px;
height: 600px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 20px #000;
position: relative;
overflow: hidden;
}
/*添加影片照片*/
#poster img {
position: absolute;
top: 80px;
left: 50%;
transform: translate(-50%);
z-index: 1;
box-shadow: 0 0 20px #000;
}
/*添加文本信息*/
#poster h2, #poster p, #poster button {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 2;
color: #fff;
text-shadow: 0 0 10px #000;
}
/*添加动画效果*/
#poster:hover img {
transform: scale(1.1);
filter: blur(5px);
transition: all 0.5s ease-in-out;
}
#poster:hover h2 {
animation: slideUp 1s ease;
}
#poster:hover p {
animation: slidetop 1s ease;
}
#poster:hover button {
animation: fadeIn 1s ease;
}
/*文本动画*/
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes slidetop {
from {
opacity: 0;
transform: translateY(50%);
}
to {
opacity: 1;
transform: translateY(0%);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

通过以上样式,我们创建了一个宽度为400px、高度为600px的CSS3动画海报,其中包含一张影片照片和文本信息。当鼠标悬停在海报上时,图片将会放大并模糊,同时文本会有动画效果。

CSS3动画海报是一个很酷的设计元素,可以用来吸引网站访问者的注意力。通过细心的设计和一些CSS3技巧,我们可以轻松地制作出各种各样的CSS3动画海报。