Css 画出一个扇形，附代码

lt;div class="sector"></div>

.sector{
      width: 200px;
      height: 200px;
      border-radius: 200px;
      background-color: deepskyblue;
      position: relative;
    }
    .sector::before{
      content: "";
      width: 200px;
      height: 200px;
      position: absolute;
      background-color: white;
      border-radius: 200px;
      /*裁减半圆，再做旋转*/
      clip: rect(0px,100px,200px,0);
      transform: rotate(-60deg);
    }
    .sector::after{
      content: "";
      width: 200px;
      height: 200px;
      position: absolute;
      background-color: white;
      border-radius: 200px;
      /*裁减半圆，再做旋转*/
      clip: rect(0px,200px,200px,100px);
      transform: rotate(60deg);
    }

方式二

<>
  <style>
    #demo {
      position: relative;
      width: 50px;
      height: 50px;
      overflow: hidden;
    }
    #circle {
      position: absolute;
      width: 100px;
      height: 100px;
      background-color: black;
      border-radius: 50%;
    }
  </style>
  <body>
    <div id="demo">
      <div id="circle"></div>
    </div>
  </body>
</>

方式三

一天

1.用js写一个随机生成指定字符串的方法。

2.给定一个span标签，用纯css并且用3种方式实现一个三角形。

第二天

1.用至少3种方式实现数组去重。

2.给定一个div标签，用纯css实现一个水波动画(2种方法)。

（用::before和::after伪对象也可以实现）

我自己是一名从事了多年开发的web前端老程序员，目前辞职在做自己的web前端私人定制课程，今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货，各种框架都有整理，送给每一位前端小伙伴，想要获取的可以关注我的头条号并在后台私信我：前端，即可免费获取。

第三天

1.js实现一个深拷贝和浅拷贝。

2.给定一个div标签，用3种方式实现其子元素水平垂直居中。

【周末福利打卡】

1.用css画一个立方体。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 .container {
 position: relative;
 width: 300px;
 height: 300px;
 margin: 120px auto;
 transform-style: preserve-3d;
 transform: rotateX(-33.5deg) rotateY(45deg);
 transform-origin: 150px 150px;
 animation: rotate 3s infinite;
 }
 .container .page {
 position: absolute;
 width: 200px;
 height: 200px;
 text-align: center;
 line-height: 200px;
 color: #fff;
 }
 .container .page:first-child {
 background-color: rgba(0,0,0,.2);
 }
 .container .page:nth-child(2) {
 transform: rotateX(90deg);
 transform-origin: 0 0;
 transition: transform 3s;
 background-color: rgba(179, 15, 64, 0.6);
 }

 .container .page:nth-child(3) {
 transform: translateZ(200px);
 background-color: rgba(22, 160, 137, 0.7);
 }

 .container .page:nth-child(4) {
 transform: rotateX(-90deg);
 transform-origin: -200px 200px;
 background-color: rgba(210, 212, 56, 0.2);
 }
 .container .page:nth-child(5) {
 transform: rotateY(-90deg);
 transform-origin: 0 0;
 background-color: rgba(201, 23, 23, 0.6);
 }
 .container .page:nth-child(6) {
 transform: rotateY(-90deg) translateZ(-200px);
 transform-origin: 0 200px;
 background-color: rgba(16, 149, 182, 0.2);
 }

 @keyframes rotate {
 0% {
 transform: rotateX(-33.5deg) rotateY(45deg);
 }
 100% {
 transform: rotateX(-33.5deg) rotateY(405deg);
 }
 }
</style>
</head>
<body>
 <div class="container">
 <div class="page">A</div>
 <div class="page">B</div>
 <div class="page">C</div>
 <div class="page">D</div>
 <div class="page">E</div>
 <div class="page">F</div>
 </div>
</body>
</html>

2. 用js正则实现去除文本中的html标签。

第五天

1.用promise封装一个自己的ajax库。

思路大致是这样的,你们也可以根据业务自己封装更复杂的ajax库,比如添加请求响应拦截器

2.用css实现footer固定在底部的效果(至少2种方法)。

第六天

1.判断一个字符串中出现次数最多的字符，统计这个次数

2. 对 BFC 规范(块级格式化上下文：block formatting context)的理解

第七天

1.用js实现判断设备类型以及浏览器类型

2. 用至少2种方法实现css定位中fixed(固定定位)的效果

其次，用定位也可以实现。

第八天

1.用js实现一个可以自定义格式的时间函数

2. 用css实现一个进度条动画

用css3实现惊艳面试官的背景即背景动画（高级附源码）

第九天

1. 用js计算斐波那契数列的第n项

2. 用css画一个扇形

css实现扇形可以用伪类矩形旋转一个角度,来遮挡父容器的圆形,父容器溢出隐藏。

第十天

1. 解释一下在js里，0.1+0.2为什么等于0.30000000000000004，如何通过代码解决这个问题？

原文链接：https://mp.weixin.qq.com/s/kqk7ZUNvUp0EDvVNYpq8yw
作者：趣谈前端

近每天都带一个苹果加餐，有次吃到一个十分漂亮的红苹果，突然觉得，可以试着画一个苹果看看。

之前确实无法想象，可以使用CSS能画出一个苹果。

先看效果：

你没有看错，这个不是真苹果。仅仅一百多行代码就可以实现的CSS的红苹果。我自己看到最终效果都惊呆了。

第一步画出苹果的轮廓：


.apple {
  position: relative;
  width: 300px;
  height: 270px;
  background-color: #bf2934;
  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
}

第二步：将苹果变得更加立体

1）右上角使用亮色内阴影，画出高光效果

2）左下角使用两层暗色内阴影，画出背光的暗色效果

3）左上角增加一个亮色高光

4）整体增加径向渐变的背景，将重心高光，四周暗色


.apple {
  position: relative;
  width: 300px;
  height: 270px;
  background: radial-gradient(#0000, rgba(0, 0, 0, .1)),
    radial-gradient(rgba(239, 156, 109, .2), #0000);
  background-color: #bf2934;
  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
  box-shadow: inset 30px -20px 30px 20px rgba(0, 0, 0, .15),
    inset 10px -10px 15px 0 rgba(0, 0, 0, .15),
    inset 10px 10px 5px 0 rgba(255, 255, 255, .05),
    inset -10px 10px 30px 10px rgba(237, 115, 84, .3);
}

第三步：增加光源反光的高亮效果

使用before伪元素，画一个亮色的椭圆。橘色的阴影。然后整体模糊一下

.apple::before {
  position: absolute;
  left: 135px;
  top: 50px;
  content: '';
  width: 80px;
  height: 30px;
  transform: skew(-20deg) rotate(10deg);
  border-radius: 45%;
  background: rgba(255, 255, 255, .65);
  box-shadow: 2px 10px 30px 22px rgba(239, 156, 109, 1);
  filter: blur(5px);
}

哇，一不小心，画出来了一个西红柿

好吧，这个时候，我其实可以停下来，先发一篇画西红柿的文章了。

第四步：准备一下顶部叶柄的凹陷

这个凹陷效果使用after伪元素，画一个黑色透明色渐变的椭圆，然后使用clip-path，截取顶部扇形部分。

.apple::after {
  position: absolute;
  left: 90px;
  top: 2px;
  width: 120px;
  background: radial-gradient(rgba(0, 0, 0, .3), rgba(239, 156, 109, .2));
  height: 30px;
  content: '';
  border-radius: 50%;
  filter: blur(2px);
  clip-path: polygon(50% 55%, 150% 0, -50% 0);
  filter: blur(1px);
}

真是一个漂亮的西红柿。。。。。。。

苹果和西红柿的区别，主要是，苹果没有那么的光滑，颜色没有这么完美。我们需要一些杂色。

第五步：增加杂色条纹

好吃的苹果，都有纵向的条纹杂色。这里我们是模糊后的border来模拟。由于需要很多杂色，这里使用js添加，稍微做点随机。


.stripe {
  position: absolute;
  width: 300px;
  height: 270px;
  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
  border-right: solid 2px rgba(239, 156, 109, .2);
  transform: scaleX(.9);
  filter: blur(4px);
}

function addStripe() {
  var fragment = document.createDocumentFragment()
  var count = 15
  for (var i = -count; i < count; i++) {
    var stripe = document.createElement('div')
    stripe.className = 'stripe'
    stripe.style.opacity = Math.max(1, 0.5 + Math.random())
    stripe.style.transform = `scaleX(${(i / count + Math.random() * 0.2).toFixed(2)})`
    fragment.appendChild(stripe)
  }
  document.querySelector('.apple').appendChild(fragment)
}

是不是突然就像苹果了

第六步：增加噪点

好吃的苹果，会有很多小小的斑点。这里，我们使用js增加一些随机的斑点。

.spot {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(239, 156, 109, .6);
  filter: blur(1px);
}

function addSpot() {
  var count = 60
  var fragment = document.createDocumentFragment()
  for (var i = 0; i < count; i++) {
    var spot = document.createElement('div')
    spot.className = 'spot'
    spot.style.left = 5 + ~~(Math.random() * 90) + '%'
    spot.style.top = 5 + ~~(Math.random() * 90) + '%'
    spot.style.opacity = 0.2 + Math.random() * 0.4
    spot.style.transform = `scaleX(${Math.random() * 0.8 + 0.2}) scaleY(${Math.random() * 0.8 + 0.2}) rotate(${~~(360 * Math.random())}deg)`
    fragment.appendChild(spot)
  }
  document.querySelector('.apple').appendChild(fragment)
}

苹果变得更加诱人了。

再做一些细节优化。

第七部：给苹果加个叶柄。

买过西瓜的都知道，叶柄是证明西瓜新鲜与否的标志。苹果亦然。

.petiole {
  position: absolute;
  transform: translate(155px, -48px) rotate(35deg);
  width: 20px;
  height: 60px;
  border-top: solid 15px transparent;
  border-left: solid 10px rgb(162, 76, 9);
  border-bottom: solid 8px transparent;
  border-radius: 50%;
}
.petiole.left {
  transform: translate(154px, -49px) rotate(35deg);
  border-left-color: rgb(123, 48, 24);
}

<div class="apple">
  <div class="petiole left"></div>
  <div class="petiole"></div>
</div>

是不是新鲜很多。

最后，我们给苹果加个阴影，看着更加立体一点。

.shadow {
  position: absolute;
  width: 300px;
  height: 270px;
  background-color: rgba(0, 0, 0, .15);
  transform-origin: 50% 100%;
  transform: translate(5px, 5px) skew(60deg) scaleY(.25);
  border-radius: 160px 150px 145px 150px/160px 140px 210px 190px;
  box-shadow: 0 0 20px rgba(0, 0, 0, .15);
  filter: blur(4px);
}

娇艳欲滴的大苹果，完成！！！！

代码仓库地址：

https://github.com/shb190802/html5

演示地址：

http://suohb.com/demo/win/apple.html

在线咨询

上一篇：如何在浏览器账中查看网页的HTML源代码？
下一篇：一篇文章教会你使用html+css3制作GIF图

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Css 画出一个扇形，附代码

您的项目需求