css3

　css3：

　　1.边框：border

  • border-radius

  • box-shadow

  • border-image

/*css圆角*/
border-radius:25px;
    border-radius: 15px 50px 30px 5px;
    border-radius: 15px 50px;
    border-radius: 15px 50px 30px;
/*css阴影：注意着三个参数*/
box-shadow: 10px 10px 5px #888888;
​
​
/*css边界图片：只需要掌握两个循环和单个就行*/
    1.border-image: url(border.png) 30 stretch;/*一堆图片，图像平铺（重复），以填补该地区*/
    2.border-image: url(border.png) 30 round;/*四个图片，图像被拉伸以填补该地区*/

 

2.背景设置：background

  • background-image

  • background-size

  • background-origin

  • background-clip

/*添加图片：background-image/position/repeat*/
    background-image: url(img_flwr.gif), url(paper.gif); 
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
/*背景大小：background-size*/
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
/*选择填充范围：background-origin*/
    background:url(img_flwr.gif);
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-origin:content-box;
/*背景绘制：background-clip（重点：显示背景在那出现，从那个点开始绘制）*/
#example3 {
    border: 10px dotted black;
    padding:35px;
    background: yellow;
    background-clip: content-box;
}

 

 

　　3.渐变效果：

/*1.线性渐变 - 从上到下（默认情况下）*/
background-image: linear-gradient(#e66465, #9198e5);
/*2.线性渐变 - 从左到右*/
background-image: linear-gradient(to right, red , yellow);
/*3.线性渐变 - 对角*/
background-image: linear-gradient(to bottom right, red, yellow);
/*4.线性渐变 - 使用多个颜色节点*/
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
/*5.使用透明度：transparent
    rgba() 函数中的最后一个参数可以是从 0 到 1 的值，它定义了颜色的透明度：0 表示完全透明，1 表示完全不透明。
*/
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));

 

　　4.文本效果：box/text属性：

/*文本阴影*/
text-shadow: 5px 5px 5px #FF0000;
​
/*盒子阴影：也就是只有右边和下边*/
box-shadow: 10px 10px 5px #888888;
​
/*给阴影添加颜色*/
box-shadow: 10px 10px red;
​
/*给before/after中添加阴影效果*/
/*重点：添加卡片阴影效果*/
div.card {
    width: 250px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}
​
/*显示溢出效果：overflow*/
    overflow: hidden;
    text-overflow: clip; 
    overflow: hidden;
    text-overflow: ellipsis;

 

属性描述CSS
hanging-punctuation 规定标点字符是否位于线框之外。 3
punctuation-trim 规定是否对标点字符进行修剪。 3
text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。 3
text-emphasis 向元素的文本应用重点标记以及重点标记的前景色。 3
text-justify 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 3
text-outline 规定文本的轮廓。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3
text-shadow 向文本添加阴影。 3
text-wrap 规定文本的换行规则。 3
word-break 规定非中日韩文本的换行规则。 3
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。  

 

 

　　5.css2D转换：transform

/*translate（平移）：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动*/
transform: translate(50px,100px);
​
/*rotate(旋转)：在一个给定度数顺时针旋转的元素。*/
transform: rotate(30deg);
​
/*scale（缩放）:缩放为x、y轴的任意倍数*/
transform: scale(2,3); /* 标准语法：x方法为2倍，y放大为3倍 */
​
/*skew(倾斜角度)：表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0*/
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。
transform: skew(30deg,20deg);
​
/*综合上述所有能力的一个特性：matrix*/
    matrix 方法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能
transform:matrix(0.866,0.5,-0.5,0.866,0,0);
​
/*transform两个效果合成，可以不用上面那个matrix*/
transform: rotate(90deg) scale(2);

 

　　6.重点：（过渡）

CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点，必须规定两项内容：

  • 指定要添加效果的CSS属性

  • 指定效果的持续时间。

/*指定添加效果的css属性*/
div{
    transition: width 2s;
    -webkit-transition: width 2s; /* Safari */
}
div:hover{
    width:300px;
}
​
/*多项改变：和前面的2D转换联系起来*/
transition: width 2s, height 2s, transform 2s;
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style> 
div {
    width: 100px;
    height: 100px;
    background: red;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s; /* For Safari 3.1 to 6.0 */
    transition: width 2s, height 2s, transform 2s;
}
​
div:hover {
    width: 200px;
    height: 200px;
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
    transform: rotate(180deg);
}
</style>
</head>
<body>
<p><b>注意：</b>该实例无法在 Internet Explorer 9 及更早 IE 版本上工作。</p>
<div>鼠标移动到 div 元素上，查看过渡效果。</div>
</body>
</html>

 

属性描述CSS
transition 简写属性，用于在一个属性中设置四个过渡属性。 3
transition-property 规定应用过渡的 CSS 属性的名称。 3
transition-duration 定义过渡效果花费的时间。默认是 0。 3
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
transition-delay 规定过渡效果何时开始。默认是 0。  

 

 

　　7.动画实现（重点）

　第一步：添加动画空间animation

/*1.给按钮或者图片添加动画控件名字，持续时间，效果方式*/
            animation-name: drive;/*定义效果控件的名字*/
            animation-delay: 2s;/*设置动画效果延迟时间*/
            animation-duration: 1s;/*设置效果持续时间*/
            animation-fill-mode: forwards;/*设置效果结束位置：forwards，backwards，both*/
            /*设置动画循环播放的次数*/
            animation-iteration-count: 3;/*循环3次，无数次：infinite*/
            animation-direction: alternate;/*动画方向：normal：正向，reverse：反向，alternate：正向+反向，reverse alternate：反向+正向*/
            /*动画时速控件：
                1.ease：默认方法，初速度较慢，然后加速再减速
                2.ease-in：初速度最慢，然后一直加速
                3.ease-out：初速度最快，然后一直减速
                4.ease-in-out：初速度较慢，然后加速再减速，与ease的区别在于加速减速过程是对称的
                5.linear：恒速运动
            */
            animation-timing-function: linear;
​

 

 

第二步：使用@Keyframes添加关键帧然后使用transform实现过渡效果：

/*1.注意：使用的区域是动画控件的名字*/
        @keyframes drive {
            from{
                transform: translate(0);
            }
            to{
                transform: translate(700px);
            }
        }

 

eg：

<style>
html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
}
​
.grass, .sky, .road {
  position: relative;
}
​
.sky {
  height: 40%;
  background: skyblue;
}
​
.grass {
  height: 30%;
  background: seagreen;
}
​
.road {
  height: 30%;
  background: dimgrey;
  box-sizing: border-box;
  border-top: 10px solid grey;
  border-bottom: 10px solid grey;
  width: 100%;
}
​
.lines {
  box-sizing: border-box;
  border: 5px dashed #fff;
  height: 0px;
  width: 100%;
  position: absolute;
  top: 45%;
}
​
.animated {
  animation-name: drive;
  animation-duration: 5s;
  animation-fill-mode: both;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
​
.mario {
  position: absolute;
  top: -40px;
  left: 0px;
  z-index: 2;
  animation: drive 3s both infinite linear, jump 0.5s 1.2s ease-in-out infinite;
}
​
.luigi {
  position: absolute;
  top: -150px;
  left: 0;
  z-index: 1;
}
​
.cloud {
  position: absolute;
}
​
.cloud:nth-child(1) {
  width: 200px;
  top: 120px;
  opacity: 0.5;
  animation: wind 80s linear infinite reverse;
}
​
.cloud:nth-child(2) {
  width: 300px;
  top: 0;
  animation: wind 50s linear infinite reverse;
}
​
@keyframes drive {
  from {
    transform: translateX(-200px)
  }
  to {
    transform: translateX(1400px)
  }
}
​
@keyframes wind {
  from {
    left: -300px;
  }
  to {
    left: 100%;
  }
}
​
@keyframes jump {
  0% {
    top: -40px;
  }
  50% {
    top: -120px;
  }
  100% {
    top: -40px;
  }
}
</style>
​
<body>
      <div class="sky">
    <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/8ba2d4cc06e96162cbba.png" class="cloud">
    <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/8ba2d4cc06e96162cbba.png" class="cloud">
  </div>
  <div class="grass"></div>
  <div class="road">
    <div class="lines">
      <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/a3f630c957a4b32d0221.png" class="mario animated">
      <img src="http://lc-jOYHMCEn.cn-n1.lcfile.com/a1aa3ebfc1d96b954025.png" class="luigi animated">
    </div>
  </div>
</body>

 

　　8.分页导航：

　　1.鼠标悬停效果：

ul.pagination li a {
    transition: background-color .3s;
}

 

　　2.面包屑导航：display:inline(横向排列元素)

ul.breadcrumb {
    padding: 8px 16px;
    list-style: none;
    background-color: #eee;
}
​
ul.breadcrumb li {display: inline;}
​
ul.breadcrumb li+li:before {
    padding: 8px;
    color: black;
    content: "/\00a0";
}

 

 

　　9.框大小：box-sizing

　　10.Css3弹性盒子：(适用于div元素布局上)

属性描述
flex-direction 指定弹性容器中子元素排列方式
flex-wrap 设置弹性盒子的子元素超出父容器时是否换行
flex-flow flex-direction 和 flex-wrap 的简写
align-items 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
align-content 修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
justify-content 设置弹性盒子元素在主轴（横轴）方向上的对齐方式

 

/*flex-direction:决定项目的方向。*/
.flex-container { flex-direction: row(水平) | row-reverse(水平反) | column(竖直) | column-reverse;(竖直反) }
​
/*flex-warp:换行，规定flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向*/
.flex-container { flex-wrap: nowrap(不拆行或列) | wrap(必要时拆) | wrap-reverse;(相反拆) }
​
/*align-items:定义子项目对齐在那条基准线上：stretch：拉伸/center：基准线在中心/flex-start容器上边线/flex-end容器下边线*/
​
/*justify-content：设置子元素在主轴线上的对齐方式：flex-start/flex-end/center/space-between/space-around*/
​
​

　　align-items：

 

　　justify-content：

 

 

　　11.弹性盒子子元素属性：

order设置弹性盒子的子元素排列顺序。
flex-grow 设置或检索弹性盒子元素的扩展比率。
flex-shrink 指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
flex-basis 用于设置或检索弹性盒伸缩基准值。
flex 设置弹性盒子的子元素如何分配空间。
align-self 在弹性子元素上使用。覆盖容器的 align-items 属性。

 

　　1. flex属性

　　　　flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

　　　　flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

.flex-container .flex-item { flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; }

 

值描述
flex-grow 一个数字，规定项目将相对于其他元素进行扩展的量。
flex-shrink 一个数字，规定项目将相对于其他元素进行收缩的量。
flex-basis 项目的长度。合法值："auto"、"inherit" 或一个后跟 "%"、"px"、"em" 或任何其他长度单位的数字。
auto 与 1 1 auto 相同。
none 与 0 0 auto 相同。
initial 设置该属性为它的默认值，即为 0 1 auto。
inherit 从父元素继承该属性。

　　6. align-self属性

.flex-container .flex-item {
    align-self: auto | stretch | center | flex-start | flex-end | baseline | initial | inherit;
}
值描述
auto 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 "stretch"。
stretch 元素被拉伸以适应容器。
center 元素位于容器的中心。
flex-start 元素位于容器的开头。
flex-end 元素位于容器的结尾。
baseline 元素位于容器的基线上。
initial 设置该属性为它的默认值。
inherit 从父元素继承该属性。

 

 

　　12.多媒体查询（直接在css中返回页面的一些信息）

  • viewport(视窗) 的宽度与高度

  • 设备的宽度与高度

  • 朝向 (智能手机横屏，竖屏) 。

  • 分辨率

值描述
all 用于所有多媒体类型设备
print 用于打印机
screen 用于电脑屏幕，平板，智能手机等。
speech 用于屏幕阅读器 
/*通过屏幕尺寸变化实现多媒体查询功能*/
@media screen and (max-width: 480px) {/*在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色:*/
    body {
        background-color: lightgreen;
    }
}
​
@media screen and (min-width: 480px) {/*以下实例在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：*/
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left:216px;}
}
​
@media screen and (max-width: 600px) {/*在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏：*/
  div.example {
    display: none;
  }
}

 

 

posted @ 2021-01-20 15:21  焕不涣  阅读(104)  评论(0)  编辑  收藏  举报