一些用Css实现的效果

今天写一个笔试题，其中有一个是用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(0)}
to{transform:rotate(360deg)}
}
div{
    width: 100px;
    height: 100px;
    border: 1px solid;
    animation: rotating 1.2s linear infinite;
}

 

posted on 2019-03-02 00:09  袁233  阅读(190)  评论(0)  编辑  收藏  举报

导航