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动画海报。