css3 书写 动画三角形

<!DOCTYPE html> <html lang="en">
<head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         div {             position: relative;             width: 249px;             height: 35px;             border: 1px solid #000;         }                  div::after {             content: "";             position: absolute;             top: 8px;             right: 15px;             width: 10px;             height: 10px;             border-right: 1px solid red;             border-bottom: 1px solid red;             transform: rotate(45deg);             /* 过渡效果 */             transition: all 0.2s;         }         /*  鼠标经过div 里面的三角形旋转  */                  div:hover::after {             transform: rotate(225deg);         }     </style> </head>
<body>     <div></div> </body>
</html>
上一篇:CSS 23 水平居中


下一篇:高维数据可视化之t-SNE算法