文字特效

html内容

测开之路一百零一:jquery文字特效、动画、方法链

 

1、卷起/展开

测开之路一百零一:jquery文字特效、动画、方法链

测开之路一百零一:jquery文字特效、动画、方法链

测开之路一百零一:jquery文字特效、动画、方法链

 

2、隐藏/显示

测开之路一百零一:jquery文字特效、动画、方法链

测开之路一百零一:jquery文字特效、动画、方法链

测开之路一百零一:jquery文字特效、动画、方法链

 

3、淡入淡出

测开之路一百零一:jquery文字特效、动画、方法链

测开之路一百零一:jquery文字特效、动画、方法链

测开之路一百零一:jquery文字特效、动画、方法链

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<script src="../js/jquery-3.4.1.min.js"></script>-->

<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>jQuery特效</h1>

<p>第一个p标签
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto blanditiis commodi, corporis deserunt
ducimus ea, error expedita hic id ipsa itaque numquam obcaecati odit optio similique tempora tenetur
voluptatibus.</p>

<p>第二个p标签
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab architecto blanditiis commodi, corporis deserunt
ducimus ea, error expedita hic id ipsa itaque numquam obcaecati odit optio similique tempora tenetur
voluptatibus.</p>

<button ).slideToggle(2000);
});
});
</script>

 

动画,其实就是一系列的css变化效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画,就是一系列的css变化效果</title>
<style>
#box{
position: relative;
width: 200px;
height: 200px;
background-color: blue;
border: 1px solid black;
}
</style>
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<button )
)
});
});
</script>

测开之路一百零一:jquery文字特效、动画、方法链

 

 测开之路一百零一:jquery文字特效、动画、方法链

测开之路一百零一:jquery文字特效、动画、方法链

 

方法链:对同一个 元素连续操作

测开之路一百零一:jquery文字特效、动画、方法链

测开之路一百零一:jquery文字特效、动画、方法链

 

相关文章:

  • 2021-11-30
  • 2021-08-13
  • 2022-02-10
  • 2021-05-22
  • 2021-08-30
  • 2022-01-10
猜你喜欢
  • 2021-06-29
  • 2022-01-23
  • 2021-12-06
  • 2022-12-23
  • 2021-12-03
  • 2021-10-31
相关资源
相似解决方案