css 花式最小的旋转木马
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css 花式最小的旋转木马相关的知识,希望对你有一定的参考价值。
/* Carousel custom styling */
.okeReviews.okeReviews--theme {
overflow: hidden
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel {
padding-top: 0
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-slider-slide {
transition: transform .5s;
transform: scale(0.9);
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-slider-slide:not(.is-selected) {
opacity: 0.5;
transform: scale(0.8)
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-header,
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-reviewer-avatar,
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-content-heading,
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-product-image,
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-reviewer-date,
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel .okeReviews-flag {
display: none;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-slider-slide-inner {
max-width: none;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-slider-slide {
padding: 0;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-slider {
padding: 0 27px;
text-align: left;
}
.okeReviews.okeReviews--theme .flickity-prev-next-button {
visibility: hidden;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-reviewer-name {
color: #2d2824;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-content-body {
opacity: 1;
font-size: 1.5em;
line-height: 1.5;
font-weight: 300;
line-height: 2;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-content {
margin-bottom: 0.5em;
display: flex;
flex-direction: column-reverse;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review:before {
content: '';
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' focusable='false' role='presentation' class='icon icon-quote' viewBox='0 0 38 32'%3E%3Cpath fill='%23100D9F' fill-rule='evenodd' stroke='%23E2C8C5' stroke-width='1.222' d='M10 16.608h5.4V31H1V20.109C1 8.212 5.8 1.843 15.4 1v5.397c-3.6 1.005-5.4 3.89-5.4 8.655v1.556zm21.6 0H37V31H22.6V20.109C22.6 8.212 27.4 1.843 37 1v5.397c-3.6 1.005-5.4 3.89-5.4 8.655v1.556z'%3E%3C/path%3E%3C/svg%3E");
width: 30px;
height: 27px;
display: inline-block;
background-repeat: no-repeat;
margin-bottom: 15px;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-content-rating:before {
content: '';
width: 2px;
margin-top: 10px;
margin-bottom: 10px;
border-right: 1px solid #100D9F;
display: block;
height: 40px;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-product {
order: 1;
margin: 5px 0 0 0;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-product-name {
margin-bottom: 5px;
}
.okeReviews.okeReviews--theme .okeReviews-reviewsCarousel-review-product-name:hover:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-large .okeReviews-reviewsCarousel-review,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-medium .okeReviews-reviewsCarousel-review {
display: flex;
flex-direction: column;
align-items: center;
}
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-large.okeReviews-reviewsCarousel,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-medium.okeReviews-reviewsCarousel {
margin: 0 -25%;
}
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-large .okeReviews-reviewsCarousel-slider,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-medium .okeReviews-reviewsCarousel-slider {
padding: 0 44px;
text-align: center;
}
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-large .okeReviews-reviewsCarousel-review-content-rating:before,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-medium .okeReviews-reviewsCarousel-review-content-rating:before {
height: 50px;
margin-top: 20px;
margin-bottom: 20px;
}
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-large .okeReviews-reviewsCarousel-review:before,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-medium .okeReviews-reviewsCarousel-review:before {
margin-bottom: 20px;
}
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-large .okeReviews-reviewsCarousel-review-content-rating:before,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-large .okeReviews-reviewsCarousel-review-product-name:after,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-medium .okeReviews-reviewsCarousel-review-content-rating:before,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-medium .okeReviews-reviewsCarousel-review-product-name:after {
margin-left: auto;
margin-right: auto;
}
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-large .okeReviews-reviewsCarousel-review-content-body,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-medium .okeReviews-reviewsCarousel-review-content-body {
font-style: normal;
}
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-large .okeReviews-reviewsCarousel-review-product-name,
.okeReviews.okeReviews--theme .is-okeReviews-reviewsCarousel-medium .okeReviews-reviewsCarousel-review-product-name {
margin-bottom: 0;
}
/* End carousel custom styling */
以上是关于css 花式最小的旋转木马的主要内容,如果未能解决你的问题,请参考以下文章