【海北做网站】下面是一些CSS技巧修改您的网站列表悬停等特效

【海北做网站】下面是一些CSS技巧修改您的网站列表悬停等特效

可以帮助您自定义可解释主题用户界面。每个示例都具有实现此效果所需的预览和自定义CSS块。一如既往，我们建议您通过儿童主题或ePanel中的自定义CSS框。

最小界面造型

下面的CSS将为您的列表模式和悬停状态提供一个更简约的外观。

#et-slider-wrapper, .location-description, .et-place-text-wrapper {

background: none;

}

#et-slider-wrapper {

background-color: #fff;

}

.et-place-content, .et-map-postmeta, .location-title, .location-title h2 {

border:none;

}

.et-date, .et-map-postmeta {

text-shadow:none;

}

#et-slider-wrapper:after, #et-slider-wrapper:before {

display: none;

}

.et-map-post .viewport {

width: auto;

}

.et-place-content {

padding: 40px;

}

.et-place-main-text {

padding-left: 0;

}

.et-map-post .scrollbar, .more {

margin-right: -25px;

}

.thumbnail:before, .et-date, .location-rating {

border:none !important;

-webkit-box-shadow: inset 0 0 0 !important;

-moz-box-shadow: inset 0 0 0 !important;

box-shadow: inset 0 0 0 !important;

}

拆卸落盖

默认情况下，列表描述以滴头开始。下面的CSS将删除此样式，描述的第一个字母将显示为文本的其余部分。

.viewport .overview > p:nth-of-type(1):first-letter {

display: inline;

float: none;

font-size: 14px;

margin-right: 0;

margin-top: 0;

}

缩略图

下面的CSS将修改您的列表缩略图，使其在悬停时淡入黑暗，并在光标悬停时使用反向动画。

.thumbnail {

background-color: #000;

}

.thumbnail img {

-moz-transition: all 0.3s;

-webkit-transition: all 0.3s;

transition: all 0.3s;

}

.thumbnail:hover img {

opacity:.6;

}

圆角

下面的CSS将为您的列表模式、列表悬停状态和列表POST页面添加圆角。

.et-place-content, .location-rating, .sub-menu {

-webkit-border-bottom-right-radius: 10px;

-webkit-border-bottom-left-radius: 10px;

-moz-border-radius-bottomright: 10px;

-moz-border-radius-bottomleft: 10px;

border-bottom-right-radius: 10px;

border-bottom-left-radius: 10px;

}

#et-slider-wrapper:before, .thumbnail:before, .thumbnail img, .location-title, #breadcrumbs {

-webkit-border-top-right-radius: 10px;

-webkit-border-top-left-radius: 10px;

-moz-border-radius-topright: 10px;

-moz-border-radius-topleft: 10px;

border-top-right-radius: 10px;

border-top-left-radius: 10px;

}

#content:before{

-webkit-border-bottom-right-radius: 12px;

-moz-border-radius-bottomright: 12px;

border-bottom-right-radius: 12px;

}

#et-slider-wrapper, .et_marker_info, #main-area .container, #content, .location-description {

-webkit-border-radius: 12px;

-moz-border-radius: 12px;

border-radius: 12px;

}

#main-area .et-map-post img, #main-area .et-map-post .thumbnail {

-webkit-border-radius: 0;

-moz-border-radius: 0;

border-radius: 0;

}

#et-slider-wrapper:after {

display: none;

}

上市标牌

下面的CSS将在你的列表标题后面添加一个半透明的黑色横幅。

.et-description {

background-color: rgba(0,0,0,.3);

padding:20px 0;

margin-top: -20px;

}