点赞效果

最新推荐文章于 2022-10-27 12:34:37 发布

幼儿园大佬107

最新推荐文章于 2022-10-27 12:34:37 发布

阅读量197

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/lxy9876/article/details/114338698

版权

css3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

点赞效果
开发工具与关键技术：开发工具DW，关键技术JavaScript与css3
撰写时间：1月11日

1.首先做一个点赞的效果呢就是建立HTML，再使用h2和div标签。如下面图片：

2.再设置它的样式。其中呢rotateZ定义沿着 Z 轴的 3D 旋转。clip 属性剪裁绝对定位元素。
  
3.怎么让它有点赞的效果呢...然后就是使用关键帧@keyframes。scale() 方法为画布的当前变换矩阵添加一个缩放变换。第二个点赞效果是用了两个关键帧。



4.window.console = window.console || function(t) {};考虑兼容性。可加可不加。用if...else语句，removeClass() 方法从被选元素移除一个或多个类。removeClass()如果没有规定的参数，则该方法将从被选元素中删除所有类。addClass() 方法向被选元素添加一个或多个类。addClass()该方法不会移除已存在的 class 属性，仅仅添加一个或多个 class 属性。插件的话只要是jQuery都可以。

效果图：





代码：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点赞</title>
</head>
	
<style>
body {
  background-color: #2C262C;
}
h2 {
  color: white;
  margin-top: 50px;
  text-align: center;
  font-weight: normal;
}
.heart {
  width: 20px;
  height: 20px;
  margin: 200px auto;
  transform: translateZ(0);
  color: #FFF;
  font-size: 3em;
  cursor: pointer;
  position: relative;
  transition: all .3s ease;
}
.heart:hover {
  animation: pulse .6s linear;
}
.heart:before {
  content: "❤";
  position: absolute;
  color: #A12B2B;
  opacity: 0;
}
.heart.happy {
  color: #A12B2B;
}
.heart.happy:before {
  opacity: 0;
  transform: translateY(-100px) rotateZ(5deg); 
  animation: fly 1s ease;
}
/**/	
.heart.broken {
  color: #aaa;
  position: relative;
  transition: all .3s ease;
}
.heart.broken:before, .heart.broken:after {
  content: "❤";
  opacity: 1;
  color: #ccc;
  position: absolute;
  top: -150px;
  transform: scale(3) rotateZ(0);
}
.heart.broken:before {
  clip: rect(0, 20px, 200px, 0);
  animation: break-left 1s ease forwards;
}
.heart.broken:after {
  clip: rect(0, 50px, 200px, 25px);
  animation: break-right 1s ease forwards;
}
@keyframes pulse {
  50% {
    transform: scale(1.1);
  }
}
@keyframes fly {
  0% {
    opacity: 0;
    transform: translateY(-20px) rotateZ(15deg);
  }
  50% {
    opacity: .75;
    transform: scale(4) translateY(-30px) rotateZ(-15deg);
  }
  100% {
    opacity: 0;
    transform: scale(4) translateY(-50px) rotateZ(15deg);
  }
}
@keyframes break-left {
  0% {
    opacity: 1;
    transform:  rotateZ(0);
  }
  20% {
    opacity: .5;
    transform: scale(3) translateX(-10px) rotateZ(-20deg) translateY(0); 
  }
  50% {
    opacity: .5;
    transform: scale(3) translateX(-10px) rotateZ(-20deg) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(3) translateX(-30px) rotateZ(-25deg) translateY(50px);
  }
}
@keyframes break-right {
  0% {
    opacity: 1;
    transform: scale(3) rotateZ(0);
  }
  20% {
    opacity: .5;
    transform: scale(3) translateX(10px) rotateZ(20deg) translateY(0);
  }
  50% {
    opacity: .5;
    transform: scale(3) translateX(10px) rotateZ(20deg) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(3) translateX(30px) rotateZ(25deg) translateY(50px);
  }
}
</style>

  <script>
	  window.console = window.console || function(t) {};
  </script>

<body translate="no" >
  <h2>Click the heart to like/unlike</h2>
  <div class="heart">❤</div>

	<script src="jquery-3.2.1.slim.min.js"></script>
      <script id="rendered-js" >
		var animated = false;
		$('.heart').click(function (){
		  if (!animated) {
			$(this).addClass('happy').removeClass('broken');
			animated = true;
		  } else
		  {
			$(this).removeClass('happy').addClass('broken');   
			animated = false;
		  }
			console.log(animated);
		});
    </script>
</body>
</html>
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303221858711.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4eTk4NzY=,size_16,color_FFFFFF,t_70#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20210303222109752.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x4eTk4NzY=,size_16,color_FFFFFF,t_70#pic_center)

幼儿园大佬107

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
点赞效果

点赞效果开发工具与关键技术：开发工具DW，关键技术JavaScript与css3撰写时间：1月11日1.首先做一个点赞的效果呢就是建立HTML，再使用h2和div标签。如下面图片：2.再设置它的样式。其中呢rotateZ定义沿着 Z 轴的 3D 旋转。clip 属性剪裁绝对定位元素。 3.怎么让它有点赞的效果呢...然后就是使用关键帧@keyframes。scale() 方法为画布的当前变换矩阵添加一个缩放变换。第二个点赞效果是用了两个关键帧。4.window.console = w
复制链接

扫一扫

专栏目录