一些css效果

1.鼠标滑过的效果

.it-0000_sp2-2 {
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    padding: 40px 10px;
    overflow: hidden;
    height: 100%;
    transition: all 0.35s;
}
.it-0000_sp2-2 .icon {
    border: 2px solid #2e4f7f;
    border-radius: 100%;
    margin: 0 auto 30px;
    width: 120px;
    height: 120px;
    display: block;
    transition: all 0.35s;
    transform-origin: top center;
}
.it-0000_sp2-2 .icon img {
    display: block;
    padding: 33px;
    transition: padding 0.35s;
}
.it-0000_sp2-2 .txt {
    position: relative;
    padding-bottom: 20px;
    transition: all 0.35s;
}
.it-0000_sp2-2 .txt p {
    font-size: 24px;
    color: #444;
    margin-bottom: 15px;
}
.it-0000_sp2-2 .txt span {
    color: #777;
    text-transform: uppercase;
}
.it-0000_sp2-2 .txt .btn {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.35s;
}

hover

.it-0000_sp2-2:hover {
    box-shadow: 0px 0px 25.5px 4.5px rgba(0, 0, 0, 0.1);
    transform: translateY(-10px);
}
.it-0000_sp2-2:hover .icon {
    transform: scale(0.7);
}
.it-0000_sp2-2:hover .txt {
    transform: translateY(-40%);
}
.it-0000_sp2-2:hover .txt .btn {
    opacity: 1;
    visibility: visible;
}

2.旋转效果 

transform: rotate(360deg);

三、登录框

本文为看恩吧原创文章,转载无需和我联系,但请注明来自knsay.com

打赏

• 上一篇： windows 使用sass
• 下一篇： vscode 下载慢的解决办法