html - 使用 css 移动箭头动画
问题描述
当我将鼠标悬停在它所在的元素上时,我想制作一个向右移动的箭头。现在我的两个元素同时移动。(h3和span)。
箭头和文本必须在同一行。只有箭头应该移动。我只需要使用 html 和 css(没有 js 或 ajax)。
.container-fluid .blue-row {
background-color: #03a9f4;
width: 100%;
margin: auto;
}
.container-fluid .blue-row h3 {
color: white;
font-size: 39px;
text-align: center;
vertical-align: center;
padding: 40px;
font-weight: bold;
}
.container-fluid .blue-row h3 span {
margin-left: 5%;
transition: 1s;
}
.container-fluid .blue-row:hover > h3 span {
margin-left: 10%;
}
<div class="container-fluid">
<div class="blue-row">
<h3>Check how we can kickstart your smart projects<span>⟶</span></h3>
</div>
</div>
解决方案
使用规则transform: translateX()
悬停,最好是默认。另外,span
使用 rule 制作块display: inline-block
。
.container-fluid .blue-row {
background-color: #03a9f4;
width: 100%;
margin: auto;
}
.container-fluid .blue-row h3 {
color: white;
font-size: 39px;
text-align: center;
vertical-align: center;
padding: 40px;
font-weight: bold;
}
.container-fluid .blue-row h3 span {
display: inline-block;
transform: translateX(20%);
transition: 1s;
}
.container-fluid .blue-row:hover > h3 span {
transform: translateX(50%);
}
<div class="container-fluid">
<div class="blue-row">
<h3>Check how we can kickstart your smart projects<span>⟶</span></h3>
</div>
</div>
推荐阅读
- angular - Ionic 3 货币格式
- design-patterns - 工厂方法分解成模块
- scala - Scala - 如何将 Dataset[Row] 转换为可添加到 Dataframe 的列
- pandas - 使用 Python 3 对 csv 文件进行排序
- android - 如何为测试创建对象的 PagedList?
- php - 给登录的用户不同的颜色
- python - 在 Windows 中使用子进程将 Shell 输出到 txt 文件
- javascript - 如何在输入文本框中禁用已选择的搜索栏列表
- javascript - Javascript从表单输入计算输入数字
- javascript - 通过添加默认高度 javascript 创建 3D 对象