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=testimonia.........完整代码请登录后点击上方下载按钮下载查看
网友评论0