BIJIV

Typecho添加文章头图圆角显示、获取焦点放大、头像转动特效
文章头图圆角显示 /*首页文章版式圆角化*/ .panel{ border: none; bor...
扫描右侧二维码阅读全文
14
2018/05

Typecho添加文章头图圆角显示、获取焦点放大、头像转动特效

添加以下代码handsome主题设置 - 开发者设置 - 自定义 CSS 中即可,其他主题请自行测试。

文章头图圆角显示

/*首页文章版式圆角化*/
.panel{
    border: none;
    border-radius: 15px;
}

.panel-small{
    border: none;
    border-radius: 15px;
}

.item-thumb{
    border-radius: 15px;  
}

文章头图获取焦点放大

/*首页文章图片获取焦点放大*/
.item-thumb{
    cursor: pointer;  
    transition: all 0.6s;  
}

.item-thumb:hover{
      transform: scale(1.05);  
}

.item-thumb-small{
    cursor: pointer;  
    transition: all 0.6s;
}

.item-thumb-small:hover{
    transform: scale(1.05);
}

头像转动特效

/*首页头像转动*/
.thumb-lg{
    width:100px; 
}

.avatar{
    -webkit-transition: 0.4s;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out; 
}

.avatar:hover{
    transform: rotateZ(360deg);
    -webkit-transform: rotateZ(360deg);
    -moz-transform: rotateZ(360deg);
}

#aside-user span.avatar{
    animation-timing-function:cubic-bezier(0,0,.07,1)!important;
    border:0 solid
}

#aside-user span.avatar:hover{
    transform:rotate(360deg) scale(1.2);
    border-width:5px;
    animation:avatar .5s
}

阴影

#阴影颜色修改rgba后面的值
/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(17, 153 ,196, 0.5);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 153 ,196, 0.5);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(17, 153 ,196, 0.5);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 153 ,196, 0.5);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(17, 153 ,196, 0.5);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 153 ,196, 0.5);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(17, 153 ,196, 0.5);
    -moz-box-shadow: 1px 1px 5px 5px rgba(17, 153 ,196, 0.5);
}

.app.container {
    box-shadow: 0 0 30px rgba(17, 153 ,196, 0.5);
}

站点动态时间轴

/* 站点动态时间轴 */
#teamnewslist ol{list-style:none;margin-left: 36px;padding-left: 14px;border-left: 2px solid #eee;font-size: 18px;color: #666;}
#teamnewslist b{font-size: 12px;font-weight: normal;color: #999;display: block;position: relative;margin-bottom:5px;}
#teamnewslist b::after{position: absolute;top: 6px;left: -22px;content: '';width: 14px;height: 14px;border-radius: 50%;background-color: #fff;border: 2px solid #ccc;box-shadow: 2px 2px 0 rgba(255,255,255,1), -2px -2px 0 rgba(255,255,255,1)}
#teamnewslist li{list-style:none;margin: 0 0 20px 0;line-height: 100%;}
#teamnewslist li:hover{color: #555;}
#teamnewslist li:hover b::after{border-color: #C01E22;}
#teamnewslist li:hover b{color: #C01E22;}
最后修改:2019 年 01 月 03 日 09 : 38 AM
如果觉得我的文章对你有用,请随意赞赏

1 条评论

  1. wbidy

    请问博主头像放大并晃动的css代码是什么,分享一下吧,谢谢了,么么哒。

发表评论