对于Typecho主题的一些改动(持续更新)
in 技术文章 with 0 comment

对于Typecho主题的一些改动(持续更新)

in 技术文章 with 0 comment

图片与文章面板圆角

/*图片与文章面板圆角*/
.panel{border-radius:15px;}
.img-full{border-radius:15px;transition: all 0.6s;}
.img-responsive{border-radius:15px;transition: all 0.6s;}

图片缩放

/*图片缩放*/
.img-full:hover{transform: scale(1.02);}
.img-responsive:hover{transform: scale(1.02);}

首页头像转动并放大

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

.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
}

图片抖动特效

    /*图片抖动特效*/
img:hover {
-webkit-animation:sucaijiayuan 1s .1s ease both;
-moz-animation:tada 1s .1s ease both;
}
@-webkit-keyframes sucaijiayuan {
0% {
-webkit-transform:scale(1)
}
10%, 20% {
-webkit-transform:scale(0.8) rotate(-2deg)
}
30%, 50%, 70%, 90% {
-webkit-transform:scale(1.1) rotate(2deg)
}
40%, 60%, 80% {
-webkit-transform:scale(1.1) rotate(-2deg)
}
100% {
-webkit-transform:scale(1) rotate(0)
}

文章标题居中

本项修改的是文章标题,使其居中。将以下代码添加至后台主题设置 自定义CSS。

/*文章标题居中*/
.panel h2{
    text-align: center; 
}
.post-item-foot-icon{
    text-align: center;
}

首页文章版式阴影化

阴影颜色修改rgba后面的值

/*panel阴影*/
.panel{
   box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel:hover{
    box-shadow: 1px 1px 5px 5px rgba(206, 198, 198, 0.63);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}

.panel-small:hover{
    box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
    -moz-box-shadow: 1px 1px 5px 5px rgba(255, 112, 173, 0.35);
}
#如果也想使盒子四周也有阴影,加上以下代码
.app.container {
    box-shadow: 0 0 30px rgb(252, 250, 250);
}

评论框特效

下载特效JS文件:commentTyping.js,将其放在网站目录某个地方,然后编辑主题文件
你的主题名字/component/footer.php,在</body>后面添加以下代码。

<script type="text/javascript" src="JS文件路径"></script>
Responses