XSY的FUN天地

添加几个特效

XSY

April 26, 2018

1510views

One comment

1177 words

技术文档

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

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

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

```
### 首页文章图片获取焦点放大
```css
/*首页文章图片获取焦点放大*/
.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);
}

```
### 首页头像转动
```css
/*首页头像转动*/
.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
}
```<hr class="content-copyright" style="margin-top:50px" /><blockquote class="content-copyright" style="font-style:normal">版权属于：XSY本文链接：<a class="content-copyright" href="https://xsy.fun/archives/43/">https://xsy.fun/archives/43/</a>转载时须注明出处及本声明</blockquote>

Last modification：April 4th, 2019 at 10:21 pm

If you think my article is useful to you, please feel free to appreciate