一些用Css实现的效果

时间：2023-12-23 09:37:56

今天写一个笔试题，其中有一个是用css实现直角梯形的效果，我给出的答案是：

  <style>

       .wrap{

           width: 100px;

           height: 50px;

           border-top:90px solid transparent;

           border-left:90px solid #ffff00;

       }

    </style>

</head>

<body>

    <div class="wrap">

    </div>　　

然后顺带回顾一下设置三角形的原理

1.首先设置宽和高为0

2.然后给边框加上宽高和相应颜色

<style>

       .wrap{

          width: 0px;

           height: 0px;

           border-right:100px solid transparent;

           border-left:100px solid transparent;

           border-bottom:100px solid #ffff00;

       }

    </style>

</head>

<body>

    <div class="wrap">

    </div>

拼多多二面让我写一个菊花的loading，我写不来，估计是凉了（心累了），先从一个css3的选择效果做起

<div></div>

@keyframes rotating{

    from{transform:rotate()}

to{transform:rotate(360deg)}

}

div{

    width: 100px;

    height: 100px;

    border: 1px solid;

    animation: rotating .2s linear infinite;

}

相关文章