<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } .box{ width: 200px; height: 200px; background-color: aqua; transition-duration: 2s; transition-property: width; transition-timing-function: cubic-bezier(.06,1.31,.9,-0.69); } .box:hover{ width: 300px; background-color: #ff0789; } </style> </head> <body> <div class="box"></div> <!-- transition-duration: 2s; 过度时间 transition-property: width; 指定过度属性 transition-timing-function: cubic-bezier(); 过渡速度 用一条曲线确定 可以回头 贝塞尔曲线 http://cubic-bezier.com transition-delay: 4s; 延迟过渡 复合属性 transition: transition-property transition-duration transition-delay transition-timing-function 阴影 box-shadow: 0 0 20px 0 black inset box-shadow: 水平位移 竖直位移 模糊半径 阴影大小 阴影颜色 inset(阴影向内扩散) --> </body> </html>
