面试官:写一个可以旋转的三角形?
三角形怎么写?
主要是使用 border 属性来进行实现,将 width | height 都设置为 0,
然后设置 border 为 200px,颜色则需要把其他三边都设置为 transparent
怎么实现旋转功能?
使用animation,具体来说就是使用 @keyframes
animation: tri 10s linear infinite;
@keyframes tri {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg)
}
}
<!--
* @Author: 18062706139 2279549769@qq.com
* @Date: 2022-10-16 13:18:22
* @LastEditors: 18062706139 2279549769@qq.com
* @LastEditTime: 2022-10-16 13:23:20
* @FilePath: /面试题.js/用css写一个不断旋转的三角形.html
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!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>Document</title>
</head>
<body>
<div class="tri">
</div>
</body>
<style>
.tri {
margin-left: 400px;
margin-top: 200px;
width: 0;
height: 0;
border: 200px solid;
border-color: transparent transparent transparent red;
animation: tri 10s linear infinite;
}
@keyframes tri {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
</style>
</html>