前端实战第一期:悬浮动画

2024-01-08 21:49:12

悬浮动画

请添加图片描述
像这样的悬浮动画该怎么做,让我们按照以下步骤完成
步骤:

  1. 先把HTML内容做起来,用button属性创建一个按钮,按钮内写上悬浮效果

    <button class='btn'>悬浮动画</button>
    
  2. 在style标签内设置样式,先设置盒子大小,这里用body当作容纳button的盒子 ,再用display:flex;属性把盒子变为弹性盒子,再用justify-content和align-item设置盒子body居中

    /* 第一步:设置盒子大小,这里用body当作容纳button的盒子 */
    			body{
    				/* height:100vh;能起到什么作用 */
    				height:100vh;
    				display:flex;
    				justify-content: "center";
    				align-items:center;
    			}
    
  3. 创建和设置好盒子样式后,开始设置button样式

    • button是块级元素,所以第一步就是设置高宽,高为50px,宽度为100px

    • background-color: transparent;:设置按钮的背景颜色为透明。

    • border-color: #800080;:设置按钮边框的颜色为#800080(一种紫色)。

    • border-radius: 5px;:设置按钮边框的圆角半径为5像素,使按钮的四个角更圆润。

    • color: #800080;:设置按钮文字的颜色为#800080(一种紫色)。

    • font-weight: bolder;:设置按钮文字的字体粗细为比父元素的字体更粗。

    • margin: 0 auto;:设置按钮的水平外边距为自动,上下外边距为0,使按钮在水平方向上居中。

    • cursor: pointer;:当鼠标悬停在按钮上时,改变鼠标的形状为手形,表示这是一个可点击的元素。

    • position: relative;:设置按钮的位置为相对定位,相对于其正常位置进行定位。为后面absolute定位属性做铺垫

      .btn{
      				width:100px;
      				height:50px;
      				background-color:transparent;
      				border-color: #55aa7f;
      				border-radius:5px;
      				color:#55aa7f;
      				font-weight: bolder;;
      				margin:0 auto;
      				cursor:pointer;
      				position:relative;
      			}
      
    1. button样式设置之后,就开始设置动画效果,为动画效果设置了三个选择器

      .btn::before选择器使用::before伪元素创建了一个额外的元素

      /*::before创建的元素是行内元素*/
      .btn::before{
      				content:"";
      				height:100%;
      				width:0px;
      				background-color:#55aa7f;
      				/* 设置::before盒子所在位置 */
      				position:absolute;
      				top:0%;
      				left:-24%;
      				transform:skew(45deg);
      				z-index:-1; /*这使得伪元素在页面上的堆叠顺序低于其正常位置。*/
      				transition:all 0.5s; /*颜色变化*/
      			}
      

      .btn:hover::before选择器是当鼠标悬停在按钮上,就会触发.btn中的before创建的伪元素

      .btn:hover::before{
       /*触发之后,由原本的0px直接变为160%的宽度,这是很多动画效果都要设置的步骤,像是缩放,悬浮,出现等动画*/
         	 width:160%;
      			}
      

      .btn:hover选择器是当鼠标悬停在按钮上,不光按钮背景要变,按钮内的字体颜色也要变

      .btn:hover{
      				color:white;
      			}
      
    2. 动画效果设置好之后,还要在.btn选择器中添加overflow和transition属性

      .btn{
      /* 因为伪元素创建的盒子超出按钮大小,再说也为了美观,直接用overflow属性的hidden值隐藏   */    
          overflow:hidden;
      /*如果仅仅设置了动画效果,点击过去,直接变过来,这样观感不好,所以用transition过渡元素,选取所有元素,再输入0.5s的过渡时间*/
          transition:all 0.5s;
      }
      

这样这个小项目就算完成了
完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>悬浮动画</title>
		<style>
			/* 第一步:设置盒子大小,这里用body当作容纳button的盒子 */
			body{
				/* height:100vh;能起到什么作用 */
				height:100vh;
				display:flex;
				justify-content: "center";
				align-items:center;
			}
			/* 第二步:创建好盒子后,就开始设置button的样式 */
			.btn{
				width:100px;
				height:50px;
				background-color:transparent;
				border-color: #55aa7f;
				border-radius:5px;
				color:#55aa7f;
				font-weight: bolder;;
				margin:0 auto;
				cursor:pointer;
				position:relative;
				overflow:hidden;
				transition:all 0.5s; /*字体变化*/
			}
			/* 第三步:button样式设置好之后,就开始设置动画效果 */
			.btn::before{
				content:"";
				height:100%;
				width:0px;
				background-color:#55aa7f;
				/* 设置::before盒子所在位置 */
				position:absolute;
				top:0%;
				left:-24%;
				transform:skew(45deg);
				z-index:-1;
				transition:all 0.5s; /*颜色变化*/
			}
			.btn:hover::before{
				width:160%;
			}
			.btn:hover{
				color:white;
			}
		</style>
	</head>
	<body>
		<button class='btn'>悬浮动画</button>
	</body>
</html>

运行效果
请添加图片描述

文章来源:https://blog.csdn.net/AIMing_byte/article/details/135397512
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。