css实现名人名言卡片轮换左右切换效果代码
代码语言:html
所属分类:幻灯片
代码描述:css实现名人名言卡片轮换左右切换效果代码,底部有指示圆点,左右点击可切换名人名言。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @charset "UTF-8"; body { margin: 0; font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif; } * { box-sizing: border-box; } .main { display: flex; align-items: center; justify-content: center; background-color: #efefef; overflow: hidden; height: 100vh; width: 100vw; } .testimonials { background-color: #ffffff; width: 100%; max-width: 740px; margin: 20px; box-shadow: 0 6px 5px -7px #cbcbcb; border-radius: 3px; position: relative; opacity: 0; animation: showTestimonials 0.32s 0.78s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards; } .testimonials input { display: none; visibility: hidden; height: 0; width: 0; pointer-events: none; opacity: 0; } @keyframes showTestimonials { to { opacity: 1; } } .testimonials-inner { position: relative; min-height: 100px; } .testimonial { padding: 40px 34px 20px 34px; margin: 0 30px; pointer-events: none; position: relative; z-index: 1; } input[name=testimonial]:nth-child(1):checked ~ .testimonials-inner .testimonial:nth-child(1), input[name=testimonial]:nth-child(2):checked ~ .testimonials-inner .testimonial:nth-child(2), input[name=testimonial]:nth-child(3):checked ~ .testimonials-inner .testimonial:nth-child(3), input[name=testimonial]:nth-child(4):checked ~ .testimonials-inner .testimonial:nth-child(4) { pointer-events: initial; } .testimonial { transition: 0.72s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.32s 0.12s; opacity: 0; transform: translate(0, 38px); max-height: 80px; animation: hideTestimonial 0s 0.52s forwards; position: relative; } input[name=testimonial]:nth-child(1):checked ~ .testimonials-inner .testimonial:nth-child(1), input[name=testimonial]:nth-child(2):checked ~ .testimonials-inner .testimonial:nth-child(2), input[name=testimonial]:nth-child(3):checked ~ .testimonials-inner .testimonial:nth-child(3), input[name=testimonial]:nth-child(4):checked ~ .testimonials-inner .testimonial:nth-child(4) { animation: showTestimonial 0s 0.72s forwards; position: absolute; opacity: 1; transform: none; max-height: 500px; transition: 0.3s 0.52s, opacity 0.68s 0.92s, max-height 0.82s 0.72s; } @keyframes hideTestimonial { to { position: absolute; } } @keyframes showTestimonial { to { position: relative; } } input[name=testimonial]:nth-child(1):checked ~ .testimonials-bullets label:nth-child(1) span, input[name=testimonial]:nth-child(2):checked ~ .testimonials-bullets label:nth-child(2) span, input[name=testimonial]:nth-child(3):checked ~ .testimonials-bullets label:nth-child(3) span, input[name=testimonial]:nth-child(4):checked ~ .testimonials-bullets label:nth-child(4) span { background-color: rgba(245, 34, 34, 0.836); transform: scale(1); transition: transform 0.36s cubic-bezier(0.26, -0.59, 0.43, 2.48), background-color 0.41s ease-in; } .testimonial-photo { height: 84px; width: 84px; position: absolute; top: -32px; left: 0; right: 0; margin: 0 auto; } .photo-background { background-color: #ffffff; position: absolute; top: 0; left: 0; border-radius: 50%; height: 100%; box-shadow: 0 -4px 3px -2px #c3c2c2; width: 100%; transform: scale(0.87); transition: 0.32s; } input[name=testimonial]:nth-child(1):checked ~ .testimonials-inner .testimonial:nth-child(1) .photo-background, input[name=testimonial]:nth-child(2):checked ~ .testimonials-inner .testimonial:nth-child(2) .photo-background, input[name=testimonial]:nth-child(3):checked ~ .testimonials-inner .testimonial:nth-child(3) .photo-background, input[name=testimonial]:nth-child(4):checked ~ .testimonials-inner .testimonial:nth-child(4) .photo-background { transform: scale(1); transition: 0s; } .photo-author { background-size: 68px; background-position: center; height: 0; width: 0; border-radius: 50%; background-color: #dbdbdb; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; opacity: 0; transform: scale(1.18) translate(0, -6px); transition: transform 0.42s ease-out, opacity 0.58s, width 0s 0.6s, height 0s 0.6s; } input[name=testimonial]:nth-child(1):checked ~ .testimonials-inner .testimonial:nth-child(1) .photo-author, input[name=testimonial]:nth-child(2):checked ~ .testimonials-inner .testimonial:nth-child(2) .photo-author, input[name=testimonial]:nth-child(3):checked ~ .testimonials-inner .testimonial:nth-child(3) .photo-author, input[name=testimonial]:nth-child(4):checked ~ .testimonials-inner .testimonial:nth-child(4) .photo-author { transform: scale(1); opacity: 1; height: 68px; width: 68px; transition: width 0.26s 1.01s, height 0.26s 1.01s; } .testimonial-text { color: #606060; font-size: 20px; text-align: center; text-shadow: 0 0 1px #939393; letter-spacing: 0.12px; font-style: italic; line-height: 26px; } .testimonial-text p { margin-bottom: 10px; } .testimonial-author { font-size: 15px; text-align: right; color: #bdbdbd; letter-spacing: 0.24px; text-transform: uppercase; text-shadow: 0 0 1px #e3e3e3; } .testimonial-author:before { content: "– "; } .testimonials-bullets { display: flex; justify-content: center; width: 100%; height: 30px; transform: translate(0, 8px); } .testimonials-bullets .bullet { height: 30px; width: 30px; cursor: pointer; margin: 0 1px; } .testimonials-bullets .bullet div { display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; border-radius: 50%; background-color: #ffffff; box-shadow: 0 4px 6px -7px #000000; } .testimonials-bullets .bullet div span { background-color: #c3c3c3; height: 14px; width: 14px; border-radius: 50%; transform: scale(0.82); transition: 0.72s; } .testimonials-bullets .bullet:hover span { background-color: rgba(216, 118, 118, 0.836); } .testimonials-arrows { height: 100%; } .testimonials-arrows .arrow { display: flex; align-items: center; justify-content: center; height: 50px; width: 50px; position: absolute; top: calc(50% - 25px); } .testimonials-arrows .arrow span { display: flex; align-items: center; justify-content: center; background-color: #ffffff; border-radius: 50%; height: 40px; width: 40px; } .testimonials-arrows .arrow span:before { font-size: 32px; font-family: monospace, sans-serif; font-weight: 600; color: #c3c3c3; transition: color 0.21s ease-in; } .testimonials-arrows .arrow:hover span:before { color: #444444; transition: color 0.17s ease-out; } .testimonials-arrows .arrow label { position: absolute; left: 0; top: 0; height: 100%; width: 100%; cursor: pointer; } .testimonials-arrows .arrow-left { left: -20px; } .testimonials-arrows .arrow-left .........完整代码请登录后点击上方下载按钮下载查看
网友评论0