在线预览地址:https://zwyboom.gitee.io/zwycss
github地址(您的star是作者创作的动力~):https://github.com/seventhcode/oneClass
一行class添加动画效果。引入oneClass.css后添加class 或者 添加div后添加class。oneClass、oneCss、zwyCss
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="oneClass.css" />
</head>
<body>
<div class="container999">
<div>引入oneClass.css</div>
<div>为你想要效果的div添加class || hover-class(设置--count:1)</div>
<div>绿色背景为兼容性较差的动画需酌情使用</div>
<div class="card">
<div class="cardItem">
<div class="tips">流光效果4</div>
<div class="blueBtn zwyHeightFour" style="--count:infinite;--heightColor:#fff;--speed:4s;--borderRadius:0;">
<img class="zwyStar" src="static/icon_star.png" />
流光效果4</div>
<div class="className">zwyHeightFour zwyStar</div>
</div>
<div class="cardItem">
<div class="tips">文本点击1</div>
<div hover-class="zwyTextClick1">我是文字</div>
<div class="className">zwyTextClick1</div>
</div>
<div class="cardItem">
<div class="tips">提示点击效果</div>
<div class="btn zwyJittery1" style="--count:infinite;">按钮</div>
<div class="className">zwyJittery1</div>
</div>
<div class="cardItem">
<div class="tips">点击效果</div>
<div class="btn" hover-class="zwyBtnClick1" style="border-bottom: 10px solid #5500ff;">
按钮
</div>
<div class="className">zwyBtnClick1</div>
</div>
<div class="cardItem">
<div class="tips">按钮动画</div>
<div class="btn" style="position: relative;width: 160px;">
<div class="zwyDot" style="--left:0%;--right:400%;--bg:#000000;"></div>
粒子</div>
<div class="className">zwyDot</div>
</div>
<div class="cardItem">
<div class="tips">红包展示</div>
<!-- count:Number || infinite || both; -->
<div class="zwyMidSkewShow" style="
--count:infinite;--speed:1s;
width: 50px;height: 80px;background-color: red;border-radius: 5px;"
></div>
<div class="className">zwyMidSkewShow</div>
</div>
<div class="cardItem" style="background-color:#4CD964;">
<div class="tips">效果3</div>
<!-- count:Number || infinite; -->
<div class="grayBtn zwyHeightThree" style="--count:infinite;--heightColor:#fff;--speed:4s;--borderRadius:0;">流光效果3</div>
<div class="className">zwyHeightThree</div>
</div>
<div class="cardItem">
<div class="tips">小手点击</div>
<!-- transform-origin: top;top:上基准摇晃 bottom:下基准摇晃 -->
<div style="position: relative;width: 60px;height: 60px;">
<img class="zwyHand" style="width: 60px;height: 60px;" src="static/icon_hand.png" />
</div>
<div class="className">zwyHand</div>
</div>
<div class="cardItem">
<div class="tips">摇晃放大</div>
<!-- transform-origin: top;top:上基准摇晃 bottom:下基准摇晃 -->
<img class="zwyRotateAndScale" style="transform-origin: left bottom;width: 100px;height: 80px;" src="static/icon_chat.png" />
<div class="className">zwyRotateAndScale</div>
</div>
<div class="cardItem">
<div class="tips">消失</div>
<!-- count:Number || infinite; -->
<div class="btn zwyHide" style="--bgColor:#ffffff;--btnColor:#1AAD19;--count:infinite">消失</div>
<div class="className">zwyHide</div>
</div>
<div class="cardItem" style="background-color:#4CD964;">
<div class="tips">购物车</div>
<div style="position: relative;width: 60px;height: 60px;border-radius: 50%;background-color:rgba(0, 0, 0, 0.6);display: flex;align-items: center;justify-content: center;">
<div class="zwyDrop"></div>
<img class="zwyCart" src="static/icon_cart.png" />
</div>
<div class="className">zwyDrop zwyCart</div>
</div>
<div class="cardItem">
<div class="tips">流光效果2</div>
<div class="btn zwyHeightSec">流光2</div>
<div class="className">zwyHeightSec</div>
</div>
<div class="cardItem" style="background-color:#4CD964;">
<div class="tips">旋转</div>
<div class="zwyMusic" style="--contentBefore:'♫';--contentAfter:'♩';--zIndex:999;--color:#ffffff">
<div class="bubble zwyRotate" style="animation-duration: 10s;">气泡</div>
</div>
<div class="className">zwyRotate zwyMusic</div>
</div>
<div class="cardItem">
<div class="tips">直播头像</div>
<div class="zwyPortrait" style="--color:#ff0081;">
<div class="bubble zwyBeat">气泡</div>
</div>
<div class="className">zwyPortrait zwyBeat</div>
</div>
<div class="cardItem">
<div class="tips">直播</div>
<div style="width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;">
<div class="zwyLive" style="--color:red;"></div>
</div>
<div class="className">zwyLive</div>
</div>
<div class="cardItem">
<div class="tips">流光效果</div>
<div class="btn zwyHeight">流光</div>
<div class="className">zwyHeight</div>
</div>
<div class="cardItem">
<div class="tips">箭头</div>
<div class="chevronBox" style="transform: rotate(0deg);">
<div style="animation-delay:0s" class="zwyChevron" ></div>
<div style="animation-delay:1s" class="zwyChevron" ></div>
<div style="animation-delay:2s" class="zwyChevron" ></div>
<!-- <div v-for="(item,index) in 3" :style="{'animation-delay':`${index}s`}" class="zwyChevron" :key="index" ></div> -->
</div>
<div class="className">zwyChevron</div>
</div>
<div class="cardItem">
<div class="tips">添加黑色波纹</div>
<!-- color:rgba(0, 0, 0, 0.15); 黑色 color:rgba(255, 255, 255, 0.6); 白色 -->
<div class="bubble zwyHot" style="--color:rgba(0, 0, 0, 0.15);"></div>
<div class="className">zwyHot</div>
</div>
<div class="cardItem">
<div class="tips">添加其他颜色波纹</div>
<div class="bubble zwyHot" style="--color:rgba(255, 0, 4, 0.6);"></div>
<div class="className">zwyHot</div>
</div>
<div class="cardItem">
<div class="tips">缩小点击效果</div>
<!-- count:Number || infinite -->
<div class="btn zwyHover1" style="--count:infinite;">按钮</div>
<div class="className">zwyHover1</div>
</div>
<div class="cardItem">
<div class="tips">摇晃效果</div>
<!-- transform-origin: top;top:上基准摇晃 bottom:下基准摇晃 -->
<img class="zwyShake" style="transform-origin: center bottom;width: 40px;height: 40px;" src="static/logo.png" />
<div class="className">zwyShake</div>
</div>
<div class="cardItem">
<div class="tips">气泡点击效果</div>
<!-- count:Number || infinite; -->
<div class="btn zwyHover2" style="--color:#ff0081;--count:infinite;">按钮</div>
<div class="className">zwyHover2</div>
</div>
<div class="cardItem">
<div class="tips">抖动点击效果</div>
<!-- count:Number || infinite; -->
<div class="bubble zwyHover3" style="--count:infinite;">气泡</div>
<div class="className">zwyHover3</div>
</div>
<div class="cardItem">
<div class="tips">浮动效果</div>
<div class="bubble zwyFly">气泡</div>
<div class="className">zwyFly</div>
</div>
</div>
</div>
</body>
<style>
.redPacket{
width: 50px;
height: 80px;
background-color: red;
border-radius: 5px;
}
.blueBtn{
background-color: rgba(9, 1, 56, 0.9);
color: #ffc766;
padding: 30px;
}
.grayBtn{
background-color: rgba(56, 56, 56, 0.9);
color: #FFF;
padding: 30px;
}
.btn{
min-width: 100px;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
height: 40px;
border-radius: 40px;
color: white;
background-color: #007AFF;
}
.bubble{
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #007AFF;
color: white;
text-align: center;
line-height: 60px;
}
.tips{
padding-bottom: 10px;
}
.className{
padding-top: 10px;
}
.chevronBox{
width: 80px;
height: 80px;
display: flex;
align-items: flex-start;
justify-content: center;
}
.cardItem{
box-sizing: border-box;
border: 1px solid #f5f5f5;
width: 50%;
display: flex;
padding: 10px 0;
color: black;
flex-direction: column;
align-items: center;
justify-content: center;
}
.container999 {
width: 100vw;
font-size: 28px;
min-height: 100vh;
overflow: hidden;
color: #6B8082;
position: relative;
background-color: #f6f6f6;
}
.card{
width: 91%;
background-color: white;
position: relative;
display: flex;
flex-wrap:wrap;
margin: auto;
border-radius: 5px;
}
</style>
</html>在线预览地址：https://zwyboom.gitee.io/zwycss/#/
github地址:https://github.com/seventhcode/oneClass
欢迎star，你们的star是作者创作的动力~~
有问题可以留言随时解答