前端实战第一期:悬浮动画
悬浮动画
像这样的悬浮动画该怎么做,让我们按照以下步骤完成
步骤:
-
先把HTML内容做起来,用button属性创建一个按钮,按钮内写上悬浮效果
<button class='btn'>悬浮动画</button>
-
在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; }
-
创建和设置好盒子样式后,开始设置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; }
-
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; }
-
动画效果设置好之后,还要在.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>
运行效果
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!