首页列表放大效果
.post-item {
display: flex;
padding: 20px;
background-color: #fff;
border-bottom: 1px solid #f5f6f700;
transition: 0.3s;
align-items: stretch;
position: relative;
border-radius: 20px;
margin-right: 8px;
margin-left: 8px;
margin-top: 5px;
padding: 6px;
transition: All 0.3s ease-in-out;
-webkit-transition: All 0.3s ease-in-out;
-moz-transition: All 0.3s ease-in-out;
-o-transition: All 0.3s ease-in-out;
}
.post-item:hover {
background: #edededba;
transform: scale(1.1);
-webkit-transform: scale(1.01);
-moz-transform: scale(1.01);
-o-transform: scale(1.01);
-ms-transform: scale(1.01);
box-shadow:2px 2px 2px gray;
}
手机版底部备案信息居中展示
@media screen and (max-width: 800px) {
.core-footer {
text-align: center;
}
.core-footer .footer-main .icp-warp {
display: block;
text-align: center;
}
.core-footer .footer-main .icp-warp>div {
display: block;
}
}
文章页相关推荐 文字列表展示时竖向排列 使用图文时不推荐
.related-articles .related-articles-list {
display: block;
}
底部左侧小工具
.core-footer .footer-main .footer-left {
gap: 0px;
}
logo 扫光特效
.home-img {
position:relative;
float:left;
margin-right:10px;
padding:5px 0;
overflow: hidden;
}
.home-img a:before{
content:"";
position: absolute;
left: -300px;
width: 250px;
height: 10px;
background-color: rgba(255,255,255,.5);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
-webkit-animation: searchLights 2s ease-in 2s infinite;
-o-animation: searchLights 2s ease-in 2s infinite;
animation: searchLights 2s ease-in 2s infinite;}
@-webkit-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-o-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@-moz-keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
@keyframes searchLights {
0% { left: -100px; top: 0; }
to { left: 120px; top: 100px; }
}
首页列表图片放大效果
.post-left img {
transition: All 0.3s ease-in-out;
-webkit-transition: All 0.3s ease-in-out;
-moz-transition: All 0.3s ease-in-out;
-o-transition: All 0.3s ease-in-out;
}
.post-left img:hover {
transform: scale(1.05);
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
box-shadow:2px 2px 2px gray;
}
菜单放大优化
.header-menu-warp>div>a:hover {
transform: scale(1.15);
-webkit-transform: scale(1.15);
-moz-transform: scale(1.15);
-o-transform: scale(1.15);
-ms-transform: scale(1.15);
}
© 版权声明
非商业转载或引用请标注本文链接,商业转载或引用请联系站长
部分文章内容可能来自互联网,如有侵权,请通过邮件联系
部分文章内容可能来自互联网,如有侵权,请通过邮件联系
THE END
- 最新
- 最热
只看作者