前端——给button制作一个简单的爱心特效(1)_bootstrap 添加爱心按钮-优快云博客

本文链接：https://blog.youkuaiyun.com/s707365172/article/details/115742952

前言

今天在学习bootstrap的时候栅格系统的时候，突然心生一个小点子，就是能不能对搜索框的搜索按钮加点料，让其变的生动起来，大概是下面的样子。
在这里插入图片描述
心动不如行动，活学活用、现学现卖，加深理解，开始敲键盘。首先要做个搜索框出来，用bootstrap来做很容易，bootstrap是一个基于html 、css和js所开发出来的前端框架，它使得网页的开发更高效，同时也更具有观赏性，所以学了一点皮毛的我就迫不及待赶紧来试一试了。

一、制作搜索框

首先找到bootstrap中文的官方网站(bootstrap中文官方网站)，然后在其bootstrap3中文文档中的全局css样式中找到表单一栏，像购物一样获取我们想要的样式商品，样式代码如下。

//响应式布局
<div class="container">  
	<div class="row">
		<form>
			<div class="input-group">
				<input type="text" class="form-control" placeholder="who are you?">
				<span class="input-group-btn">
			   		<button class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button>
				</span>
			</div>
		</form>
	</div>
</div>

首先使用bootstrap中好用的响应式布局container,然后通过表单控件和按钮来实现搜索栏，如下。
在这里插入图片描述

二、制作鼠标划入特效

在bootstrap组件中获取桃心样式的字体图标类名为glyphicon glyphicon-heart，通过获取button的绝对尺寸结合animate()来控制桃心的运动轨迹和时间，通过fadeOut()来控制桃心的淡出，最终代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<title>Document</title>
	<script type="text/javascript">
		
		$(function(){
   

			var $btnposi = $('.btn').offset();
			document.title = $btnposi.left+'|'+$btnposi.top;
			var $love = $('.love span');
			var $bool = false;
			$('.btn').mouseenter(function(){
   
				if ($bool) {
   
					return;
				}
				$bool = true;
				$love.eq(0).css({
   'left':$btnposi.left+10,'top':$btnposi.top-40});
				$love.eq(1).css({
   'left':$btnposi.left-6,'top':$btnposi.top-58});
				$love.eq(2).css({
   'left':$btnposi.left-20,'top':$btnposi.top-65});
				$love.eq(3