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.csdn.net/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.csdn.net/qq_42177730/article/details/82689512?spm=1001.2014.3001.5506

2022/05/26 css animate按钮样式收集相关推荐

css设置按钮样式_使用CSS设置按钮样式的快速指南
css设置按钮样式 by Ashwini Sheshagiri 通过Ashwini Sheshagiri Buttons have become an inevitable part of front ...
立体感css播放按钮样式
下载地址立体感css播放按钮样式,小图标使用FontAwesome字体图标库,使用远程cdn,可以自带机引用本地文件. dd:
考虑到可访问性，使用 CSS 设置按钮样式
按钮在网站上有很多用途--有用于悬停在图像上和在网页上导航的大按钮,以及用于显示有关您的产品或服务的信息的更微妙的按钮. 然而,按钮甚至可以吓倒经验丰富的网页设计师. 按钮有许多可能需要很长时间才能掌 ...
css文本框样式收集
鼠标一上去变成浅绿色 <html> <head> <title>css-文本框</title> <style type="text/cs ...
26.纯 CSS创作按钮被从纸上掀起的立体效果
26.纯 CSS创作按钮被从纸上掀起的立体效果原文地址:https://segmentfault.com/a/1190000014930183 感想:主要2D和3D转换.阴影效果. HTML代码: ...
怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式
前言文件上传用途非常广泛,浏览器自带文件控件不太美观,很多时候不能满足需求,需要自定义input [type=file]的样式. 不同浏览器的file控件表现形式不一样火狐谷歌 IE 不同浏览器 ...
button按钮样式_各种好看的小按钮合集，纯css编写，最近在学习时遇到的，记录成为笔记...
写在前面最近忙着实习的事,前往广州,租房,置办东西等等.用碎片化的时间看了一些博客,也看到不少我认为很不错的通过纯css来打造的按钮样式.记录下来以后开发的时候或许能用上. 亮起来按钮 < 简 ...
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）
前言一按钮在前端开发中往往是一个必不可少的元素,也有许多精美好看的样式资源供开发者直接使用.但博主认为,对于初学者而言,总是去cv别人做好的,而不理解其中的原理,是很不好的. 本人作为一名计 ...
提交按钮css加样式,用CSS美化按钮（button）
? 我们用 A 包含一个 SPAN 标签来实现此效果: HTML: 按钮文字? 设置按钮样式: CSS: ? 为按钮添加点击样式: CSS: ? 由于 IE 下点击后不能还原到默认状态,因此,我们需要 ...

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

2022/05/26 css animate按钮样式收集相关推荐

最新文章

热门文章