CSS案例(2D转换+过渡动画)
-
实现效果
-
HTML代码
<div class="con"> <div class="div_1"></div> <div class="div_2"></div> <div class="div_3"></div> <div class="div_4"></div> </div>
-
CSS代码
.con { position: relative; width: 1200px; height: 100px; margin: 0 auto; } .div_1, .div_2, .div_3, .div_4 { float: left; width: 300px; height: 100px; transition: all 1s; } .div_1 { background-color: aqua; transform-origin: 0% 50%; } .div_2 { background-color: rgb(0, 34, 255); transform-origin: 33.3% 50%; } .div_3 { background-color: rgb(0, 255, 76); transform-origin: 66.7% 50%; } .div_4 { background-color: rgb(255, 0, 30); transform-origin: 100% 50%; } .div_1:hover, .div_2:hover, .div_3:hover, .div_4:hover { transform: scale(4, 1); }
-
完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>广告条</title> <style> .con { position: relative; width: 1200px; height: 100px; margin: 0 auto; } .div_1, .div_2, .div_3, .div_4 { float: left; width: 300px; height: 100px; transition: all 1s; } .div_1 { background-color: aqua; transform-origin: 0% 50%; } .div_2 { background-color: rgb(0, 34, 255); transform-origin: 33.3% 50%; } .div_3 { background-color: rgb(0, 255, 76); transform-origin: 66.7% 50%; } .div_4 { background-color: rgb(255, 0, 30); transform-origin: 100% 50%; } .div_1:hover, .div_2:hover, .div_3:hover, .div_4:hover { transform: scale(4, 1); } </style> </head> <body> <div class="con"> <div class="div_1"></div> <div class="div_2"></div> <div class="div_3"></div> <div class="div_4"></div> </div> </body> </html>