使用纯css制作扇形图，合并起来形成饼图：

应该知道css3中引入了圆角属性（border-radius），一旦设置这个值，边框即会出现圆角。同样，我们对正方形设置圆角，即可得到饼状图

html：<div id="circle">11</div>

css：

#circle{

width:0;

height:0;

border-radius:100px;

border-width:100px;

border-style:solid;

border-color: red blue green yellow;

line-height:99em;

overflow:hidden;

cursor:pointer;

margin: 30px auto;

}

效果：

4同样我们对其中三个边框设置透明色即可得到扇形

html：<div id="fan">11</div>

css:

#fan{

width:0;

height:0;

border-radius:100px;

border-width:100px;

border-style:solid;

border-color:red transparent transparent transparent;

line-height:99em;

overflow:hidden;

cursor:pointer;

margin: 30px auto;

}

效果：

本篇文章给大家带来的内容是关于网页背景怎么设置为纯黑色css样式，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

css背景颜色属性样式单词：background-color 代码简写 background

设置网页背景颜色background-color可以直接使用background节约代码。

纯黑色的颜色代码：#000000或缩写#000

最终背景颜色为黑色CSS代码：background:#000

整个网页背景颜色为黑色代码：

body{background:#000}解释：对body设置背景，即对整个网页背景设置默认样式。

背景样式扩展：

abc{background:#000}以上css代码代表，对象class=abc指定对象背景为黑色。

小结：

网页背景设置，只需要对body标签设置背景属性样式，如果是div或p等其它标签对象设置背景颜色，需要使用id或class引入设置对应背景颜色样式。css背景效果可以设置背景颜色、可以设置背景等各式各样根据需求的背景效果样式。

本篇文章给大家带来的内容是关于如何使用纯CSS实现方块跳跃的动画（附源码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

效果预览

源代码下载https://githubcom/comehope/front-end-daily-challenges

代码解读定义 dom，容器中包含 2 个子元素，分别代表 1 个女生和一群男生（4个），每个 span 元素代表 1 个人（1 个方块）：

<figure class="container">

<span class="girl"></span>

<p class="boys">

<span></span>

<span></span>

<span></span>

<span></span>

</p>

</figure>居中显示：

body {

margin: 0;

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}定义容器尺寸和它的子元素布局：

container {

width: 8em;

height: 1em;

font-size: 35px;

display: flex;

justify-content: space-between;

}画出 5 个方块，用边框作为辅助线帮助定位：

container span {

width: 1em;

height: 1em;

border: 1px dashed black; / 辅助线 /

}

boys {

width: 6em;

display: flex;

justify-content: space-between;

}用伪元素设置元素的样式，使它们变得柔和一些，为男生和男生填上不同的颜色，同时删掉上一步的辅助线：

container span::before {

content: '';

position: absolute;

width: inherit;

height: inherit;

border-radius: 15%;

box-shadow: 0 0 02em rgba(0, 0, 0, 03);

}

girl::before {

background-color: hotpink;

}

boys span::before {

background-color: dodgerblue;

}使 4 个男生色块的颜色逐渐变淡，增加一点层次感：

boys span:nth-child(1)::before {

filter: brightness(1);

}

boys span:nth-child(2)::before {

filter: brightness(115);

}

boys span:nth-child(3)::before {

filter: brightness(13);

}

boys span:nth-child(4)::before {

filter: brightness(145);

}接下来制作动画效果。

先增加女生移动的效果，同时颜色也做渐淡处理，后面其他动画的时间要保持一致，所以把动画时长设置为变量：

container span {

width: 1em;

height: 1em;

--duration: 3s;

}

girl {

animation: slide var(--duration) ease-in-out infinite;

}

@keyframes slide {

from {

transform: translateX(0);

filter: brightness(1);

}

to {

transform: translatex(calc(8em - (1em 125)));

filter: brightness(145);

}

}然后增加第 1 个男生跳开的动画效果，注意从 15% 到 35% 旋转的原点是在元素的正上方：

boys span {

animation: var(--duration) ease-in-out infinite;

}

boys span:nth-child(1) {

animation-name: jump-off-1;

}

@keyframes jump-off-1 {

0%, 15% {

transform: rotate(0deg);

}

35%, 100% {

transform-origin: -50% center;

transform: rotate(-180deg);

}

}参考第 1 个男生的动画效果，再增加另外 3 个男生跳开的动画效果，区别只是调整了关键帧的时间，依次后延 15% 的时间：

boys span:nth-child(2) {

animation-name: jump-off-2;

}

boys span:nth-child(3) {

animation-name: jump-off-3;

}

boys span:nth-child(4) {

animation-name: jump-off-4;

}

@keyframes jump-off-2 {

0%, 30% {

transform: rotate(0deg);

}

50%, 100% {

transform-origin: -50% center;

transform: rotate(-180deg);

}

}

@keyframes jump-off-3 {

0%, 45% {

transform: rotate(0deg);

}

65%, 100% {

transform-origin: -50% center;

transform: rotate(-180deg);

}

}

@keyframes jump-off-4 {

0%, 60% {

transform: rotate(0deg);

}

80%, 100% {

transform-origin: -50% center;

transform: rotate(-180deg);

}

}为第 1 个男生增加拟人的动画效果，这个效果写在 ::before 伪元素中，动画的过程是从正常到压扁、然后抻长、再压扁、最后恢复正常，注意从 25% 到 40% 的压扁变形，因为此时主元素已经翻个儿，所以 transform-origin 的原点和 从 5% 到 15% 的压扁变形的原点不一样：

boys span::before {

animation: var(--duration) ease-in-out infinite;

}

boys span:nth-child(1)::before {

filter: brightness(1);

animation-name: jump-down-1;

}

@keyframes jump-down-1 {

5% {

transform: scale(1, 1);

}

15% {

transform-origin: center bottom;

transform: scale(13, 07);

}

20%, 25% {

transform-origin: center bottom;

transform: scale(08, 14);

}

40% {

transform-origin: center top;

transform: scale(13, 07);

}

55%, 100% {

transform: scale(1, 1);

}

}参考第 1 个男生 ::before 伪元素的动画效果，再增加另外 3 个男生拟人的动画效果，区别只是调整了关键帧的时间，依次后延 15% 的时间：

boys span:nth-child(2)::before {

animation-name: jump-down-2;

}

boys span:nth-child(3)::before {

animation-name: jump-down-3;

}

boys span:nth-child(4)::before {

animation-name: jump-down-4;

}

@keyframes jump-down-2 {

20% {

transform: scale(1, 1);

}

30% {

transform-origin: center bottom;

transform: scale(13, 07);

}

35%, 40% {

transform-origin: center bottom;

transform: scale(08, 14);

}

55% {

transform-origin: center top;

transform: scale(13, 07);

}

70%, 100% {

transform: scale(1, 1);

}

}

@keyframes jump-down-3 {

35% {

transform: scale(1, 1);

}

45% {

transform-origin: center bottom;

transform: scale(13, 07);

}

50%, 55% {

transform-origin: center bottom;

transform: scale(08, 14);

}

70% {

transform-origin: center top;

transform: scale(13, 07);

}

85%, 100% {

transform: scale(1, 1);

}

}

@keyframes jump-down-4 {

50% {

transform: scale(1, 1);

}

60% {

transform-origin: center bottom;

transform: scale(13, 07);

}

65%, 70% {

transform-origin: center bottom;

transform: scale(08, 14);

}

85% {

transform-origin: center top;

transform: scale(13, 07);

}

100%, 100% {

transform: scale(1, 1);

}

}至此，女生从左侧移动到右侧的动画效果已经完成。

把所有动画属性都加上 alternate 参数，使所有动画都往复执行，就实现了从右侧再回到左侧的效果：

girl {

animation: slide var(--duration) ease-in-out infinite alternate;

}

boys span {

animation: var(--duration) ease-in-out infinite alternate;

}

boys span::before {

animation: var(--duration) ease-in-out infinite alternate;

}大功告成！

如上图所示，红色部分DIV宽度是100%，蓝色的是子元素，子元素有border-bottom，且文字右边有一个双箭头。现要求如下： 1、纯CSS实现，不使用JS和table。 2、文字因为是用户输入的，所以每一行的文字宽度都不是固定的，但是文字只考虑一行的情况，不考虑两行，可以用white-space:nowrap;禁止换行。 3、每个子元素右边的双箭头必须是对齐的，右边双箭头与最长那行文字的距离是10px固定的，其它行双箭头与该行双箭头对齐。 4、因为这个是手机端的网页，所以可以考虑用CSS3、HTML5，只要主流的手机浏览器支持即可不知道上面的要求，纯CSS有没有办法实现，具体的思路是什么，HTML可以随意写，只要能实现像中这样显示就可以。

回复讨论(解决方案)另外右边双箭头与最长那行文字的距离是10px固定的，其它行双箭头与该双箭头对齐

American Axle Germanic Axle Suspension Bogie Brake Drum Axle Brake Disc Brake Shoe Wheel Hub King Pin Series Fifth Wheel Series {margin:0;padding:0;outline:none;}body{font:menu;font-size:024rem;}a{text-decoration:none;color:#333;}a:hover{text-decoration:underline;color:#d00;}li{list-style:none;}img{border:none;vertical-align:top;}@font-face { font-family: 'iconfont'; src: url('//atalicdncom/t/font_1460087185_4783318eot'); / IE9/ src: url('//atalicdncom/t/font_1460087185_4783318eot#iefix') format('embedded-opentype'), / IE6-IE8 / url('//atalicdncom/t/font_1460087185_4783318woff') format('woff'), / chrome、firefox / url('//atalicdncom/t/font_1460087185_4783318ttf') format('truetype'), / chrome、firefox、opera、Safari, Android, iOS 42+/ url('//atalicdncom/t/font_1460087185_4783318svg#iconfont') format('svg'); / iOS 41- /}iprocat{background:url(/images/iprocat-bgjpg);text-align:center;overflow:hidden;}iprocat ul{display:inline-block;text-align:left;font-size:24rem;line-height:4rem;padding-bottom:24rem;}iprocat li{border-bottom:1px solid #ddd;position:relative;}iprocat li:before,iprocat li:after{content:'';border-bottom:1px solid #ddd;width:100%;position:absolute;bottom:-1px;}iprocat li:before{right:100%;}iprocat li:after{left:100%;}iprocat li a{color:#666;display:block;}iprocat li a:before{content:'\e604';font-family:'iconfont';float:right;color:#ddd;margin-left:1rem;}视觉上实现了，但是border-bottom是使用:before和:after拼合起来实现的，不知道有没有更好的办法

<ul class="tabs">

<li>

<input type="radio" name="tabs" id="tab1" checked />

<label for="tab1">选项卡 1</label>

<div id="tab-content1" class="tab-content">

<p>选项卡内容 1</p>

</div>

</li>

<li>

<input type="radio" name="tabs" id="tab2" />

<label for="tab2">选项卡 2</label>

<div id="tab-content2" class="tab-content">

<p>选项卡内容 2</p>

</div>

</li>

</ul>

CSS样式如下：

 {

  margin: 0;

  padding: 0;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

body {

  padding: 20px;

  text-align: left;

  font-family: Lato;

  color: #fff;

  background: #9b59b6;

}

tabs {

  width: 650px;

  float: none;

  list-style: none;

  position: relative;

  margin: 80px 0 0 10px;

  text-align: left;

}

tabs li {

  float: left;

  display: block;

}

tabs input[type="radio"] {

  position: absolute;

  top: -9999px;

  left: -9999px;

}

tabs label {

  display: block;

  padding: 14px 21px;

  border-radius: 2px 2px 0 0;

  font-size: 20px;

  font-weight: normal;

  text-transform: uppercase;

  background: #8e44ad;

  cursor: pointer;

  position: relative;

  top: 4px;

  -webkit-transition: all 02s ease-in-out;

  -moz-transition: all 02s ease-in-out;

  -o-transition: all 02s ease-in-out;

  transition: all 02s ease-in-out;

}

tabs label:hover {

  background: #703688;

}

tabs tab-content {

  z-index: 2;

  display: none;

  overflow: hidden;

  width: 100%;

  font-size: 17px;

  line-height: 25px;

  padding: 25px;

  position: absolute;

  top: 53px;

  left: 0;

  background: #612e76;

}

tabs [id^="tab"]:checked + label {

  top: 0;

  padding-top: 17px;

  background: #612e76;

}

tabs [id^="tab"]:checked ~ [id^="tab-content"] {

  display: block;

}

效果