上一篇讲过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>CSS动画实例
原文地址：https://www.cnblogs.com/ly2646/p/9484459.html