2022/05/26 css animate按钮样式收集

1.图片旋转样式
参考效果

html

<div className="img-animation" onClick={handleSubmit}>
                <img className="circle-box" src="https://static.tildacdn.com/tild6262-3930-4136-a435-356330363362/_129.svg" alt="" />
                <span className="fixed-text">发送</span>
            </div>

css

/* 动画 */
.img-animation {
    width: 140px;
    position: relative;
    transition: background .5s, top .5s;
    font-weight: 500;
}

.img-animation:hover {
    cursor: url(/public/cursors/hand.cur), pointer;
    transform: scale(0.9);
    transition: background .5s, top .5s;
}

.circle-box {
    display: inline-block;
    animation: circle 30s infinite linear;
}

.fixed-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@keyframes circle {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

---

2.hover效果 按钮旋转90度
效果图

html：用的组件
css

.ant-drawer-close :hover {
    cursor: url(/public/cursors/hand.cur), auto;
    animation: rotateAnimal 1s;
}

@keyframes rotateAnimal {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(-90deg);
    }
}

---

3.图片在页面上上下抖动
效果

html

<div className="move-triangle">
                    <img src='https:XXXXXXXXX.png' />
                </div>

css

.move-triangle {
    position: absolute;
    width: 100px;
    top: -20px;
    right: 0;
    animation: moveimg2 4s infinite ease-in-out;
}

@keyframes moveimg2 {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        -webkit-transform: translate(0, 5px) rotate(-4deg);
        transform: translate(0, 5px) rotate(-4deg);
    }

    100% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg);
    }
}

---

4.按钮效果
效果

html

<button className="btn" onClick={goNFTContractPage}>确认收货
                    <ArrowRightOutlined />
                </button>

css

/* 按钮变色 */
.btn {
    position: relative;
    width: auto;
    /* min-width: 100px; */
    box-sizing: border-box;
    padding: 4px;
    text-align: center;
    color: #fff;
    background: #2ECD53;
    cursor: url(/public/cursors/hand.cur), pointer;
    border-radius: 4px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.btn span {
    display: inline-block;
    margin-left: 10px;
}

.btn:after, .btn:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: #2ECD53;
    z-index: -2;
    border-radius: 4px;
}

.btn:hover {
    z-index: 1;
    background: transparent;
}

.btn:before {
    transition: .3s;
    background: #14ae5c;
    z-index: -1;
}

.btn:hover:after, .btn:hover:before {
    width: 100%;
}

有讲解，写得很好
参考链接：https://blog.youkuaiyun.com/ann295258232/article/details/90059607?spm=1001.2014.3001.5506

---

6.图片问题，设定好的尺寸，网络图片长宽高不同，统一展示效果
html

<img className="init-img img-fill" src={item.itemJson.imgUrl} alt="" />

css

.init-img {
    width: 180px;
    height: 240px;
}

.img-fill {
    object-fit: cover;//重点是这个
}

主要是 object-fit属性
参考链接：https://blog.youkuaiyun.com/qq_42177730/article/details/82689512?spm=1001.2014.3001.5506