h5 css3爱心点赞图标ui动画特效代码下载


h5 css3爱心点赞图标ui动画特效代码下载
h5 css3爱心点赞图标ui动画特效代码下载以及爱心点赞、图标ui动画等js/jquery网页特效代码下载。

1. 引入CSS

<link rel='stylesheet' href='css/tailwind.min.css' />
<link rel="stylesheet" href="css/style.css" />
<link rel='stylesheet' href='css/tailwind.min.css' />
<link rel="stylesheet" href="css/style.css" />

2. 引入JS

<script src='js/alpine.min.js'></script>
<script src='js/alpine.min.js'></script>

3. HTML代码

<!DOCTYPE html>
<html lang="en" class="flex h-screen justify-center items-center bg-gray-900">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<button x-data="{
  state: 'Unliked',
  usedKeyboard: false,
  async updateState(to) {
      this.state = 'Saving'
      await new Promise(resolve => setTimeout(resolve, 1000))
      this.state = to
  }
}"
:class="{
  'like unliked': state === 'Unliked',
  'like saving': state === 'Saving',
  'like liked': state === 'Liked',
  'focus:outline-none': !usedKeyboard
}"
@click="updateState(state === 'Unliked' ? 'Liked' : 'Unliked')" @keydown.window.tab="usedKeyboard = true">
  <span class="like-icon like-icon-state" aria-label="state" x-text="state" aria-live="polite">Unliked</span>
</button>
</body>
</html>

相关推荐

  • 利用css3实现svg爱心点赞动画特效

    利用css3实现svg爱心点赞动画特效以及利用css3实现、svg、爱心点赞、动画特效等js/jquery网页特效代码下载。

    Border circle 暖光 2019-12-17 21:47:47 0 0 0

  • jQuery爱心点赞效果代码

    jQuery爱心点赞效果代码以及jQuery、爱心点赞效果等js/jquery网页特效代码下载。

    Border circle 扒小喵 2019-12-17 20:38:42 0 0 0

发表评论

相关文章