建网站网络公司,什么网站可以做期刊封面,行情宝app下载,伊春市建设局网站悬浮动画 像这样的悬浮动画该怎么做#xff0c;让我们按照以下步骤完成 步骤#xff1a; 先把HTML内容做起来#xff0c;用button属性创建一个按钮#xff0c;按钮内写上悬浮效果 button classbtn悬浮动画/button在style标签内设置样式,先设置盒子大小让我们按照以下步骤完成 步骤 先把HTML内容做起来用button属性创建一个按钮按钮内写上悬浮效果 button classbtn悬浮动画/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
htmlheadmeta charsetutf-8title悬浮动画/titlestyle/* 第一步设置盒子大小这里用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/headbodybutton classbtn悬浮动画/button/body
/html运行效果
