标签：变化 bottom 技术 abs margin 这一 nsf 垂直 旋转
上一篇讲过css动画transform transition的语法，这一节展示自己做的几个小例子加深印象
1. 线条动画效果
代码：最外层div包含2个小的div : a和b. a有左右边框(高度变化)， b有上下边框（宽度变化）, 默认不显示，鼠标移上去时，a的高度和b的宽度发生变化，交叉效果
<style> *{margin:0;padding:0;} .main{ width: 300px; height: 300px; background: #333; position: relative; } .a,.b{ opacity: 0; position: absolute; top: 0;bottom: 0;left: 0;right: 0; margin: auto; //水平垂直居中 transition: all .3s; //动画持续事件0.3s } .a{ width: 200px; height:100px; border-left: 1px solid #fff; border-right: 1px solid #fff; } .b{ width: 100px; height: 200px; border-top: 1px solid #fff; border-bottom: 1px solid #fff; } .main:hover .a{ opacity: 1; height: 230px; } .main:hover .b{ width: 230px; opacity: 1; } </style>
<div class="main"> <div class="a"></div> <div class="b"></div> </div>
2. 旋转：
代码：核心部分是 transform-origin: 0 0; 必须设置到起始点，然后逆时针旋转
<style> *{margin:0;padding:0;} .a1{ position: relative;width: 200px;height: 200px;overflow: hidden;background: #000;} .a2{ position: absolute;top: 200px;width: 300px;height: 200px; background: #2487e0;transition: all .3s;transform-origin: 0 0; } .a1:hover .a2 { transform: rotate(-15deg); } </style> <div class="a1"> <div class="a2"> </div> </div>
标签：变化 bottom 技术 abs margin 这一 nsf 垂直 旋转
原文地址：https://www.cnblogs.com/ly2646/p/9484459.html
