css3的transform-origin配合scale，控制动画，实现各种hover效果
1.底部画线，从左边开始，右边结束
html：
<div class="silde-txt">底部划线</div>
css：
<style>
.silde-txt{
width: 200px;
color: red;
position: relative;
text-align: center;
margin-top:20px;
}
.silde-txt:before{
content: "";
position:absolute;
width: 200px;
height: 4px;
bottom: -4px;
left: 0px;
background: deeppink;
transition: transform .5s;
transform: scale(0);
transform-origin: 100% 0;
}
.silde-txt:hover::before{
transform: scale(1);
transform-origin: 0 0;
}
</style>
2：背景色1的左边产生，从右边消失
背景色2的上边产生，从下边消失
<div class="bg">背景动画1</div>
<div class="bg2">背景动画1</div>
.bg,.bg2{
position: relative;
width: 200px;
height: 60px;
line-height: 60px;
font-size: 32px;
cursor: pointer;
color: #333;
text-align: center;
transition: color .5s;
margin: 10px;
}
.bg:after{
content: "";
position: absolute;
left: 0;
width: 200px;
height: 60px;
background: deeppink;
z-index: -1;
transform: scale3d(0, 1, 1);
transform-origin: 100% 50%;
transition: transform .5s;
}
.bg:hover::after{
transform: scale3d(1, 1, 1);
transform-origin: 0% 50%;
transition-timing-function: ease-in;
}
.bg2::before {
content: "";
position: absolute;
left: 0;
width: 200px;
height: 60px;
background: deeppink;
z-index: -1;
transform: scale3d(0, 0, 1);
transform-origin: 50% 100%;
transition: transform .5s;
}
.bg2:hover::before{
transform: scale3d(1, 1, 1);
transform-origin: 50% 0%;
}
最新文章
- WordPress插件--WP BaiDu Submit结构化数据插件又快又全的向百度提交网页
- HTTP压缩
- Python的高级特性7:闭包和装饰器
- tab切换的两种方法
- android屏幕亮度
- AutoMapper入门使用
- 數據監控与診斷－－環形緩沖區(RING BUFFER)
- 【400】numpy.pad 为数组加垫(迷宫类题目)
- Light oj 1021 - Painful Bases
- struts2必备jar包（2.1.6版本）
- Android Studio 编译错误
- [UE4]AWP狙击枪开镜
- 使用qmlscene预览qml文件
- SQL基础语法的单表操作 select|insert|update|delete(增删改查) 简单使用
- 010 --MySQL查询优化器的局限性
- Java的序列化算法--解释序列后字节含义
- HDU 4585 Shaolin(map应用+二分)
- Eclipse添加JBOSS支持
- 20145209刘一阳《网络对抗》Exp6信息搜集与漏洞扫描
- LeetCode17.电话号码的字母组合 JavaScript