当前位置：首页 > news >正文

网站域名做链接怎么做搜索引擎营销的特点是什么

news 2026/4/7 19:04:13

网站域名做链接怎么做,搜索引擎营销的特点是什么,我谁知道在哪里可以找人帮忙做网站,公众号开发信息开发者密码是什么悬浮动画像这样的悬浮动画该怎么做，让我们按照以下步骤完成步骤： 先把HTML内容做起来，用button属性创建一个按钮，按钮内写上悬浮效果 <button classbtn>悬浮动画</button>在style标签内设置样式,先设置盒子大小&…

悬浮动画

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

先把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;}
```
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>