html5源码笔记【爱创课堂专业前端培训】

一、背景相关属性
Background-color

Background-image

Background-repeat

Background-position

Backgroound-attachment

Background-size

Background 可以同时添加多张背景图片，如果有颜色，颜色搁在最后一个背景图片的前面

Background-origin 背景起源，背景原点位置

Backgroufn-clip 裁剪，裁剪某个位置

属性值： border-box content-box padding-box

    #box{height: 400px;width: 400px;border: solid 1px;/* vertical-align: -100px;; */

        background-image: url(./img/1.jpg); *//* background-image: url(./img/9.jpg); *//* background-repeat: no-repeat;background-size: 100px;background-position: center; */background:url(./img/1.jpg) right top no-repeat,rgba(0,0,0,.5) url(./img/9.jpg) 0 100% no-repeat;background-size: 100px,50px;}#box2{height: 200px;width: 200px;padding: 50px;border:solid 50px red;/* vertical-align: 100px; */background:url(./img/1.jpg) no-repeat 50% 50%/100% 100%;/* background-origin: content-box;  设置背景原点从内容开始*/background-origin: padding-box;  /*默认，含padding *//*  background-origin: border-box; 设置背景原点从边框开始 *//* background-clip: border-box; *//* background-clip: padding-box; */background-clip: content-box;}

二、阴影
2.1 盒子阴影
Box-shadow:水平方向阴影垂直方向阴影模糊距离阴影大小阴影颜色阴影位置;

<style>.sun{height: 100px;width: 100px;border-radius: 50%;background: red;box-shadow: 0 0 6px 8px orange,0 0 10px 12px yellow;position: fixed;top: 50px;left: 100px;}.cloud{width: 80px;height: 80px;background: white;border-radius: 50%;box-shadow:40px -30px 0px 4px white, 96px 2px 0px 8px white, -29px -14px 0px 4px white;position: fixed;top: 250px;left:400px;}</style>

<div class="sun"></div><div class="cloud"></div>

2.2 文本阴影
Text-shadow: 水平方向阴影垂直方向阴影模糊距离阴影颜色;

        text-shadow: 2px 2px 2px black;}

三、渐变色（属性值）
2.1 线性渐变 linear-gradient()
需要给多个颜色值，默认从上往下渐变，可以设置渐变的方向：

两种方式：

Left 从哪边开始

To right 向哪边渐变

注意：CSS3属性需要做浏览器兼容

-webkit- 谷歌或者苹果

-ms- IE

-moz- 火狐

-o- 欧朋

    div.box1{height: 200px;width: 100%;background-image: -webkit-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Safari 5.1 to 6.0 */background-image: -moz-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Firefox 3.6 to 15 */background-image: -o-linear-gradient(left top,red,orange,green,lightgreen,blue);/* Opera 11.1 to 12.0 */background-image: linear-gradient(to right bottom,red,orange,green,lightgreen,blue);/*标准语法*/}div.box2{height: 400px;width: 400px;margin-left: 200px;border: solid 1px;background-image: linear-gradient(to left bottom,blue 20%,red 40%,yellow,green,gray,pink,purple);}

2.2 径向渐变 radial-gradient()
确定圆的类型

ellipse (默认): 指定椭圆形的径向渐变。

circle ：指定圆形的径向渐变

定义渐变的位置。可能值：

center（默认）：设置中间为径向渐变圆心的纵坐标值。

top：设置顶部为径向渐变圆心的纵坐标值。

bottom：设置底部为径向渐变圆心的纵坐标值。

div.box3{width: 600px;/* background-image: radial-gradient(circle,red,blue,green,orange,yellow,pink,purple); */background-image: radial-gradient(circle at top,red 5%,blue 10%,green 15%,orange 20%,yellow 30%,pink 50%,purple 80%);}

三、变形transform
值函数：

Translate(x,y) 偏移，两个参数分别为x方向和y方向偏移；如果只有一个值，就是代表向x偏移

translateX(x)

translateY(y)

        background: red;/* margin-top: 100px; *//* position: relative;*//* position: fixed; *//* position: absolute;top: 100px;  *//* 向下偏移100px *//* transform: translateY(100px); *//*  向右偏移200px*//* transform: translateX(200px); *//* 同时设置向下偏移100px向右偏移200px *//* transform: translate(200px,100px) */transform: translate(100px);

Scale(x,y) 缩放，两个参数分别为x方向和y方向缩放值；如果只有一个值，代表元素两个方向的缩放值

ScaleX(x)

scaleY(y)

/* width: 1px; */

        display: inline-block;margin-left: 400px;background: pink;/* x方向缩小一半 *//* transform: scaleX(0.5); *//* y方向变大一半 *//* transform: scaleY(2); *//* 设置x、y方向的缩放值 *//* transform: scale(0.9,0.5); */transform: scale(0.5);

倾斜 skew(x deg);

skewX()

skewY()

        display: inline-block;height: 400px;margin-left: 200px;background: orange;/* x方向倾斜30deg *//* transform: skewX(30deg); *//* y方向倾斜30deg *//* transform: skewY(60deg); */transform: skewX(30deg);

旋转rotate(z deg) 平面旋转

RotateX() x轴旋转

rotateY() y轴旋转

rotateZ() z旋转，平面旋转

   display: inline-block;height: 400px;margin-left: 200px;background: green;/* x轴旋转30deg *//* transform: rotateX(30deg); *//* y轴旋转30deg *//* transform: rotateY(60deg); */transform: rotateZ(60deg)

四、过渡transition
过渡是从一种效果到另外一种效果的演变，需要触发条件

两个必要的条件：

过渡属性 transition-property

过渡的时间transition-duration

除了以上两个属性：

过渡的作用曲线 transition-timing-function

过渡的延迟时间 transition-delay

    #wrap{height: 200px;width: 200px;margin: 200px auto;border: solid 1px;background: yellow;/* 设置过渡的必要条件 *//* 条件一：过渡的属性 *//* -webkit-transition-property: transform;-moz-transition-property: transform;-o-transition-property: transform;transition-property: transform; *//* 条件二：过渡的时间 *//* -webkit-transition-duration: 5s;-moz-transition-duration: 5s;-o-transition-duration: 5s;transition-duration: 5s; *//* 延迟过渡 *//* -webkit-transition-delay: 2s;-moz-transition-delay: 2s;-o-transition-delay: 2s;transition-delay: 2s; *//* 过渡的速率 *//* -webkit-transition-timing-function: linear;-moz-transition-timing-function: linear;-o-transition-timing-function: linear;transition-timing-function: linear; *//* 简写属性 all代表过渡所有属性 贝塞尔曲线*/-moz-transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;-o-transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;-webkit-transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;transition: all 5s cubic-bezier(0.785, 0.135, 0.15, 0.86) .5s;}#wrap:hover{transform: scale(2);background: red;}

过渡案例：

1，2，3…

五、动画animation
从一种效果过渡到另外一种，这个不需要任何触发条件，自动播放；

两个必要条件：

过渡的名称 animation-name

过渡的时间 animation-duration

其他属性：

过渡的速率 animation-timing-function

延迟过渡的时间 animation-delay

播放次数 animation-iteration-count

动画播放顺序 animation-direction

动画集规则@keyframes name{ from … to}

由于form…to 过渡效果太少，一般我们会利用百分比 0% ， 10%，…,90%,100%

    .wrap{height: 400px;width: 400px;margin: 100px auto;/* border: solid 1px; */position: relative;}.circle{height: 40px;width: 40px;background: red;border-radius: 50%;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);/* 动画的两个必要条件 *//* 动画过渡的名称 */animation-name: myBall;/* 动画过渡的时间 */animation-duration: 5s;/* 设置播放次数 */animation-iteration-count: infinite;/* 设置播放的顺序 alternate奇数次正向播放  偶数次反向播放*/animation-direction: alternate;/* 延迟两秒播放 */animation-delay: 2s;/* 播放速率 ease  ease-in  ease-out  ease-in-out  linear  贝塞尔曲线*/animation-timing-function: linear;}/* 声明动画集规则 */@keyframes myBall{from{transform: scale(0)}to{transform: scale(10)}}

html5源码笔记【爱创课堂专业前端培训】相关推荐

web前端源码笔记_canvas【爱创课堂专业前端培训】
爱创课堂前端源码笔记--canvas 一.canvas canvas是HTML5新增的标签用于提供"画布" 可以通过canvas元素获取对应的"上下文"(可以理 ...
零基础能不能学习web前端开发？【爱创课堂专业前端培训】
web前端日趋火热,不只招聘市场需求量大,还有一个重要的原因便是,入行门槛低,入门简单.单是关于许多小白同学来说还是有点担心,不知道零基础能不能学习web前端开发? 以为没那么简单.其实web前端是一 ...
小白前端学习流程【爱创课堂专业前端培训】
对于零基础非科班的同学来说,一个良好的前端学习流程和学习误区是需要我们去规避和计划的,爱创课堂目前专注于前端培训,总结了以下几点,给大家一个参考. 在开始学习之前你需要做到以下5点: 第一:需要达到什 ...
css源码笔记（四）【爱创课堂专业前端培训】
复习: 1.1 布局模型--前端培训机构与盒子模型一样是最基础.最核心的东西,但是布局模型是从盒子模型基础上进行布局的. 流动模型flow.浮动模型float.层模型:绝对定位.固定定位流动模型f ...
html5源码笔记（四）【爱创课堂专业前端培训】
一.响应式的实现-媒介查询 @media 实现方式一:把media限定到link中实现方式二:把media写到css代码中留活口,ie兼容 @charset "utf-8"; ...
html5源码笔记（三）【爱创课堂专业前端培训】
一.常见的布局 1.1 固定布局(基本的布局方式) 1.2 百分比布局(流式布局) width.heigth.padding.margin使用百分比进行布局 width.padding.margin相 ...
JavaScript源码笔记（第七天）—爱创课堂专业前端培训
一.DOM介绍 DOM:Document Object Model 文档对象模型,用来表示和操作html或xml文档内容的基础API: 当网页被加载时,浏览器会创建对应的文档对象模型,而DOM模型被构 ...
前端开发——Ionic 3.0【爱创课堂专业前端培训】
一.Ionic 移动端有三种开发方向源生APP开发, 移动端web开发混合开发(介于以上两者之间的) 类微信小程序 reactNative,用react语法,开发app.但是与浏览器端不是同一套组 ...
JavaScript（第三天）—爱创课堂专业前端培训
一.条件语句条件语句格式一: if(条件表达式){ 条件表达式成立执行的语句; } 条件语句格式二: if(条件表达式){ 条件表达式成立执行的语句; }else{ 条件表达式不成立执行的语句; } ...

html5源码笔记【爱创课堂专业前端培训】

html5源码笔记【爱创课堂专业前端培训】相关推荐

最新文章

热门文章