上一篇講過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>

?

轉載于:https://www.cnblogs.com/ly2646/p/9484459.html

總結

以上是生活随笔為你收集整理的CSS动画实例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。