Слияние кода завершено, страница обновится автоматически
1.0.1
Плавающий эффект zwyFly:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/oneClass.css">
</head>
<body>
<div class="bubble zwyFly">气泡</div>
</body>
<style>
.bubble{
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #007AFF;
color: white;
text-align: center;
line-height: 60px;
}
</style>
</html>
1.0.2
Эффект пузырька при нажатии zwyHover2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/oneClass.css">
</head>
<body>
<!-- count:Number || infinite; -->
<div class="bubble zwyHover3" style="--count:infinite;">气泡</div>
</body>
<style>
.bubble{
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #007AFF;
color: white;
text-align: center;
line-height: 60px;
}
</style>
</html>
1.0.3
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/oneClass.css">
</head>
<body>
<!-- transform-origin: top;top:上基准摇晃 bottom:下基准摇晃 -->
<img class="zwyShake" style="transform-origin: center bottom;width: 40px;height: 40px;" src="static/logo.png">
</body>
<style>
</style>
</html>
1.0.4
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/oneClass.css">
</head>
<body>
<!-- count:Number || infinite -->
<div class="btn zwyHover1" style="--count:infinite;">按钮</div>
</body>
<style>
.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;
}
</style>
</html>
1.0.5
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/oneClass.css">
</head>
<body>
<!-- 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>
</body>
<style>
.bubble{
width: 60px;
height: 60px;
border-radius: 50%;
background-color: #007AFF;
color: white;
text-align: center;
line-height: 60px;
}
</style>
</html>
1.0.6
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/oneClass.css">
</head>
<body>
<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>
</body>
<style>
.chevronBox{
width: 80px;
height: 80px;
display: flex;
align-items: flex-start;
justify-content: center;
}
</style>
</html>
1.0.7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css"
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )