简洁的图片文字标题幻灯片轮播图效果代码
代码语言:html
所属分类:幻灯片
代码描述:简洁的图片文字标题幻灯片轮播图效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap"); * { box-sizing: border-box; } html { width: 100%; margin: 0; padding: 0; height: 100%; } body { font-family: "Montserrat", sans-serif; margin: 0; width: 100%; height: 100vh; background-image: linear-gradient(45deg, #ffa600 14.7%, #ff6361 73%); background-size: 200% 200%; -webkit-animation: gradient 15s ease infinite; animation: gradient 15s ease infinite; display: flex; justify-content: center; align-items: center; flex-direction: column; padding: 32px; } @-webkit-keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes gradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } h1 { margin: 0; font-weight: bold; font-size: 24px; line-height: 32px; color: #26384E; transform: translateY(20px); transition: all 0.4s ease; transition-delay: 0.2s; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; } @media screen and (max-width: 520px) { h1 { font-size: 16px; line-height: 24px; } } p { font-size: 16px; line-height: 24px; color: #889DB8; transform: translateY(20px); transition: all 0.4s ease; transition-delay: 0.3s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } @media screen and (max-width: 520px) { p { font-size: 14px; line-height: 20px; } } .swiper-wrapper { width: 100%; height: 100%; display: flex; align-items: center; z-index: 1; position: relative; } .swiper-container { background: linear-gradient(270deg, #f7f9ff 0%, #f2f6ff 100%); box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; width: 100%; position: relative; max-width: 420px; height: 100%; max-height: 420px; border-radius: 10px; } .slider-image-wrapper { height: 200px; width: 100%; overflow: hidden; } .slider-item { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; flex-shrink: 0; opacity: 0; background: linear-gradient(270deg, #f7f9ff 0%, #f2f6ff 100%); cursor: -webkit-grab; cursor: grab; } .slider-item-content { padding: 32px; display: flex; flex-direction: column; justify-content: center; transition: 0.4s; } .slider-item-content > * { opacity: 0; transform: translateY(20px); } .swiper-slide-active .slider-item-content > * { transform: translateY(0px); opacity: 1; } .slider-image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: 0.2s; } .swiper-pagination { position: absolute; left: 50%; bottom: 8px; transform: translatex(-50%); z-index: 1; width: auto !important; } .swiper-pagination-bullet { border-radius: 0; width: 8px; height: 8px; border-radius: 50%; line-height: 30px; font-size: 12px; opacity: 1; background: rgba(255, 185, 0, 0.3); display: inline-block; margin-right: 8px; cursor: pointer; transition: all 0.2s; } .swiper-pagination-bullet-active { background: #FFB200; width: 20px; border-radius: 10px; } .slider-buttons { position: absolute; display: flex; top: 100%; justify-content: flex-end; width: 100%; padding-top: 8px; } .swiper-button-next, .swiper-button-prev { background-color: transparent; border: none; cursor: pointer; outline: none; color: #fff; position: relative; margin-left: 4px; } .swiper-button-next:before, .swiper-button-prev:before { content: ""; position: absolute; background-c.........完整代码请登录后点击上方下载按钮下载查看
网友评论0