CSS3基础1

背景
1. background-image
  1. 示例
```
#example1 { 
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top; 
    background-repeat: no-repeat, repeat; 
}
```
  2. 一样的功能推荐使用background，一行就可搞定
```
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
```
2. background-size
  1. 设置图片的宽度和高度
```
 background-size:80px 60px;
```
  2. CSS3以前，背景图像大小由图像的实际大小决定。
  3. 常用值还有：100% 100%，contain，over
3. background-origin
  1. background-origin 属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
  2. 图例
  3. 示例
```
background-origin:content-box;
```
4. background-clip
  1. CSS3中background-clip背景剪裁属性是从指定位置开始绘制。
  2. 示例
```
background-clip: content-box; 
```
5. 补充：CSS3 多重背景(multiple backgrounds)
  1. 多重背景，也就是CSS2里background的属性外加origin、clip和size组成的新background的多次叠加，缩写时为用逗号隔开的每组值；用分解写法时，如果有多个背景图片，而其他属性只有一个（例如background-repeat只有一个），表明所有背景图片应用该属性值。
  2. 示例
```
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
```
  3. 注意
    1. 用逗号隔开每组 background 的缩写值；
    2. 如果有 size 值，需要紧跟 position 并且用 "/" 隔开；
    3. 如果有多个背景图片，而其他属性只有一个（例如 background-repeat 只有一个），表明所有背景图片应用该属性值。
    4. background-color 只能设置一个。
圆角
1. 使用 CSS3 border-radius 属性，可以给任何元素制作 "圆角"。
2. 图例
3. 使用border-radius:50% 和 100%都可以做椭圆或者圆
渐变
1. 线性渐变
  1. 示例
```
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
```
  2. 参数说明
    1. directtion
      1. 示例
        /* 1.默认是从上至下 2.使用to right 表示从左至右 to bottom right等等 3.使用angle做更多的控制 */
    2. color-stop1、color-stop2...
      1. 设置颜色:这里十六进制或者rgb或者rgba都可以
      2. 注意:颜色后可以跟 数值% 表示 从元素出现方向在数值% 的位置
  3. 可重复的线性渐变
    1. 示例
```
#grad {
  /* 标准的语法 */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}
```
    2. 规则类似线性渐变
2. 径向渐变
  1. 语法
```
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
```
  2. 参数设置
    1. shape 参数定义了形状。它可以是值 circle 或 ellipse。其中，circle 表示圆形，ellipse 表示椭圆形。默认值是 ellipse。
    2. 其余类似线性渐变
  3. 可重复的径向渐变
    1. 示例
```
#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}
```

文本效果

text-shadow

示例

h1
{
    text-shadow: 5px 5px 5px #FF0000;
/*您指定了水平阴影，垂直阴影，模糊的距离，以及阴影的颜色：*/
}

box-shadow

示例


div {
    box-shadow: 10px 10px 5px #888888;
}

阴影叠加

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

text-overflow

ellipsis：会省略
clip：不省略

示例：

p.test1 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: clip; 
}
 
p.test2 {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis; 
}

word-wrap 换行
1. 如果某个单词太长，不适合在一个区域内，它扩展到外面：CSS3中，自动换行属性允许您强制文本换行 - 即使这意味着分裂它中间的一个字。
2. 示例
```
p {word-wrap:break-word;}
```

word-break 拆分换行

示例

p.test1 {
    word-break: keep-all; //不拆分
}
 
p.test2 {
    word-break: break-all; //拆分
}

备注

2D 转换
1. translate()
  1. 示例：
```
div
{
transform: translate(50px,100px);
-ms-transform: translate(50px,100px); /* IE 9 */
-webkit-transform: translate(50px,100px); /* Safari and Chrome */
}
```
  2. 说明：translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。
2. rotate()
  1. 示例：
```
div
{
transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(30deg); /* Safari and Chrome */
}
```
  2. 说明：rotate值（30deg）元素顺时针旋转30度。
3. scale()
  1. 示例：
```
-ms-transform:scale(2,3); /* IE 9 */
-webkit-transform: scale(2,3); /* Safari */
transform: scale(2,3); /* 标准语法 */
```
  2. 说明：scale（2,3）转变宽度为原来的大小的2倍，和其原始大小3倍的高度。
4. skew()
  1. 示例：
```
div
{
transform: skew(30deg,20deg);
-ms-transform: skew(30deg,20deg); /* IE 9 */
-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}
```
  2. 说明：skew(30deg,20deg) 元素在 X 轴和 Y 轴上倾斜 20 度 30 度。
5. matrix()
  1. 示例：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
  2. 说明：
    1. scaleX() (水平缩放)：控制元素水平方向的缩放。如果值为 1，则不进行水平缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
    2. skewY() (垂直倾斜)：控制元素在垂直方向上的倾斜。
    3. skewX() (水平倾斜)：控制元素在水平方向上的倾斜。
    4. scaleY() (垂直缩放)：控制元素垂直方向的缩放。如果值为 1，则不进行垂直缩放；如果大于 1，则放大；如果在 0 和 1 之间，则缩小。
    5. translateX() (水平平移)：控制元素在水平方向上的平移量。
    6. translateY() (垂直平移)：控制元素在垂直方向上的平移量。即在不变换的情况下是matrix(1, 0, 0, 1, 0, 0)

过渡

示例

div
{
    transition: width 1s linear 2s; 
    /* 简写属性，用于在一个属性中设置四个过渡属性。*/
    /* Safari */
    -webkit-transition:width 1s linear 2s;
}

参数说明

    transition-property: width;//规定应用过渡的 CSS 属性的名称。
    transition-duration: 1s;//	定义过渡效果花费的时间。默认是 0
    transition-timing-function: linear;//规定过渡效果的时间曲线。默认是 "ease"。
    transition-delay: 2s;//规定过渡效果何时开始。默认是 0。

补充

鼠标悬浮过渡效果

div{
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: all 2s;
}

div:hover{
  background-color: #00f;
  transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
}

黑幕样式

<p>这是测试<span class="mask">并且被掩盖的</span>文字！</p>
<style>
.mask {
    background-color: #252525;
    color: #252525;
    transition: color 0.5s;
}

.mask:hover {
    color: #ffffff;
}
</style>

左右两个半屏，鼠标移上后就会全屏

<div class="left"></div>
<div class="right"></div>
<style>
.left{
    width:50%;
    height:50px;
    background:#C00;
    position:absolute;
    top:0;
    left:0;
    transition:0.6s;/*动画*/
    -moz-transition:0.6s; /* Firefox 4 */
    -webkit-transition:0.6s; /* Safari and Chrome */
    -o-transition:0.6s; /* Opera */
}
.right{
    width:50%;
    height:50px;
    background:#03C;
    position:absolute;
    top:0;
    right:0;
    transition:0.6s;/*动画*/
    -moz-transition:0.6s; /* Firefox 4 */
    -webkit-transition:0.6s; /* Safari and Chrome */
    -o-transition:0.6s; /* Opera */
}
.left:hover{
    width:100%;
    z-index:99;
}
.right:hover{
    width:100%;
    z-index:99;
}
</style>

动画

制作动画

第一种

@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    from {background: red;}
    to {background: yellow;}
}

第二种


@keyframes myfirst
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}
 
@-webkit-keyframes myfirst /* Safari 与 Chrome */
{
    0%   {background: red; left:0px; top:0px;}
    25%  {background: yellow; left:200px; top:0px;}
    50%  {background: blue; left:200px; top:200px;}
    75%  {background: green; left:0px; top:200px;}
    100% {background: red; left:0px; top:0px;}
}

设置动画属性

设置所有属性

div
{
    animation-name: myfirst;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    /* Safari 与 Chrome: */
    -webkit-animation-name: myfirst;
    -webkit-animation-duration: 5s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-delay: 2s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-play-state: running;
}

设置所有属性简写

div
{
    animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 与 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
}

参数列表

行星运动

<div class="solarsys">
  <!--太阳-->
  <div class='sun'></div>

  <!--水星轨道-->
  <div class='mercuryOrbit'></div>

  <!--水星-->
  <div class='mercury'></div>

  <!--金星轨道-->
  <div class='venusOrbit'></div>

  <!--金星-->
  <div class='venus'></div>

  <!--地球轨道-->
  <div class='earthOrbit'></div>

  <!--地球-->
  <div class='earth'></div>

  <!--火星轨道-->
  <div class='marsOrbit'></div>

  <!--火星-->
  <div class='mars'></div>

  <!--木星轨道-->
  <div class='jupiterOrbit'></div>

  <!--木星-->
  <div class='jupiter'></div>

  <!--土星轨道-->
  <div class='saturnOrbit'></div>

  <!--土星-->
  <div class='saturn'></div>

  <!--天王星轨道-->
  <div class='uranusOrbit'></div>

  <!--天王星-->
  <div class='uranus'></div>

  <!--海王星轨道-->
  <div class='neptuneOrbit'></div>

  <!--海王星-->
  <div class='neptune'></div>
</div>
<style>
.solarsys{
  width: 800px;
  height: 800px;;
  position: relative;
  margin: 0 auto;
  background-color: #000000;
  padding: 0;
  transform: scale(1);
}

/*太阳*/
.sun {
  left:357px;
  top:357px;
  height: 90px;
  width: 90px;
  background-color: rgb(248,107,35);
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgb(248,107,35), -5px -5px 10px rgb(248,107,35), 5px -5px 10px rgb(248,107,35), -5px 5px 10px rgb(248,107,35);
  position: absolute;
  margin: 0;
}

/*水星*/
.mercury {
  left:337.5px;
  top:395px;
  height: 10px;
  width: 10px;
  background-color: rgb(166,138,56);
  border-radius: 50%;
  position: absolute;
  transform-origin: 62.5px 5px;
  animation: rotate 1.5s infinite linear;
}

/*水星轨道*/
.mercuryOrbit {
  left:342.5px;
  top:342.5px;
  height: 115px;
  width: 115px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  margin: 0px;
  padding: 0px;
}

/*金星*/
.venus {
  left:309px;
  top:389px;
  height: 22px;
  width: 22px;
  background-color: rgb(246,157,97);
  border-radius: 50%;
  position: absolute;
  transform-origin: 91px 11px;
  animation: rotate 3.84s infinite linear;
}

/*金星轨道*/
.venusOrbit {
  left:320px;
  top:320px;
  height: 160px;
  width: 160px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*地球*/
.earth {
  left:266.5px;
  top:391px;
  height: 18px;
  width: 18px;
  background-color: rgb(115,114,174);
  border-radius: 50%;
  position: absolute;
  transform-origin: 134px 9px;
  animation: rotate 6.25s infinite linear;
}

/*地球轨道*/
.earthOrbit {
  left:275px;
  top:275px;
  height: 250px;
  width: 250px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*火星*/
.mars {
  left:222.5px;
  top:392.5px;
  height: 15px;
  width: 15px;
  background-color: rgb(140,119,63);
  border-radius: 50%;
  position: absolute;
  transform-origin: 177.5px 7.5px;
  animation: rotate 11.75s infinite linear;
}

/*火星轨道*/
.marsOrbit {
  left:230px;
  top:230px;
  height: 340px;
  width: 340px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*木星*/
.jupiter {
  left:134px;
  top:379px;
  height: 42px;
  width: 42px;
  background-color: rgb(156,164,143);
  border-radius: 50%;
  position: absolute;
  transform-origin: 266px 21px;
  animation: rotate 74.04s infinite linear;
}

/*木星轨道*/
.jupiterOrbit {
  left:155px;
  top:155px;
  height: 490px;
  width: 490px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*土星*/
.saturn {
  left:92px;
  top:387px;
  height: 26px;
  width: 26px;
  background-color: rgb(215,171,68);
  border-radius: 50%;
  position: absolute;
  transform-origin: 308px 13px;
  animation: rotate 183.92s infinite linear;
}

/*土星轨道*/
.saturnOrbit {
  left:105px;
  top:105px;
  height: 590px;
  width: 590px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*天王星*/
.uranus {
  left:41.5px;
  top:386.5px;
  height: 27px;
  width: 27px;
  background-color: rgb(164,192,206);
  border-radius: 50%;
  position: absolute;
  transform-origin: 358.5px 13.5px;
  animation: rotate 524.46s infinite linear;
}

/*天王星轨道*/
.uranusOrbit {
  left:55px;
  top:55px;
  height: 690px;
  width: 690px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

/*海王星*/
.neptune {
  left:10px;
  top:390px;
  height: 20px;
  width: 20px;
  background-color: rgb(133,136,180);
  border-radius: 50%;
  position: absolute;
  transform-origin: 390px 10px;
  animation: rotate 1028.76s infinite linear;
}

/*海王星轨道*/
.neptuneOrbit {
  left:20px;
  top:20px;
  height: 760px;
  width: 760px;
  background-color: transparent;
  border-radius: 50%;
  border-style: dashed;
  border-color: gray;
  position: absolute;
  border-width: 1px;
  /*margin: 100px;*/
  /*transform-origin: -75px -75px;*/
  /*animation: rotate 4s infinite linear;*/
  margin: 0px;
  padding: 0px;
}

@keyframes rotate {
  100% {
    transform: rotate(-360deg);
  }
}
</style>

注意：animation 并不太注重语法顺序（除了【duration / 动画用时】一定在【delay / 动画延时】之前），但在 -webkit-animation （主要针对 "Safari"）中，不能以 -webkit-animation-name 来结尾：
```
animation: myfirst 5s linear 2s infinite alternate;
animation: 5s linear 2s infinite myfirst alternate;
animation: 5s 2s infinite alternate linear myfirst;
// etc... 都是可以的
```

CSS3基础1

jQuery 教程 (一)

Web开发基础：JQuery详解，web开发增强

jQuery前端框架 - 一小时了解与使用

Web前端教程零基础入门，html5移动web开发，jquery语法特点，前端面试题汇总

使用CDN提高jQuery加载速度

利用jQuery实现动态加载页面内容并融入当前页面的全面解析

【ECharts】雷达图

vue3 ts项目中封装3d单柱柱状图

vue脚手架中使用echarts视图

让Echarts柱状图动起来

前端哥

jQuery 教程 (一)

select 多选联动

Web开发基础：JQuery详解，web开发增强

jQuery前端框架 - 一小时了解与使用

Web前端教程零基础入门，html5移动web开发，jquery语法特点，前端面试题汇总

jQuery2 高级教程（九）

使用CDN提高jQuery加载速度

利用jQuery实现动态加载页面内容并融入当前页面的全面解析

jQuery2 秘籍（七）

【ECharts】雷达图

1
【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001

2
使用CDN提高jQuery加载速度

2024-08-24 23:08:211000

3
小兔鲜儿网页首页制作黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000

4
《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

5
npm的使用

2024-08-18 00:08:131000

6
JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000

7
在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000

8
成为优秀的TS体操高手之 TS 类型体操前置知识储备

2024-06-10 11:06:351000

9
django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000

10
html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000