HML5day03

作者：gqk

一：渐变：

渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。可分为线性渐变、径向渐变

1. linear-gradient线性渐变指沿着某条直线朝一个方向产生渐变效果

a) 语法：

linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )

a) 参数说明：

Ø 第一个参数表示线性渐变的方向，

1. to left：设置渐变为从右到左。相当于: 270deg;

2. to right：设置渐变从左到右。相当于: 90deg;

3. to top：设置渐变从下到上。相当于: 0deg;

4. to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。也可以直接指定度数，如45deg

Ø 第二个参数是起点颜色,可以指定颜色的位置

Ø 第三个参数是终点颜色，你还可以在后面添加更多的参数，表示多种颜色的渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            /*添加渐变：渐变不是一个单一色，它产生的是图像，所以需要使用background*/
            /*linear-gradient(方向，开始颜色 位置，颜色2 位置，颜色3 位置...);*/
            /*方向：
            to top:0deg
            to right:90deg
            to bottom:180deg --默认值
            to left:270deg*/
            /*background: linear-gradient(to right,red,blue)*/;
            background: linear-gradient(to right,red 0%,red 50%,blue 50%,blue 100%);
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

2. radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果

a) 语法：

<radial-gradient> = radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

a) 取值：

i. <position> 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center

ii. shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样

iii. size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner

iv. <color>：指定颜色。Rgba hsla

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 300px;
            height: 200px;
            /*添加径向渐变：产生也是图像*/
            /*background: radial-gradient(red,blue);*/
            /*语法：radial-gradient(形状 大小 坐标,颜色1，颜色2...)：
            形状shape:circle:产生正方形的渐变色   ellipse:适配当前的形状,如果是正方形的容器，两者效果一样.如果宽高不一样，默认效果切换到ellipse
            at position:坐标，默认在正中心。可以赋值坐标（参照元素的左上角），也可以赋值关键字(left center right top bottom)
            大小size: closest-side：最近边； farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner*/
            /*background: radial-gradient(circle,red,blue);*/
            /*background: radial-gradient(circle farthest-side at 50px 50px,red,blue);*/
            /*background: radial-gradient(at left top,red,blue);*/
            
            /*设置颜色的位置*/
            background: radial-gradient(red,red 50%,blue 50%,blue);
        }
    </style>
<body>
<div></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            background-color: #ccc;
        }
        div:first-of-type{
            width: 300px;
            height: 300px;
            /*background: radial-gradient(//径向
                    #fff 0%,#fff 10%,
                    #000 10%,#000 20%,
                    #fff 20%,#fff 30%,
                    #000 30%,#000 40%);*/                //最近的边默认最远的角
            background: repeating-radial-gradient(circle closest-side at center center,//径向重复
            #fff 0%,#fff 10%,
            #000 10%,#000 20%);
        }
        div:last-of-type{
            width: 200px;
            height: 800px;
            background: repeating-linear-gradient(45deg,//线性重复
                    #fff 0%,#fff 10%,
                    #000 10%,#000 20%);
        }
    </style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>

　　背景的设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            overflow: scroll;
            /*1.添加背景颜色*/
            /*background-color: skyblue;*/
            /*2.添加背影图片
            如果图片大于容器，那么默认就从容器左上角开始放置
            如果图片小于容器，那么图片默认会平铺*/
            /*background-image: url("../images/bg-img.jpg");*/
            background-image: url("../images/share1.png");
            /*3.设置背景平铺
            round:会将图片进行缩放之后再平铺
            space:图片不会缩放平铺，只是会在图片之间产生相同的间距值*/
            /*background-repeat: space;*/
            /*4.设置在滚动容器的背景的行为：跟随滚动/固定
            fixed:背景图片的位置固定不变
            scroll:当滚动容器的时候，背景图片也会跟随滚动*/

            /*local和scroll的区别：前提是滚动当前容器的内容
            local:背景图片会跟随内容一起滚动
            scroll:背景图片不会跟随内容一起滚动*/
            background-attachment: scroll;
        }
    </style>
</ead>
<body>
<div>
    <p style="height: 800px;"></p>
</div>
<span style="height: 800px;display: block"></span>
</body>
</html>

　　过度手风琴案例：（先讲下面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .menu{
            width: 200px;
            height:auto;
            margin:100px auto;
        }
        .item{
            width: 100%;
            height:auto;
        }
        .item > h3{
            height: 40px;
            line-height: 40px;
            background-color: #7dffe7;
            color: orange;
            border-bottom: 2px solid #ccc;
            padding-left:10px;
        }
        .item > .itemBox{
            width: 100%;
            height:0px;
            overflow: hidden;
            /*display: none;*/
            /*添加过渡效果:过渡效果只能产生从某个值到另外一个具体的值的过渡*/
            /*1.一定要设置为哪些css样式添加过渡效果*/
            /*transition-property: display;*/
            transition-property: height;
            /*2.一定要设置过渡效果的耗时*/
            transition-duration: 1s;
        }
        .item > .itemBox > ul{
            list-style: none;
            background-color: #eaffb6;
            padding:10px;
        }

        /*为item添加hover伪类*/
        .item:hover > .itemBox{
            /*display: block;*/
            height: 110px;
        }
    </style>
</head>
<body>
<div class="menu">
    <div class="item">
        <h3>市内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>西科java开发</li>
                <li>西科java开发</li>
                <li>西科java开发</li>
                <li>西科java开发</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <h3>省内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>西科java开发</li>
                <li>西科java开发</li>
                <li>西科java开发</li>
                <li>西科java开发</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <h3>国内新闻</h3>
        <div class="itemBox">
            <ul>
                <li>西科java开发</li>
                <li>西科java开发</li>
                <li>西科java开发</li>
                <li>西科java开发</li>
            </ul>
        </div>
    </div>
    <div class="item">
        <h3>国际新闻</h3>
        <div class="itemBox">
            <ul>
                <li>西科java开发</li>
                <li>西科java开发</li>
                <li>西科java开发</li>
                <li>西科java开发</li>
            </ul>
        </div>
    </div>
</div>

</body>
</html>

过度：

　　1）添加过渡效果 transition-property：left

　　2）添加耗时：transition-duration: 2s

　　3) 添加函数设置速率 transition-timing-function: linear;

　　4）过渡效果的延迟:transition-delay: 2s;

简写：transition:属性名称过渡时间时间函数延迟

transition: left 2s linear 0s

　为多个样式同时添加过渡效果

transition: left 2s linear 0s,background-color 5s linear 0s

　　demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            position: absolute;
            left: 100px;
            top: 100px;
            /*添加过渡效果:过渡效果执行完毕之后，默认会还原到原始状态*/
            /*1.transition-property:添加过渡效果的样式属性名称*/
            /*transition-property: left;*/
            /*2.transition-duration:过渡效果的耗时 以秒做为单位*/
            /*transition-duration: 2s;*/
            /*3.transition-timing-function:设置时间函数--控制运动的速度*/
            /*transition-timing-function: linear;*/
            /*4.transition-delay:过渡效果的延迟*/
            /*transition-delay: 2s;*/

            /*简写：transition:属性名称 过渡时间  时间函数  延迟*/
            /*transition: left 2s linear 0s;*/

            /*为多个样式同时添加过渡效果*/
            /*transition: left 2s linear 0s,background-color 5s linear 0s;*/

            /*为所有样式添加过渡效果 all:所有样式
            1.所有样式的过渡效果一样
            2.效率低下，它会去查询所有添加的样式
            3.建议：以后不要这么写
            4.steps(4):可以让过渡效果分为指定的几次来完成*/
            transition:all 2s steps(4);
            -moz-transition: all 2s steps(4);
            -webkit-transition: all 2s steps(4);
            -o-transition: all 2s steps(4);
        }
       /*单击*/
        div:active{
            left: 1000px;
            background-color: blue;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

一：2D转换：

通过 CSS3 transform转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸.

2D移动：translate()。

a) 语法：translate(tx) | translate(tx,ty)

a) 也可以使用translateX(tx) 或者 translateY(ty)

<!DOCTYPE html>
<html lang="zh">
<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>
		*{
			margin: 0;
			padding: 0;
		}
		div{
			height: 200px;
			width: 200px;
			margin-left: 200px;
            margin-top:10px;
			background-color: red;
			transition: transform 2s;
		}
		div:first-of-type:active{
			transform: translate(100px) ;
		}
	</style>
</head>
<body>
	<div>1</div>
</body>
</html>

　2D操作

1. 缩放scale()

函数让元素根据中心原点对对象进行缩放。默认的值1。因此0.01到0.99之间的任何值，使一个元素缩小；而任何大于或等于1.01的值，让元素显得更大.缩放是参照元素中心点。

2. 2D旋转：

rotate(度数)：旋转rotate()函数通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对原点中心顺时针旋转；如果这个值为负值，元素相对原点中心逆时针旋转

3，2D翻转：skew()：

1. 能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜。这与rotate()函数的旋转不同，rotate()函数只是旋转，而不会改变元素的形状。skew()函数不会旋转，而只会改变元素的形状

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            margin-left: 200px;
            margin-top:10px;
            /*添加过渡效果  css样式名称 耗时*/
            transition: transform 2s;
        }
        /*移动translate*/
        div:first-of-type:active{
            /*使用transform实现元素的移动 a.移动是参照元素的左上角 b.执行完毕之后会恢复到原始状态
            1.如果只有一个参数就代表x方向
            2.如果有两个参数就代表x/y方向*/
            /*transform: translate(100px);*/
            /*transform: translate(400px,500px);*/
            /*transform: translate(0px,500px);*/

            /*添加水平或者垂直方向的移动*/
            /*transform:translateX(300px);*/
            transform:translateY(300px);
        }
        /*缩放：scale*/
        div:nth-of-type(2):active{
            /*实现缩放  1指不缩放，>1.01放大  <0.99缩小  参照元素的几何中心
            1.如果只有一个参数，就代表x和y方向都进行相等比例的缩放
            2.如果有两个参数，就代表x/y方向*/
            /*transform: scale(2);*/
            /*transform: scale(2,1);*/
            /*缩放指定的方向 */
            /*transform:scaleX(0.5);*/
            transform:scaleY(0.5);
        }
        /*旋转：rotate*/
        div:nth-of-type(3){
            /*设置旋转轴心
            1.x y
            2.关键字：left top right bottom center*/
            background-color: purple;
            transform-origin: left top;
        }
        div:nth-of-type(3):active{
            /*transform:rotate(-90deg);
            transform: translateX(700px);*/
            /*同时添加多个transform属性值*/
            transform: translateX(700px) rotate(-90deg);
            /*transform: rotate(-90deg) translateX(700px); 会改变值  会旋转当前的坐标系*/
        }
        /*斜切：skew*/
        div:nth-of-type(4):active{
            background-color: blue;
            /*如果角度为正，则往当前轴的负方向斜切，如果角度为，则往当前轴的正方向斜切*/
            transform:skew(-30deg);
            /*transform:skew(30deg,-30deg);*/
            /*设置某个方向的斜切值*/
            /*transform:skewX(30deg);*/
            /*transform:skewY(30deg);*/
        }
    </style>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
</html>

改变旋转的轴心：

/*设置旋转轴心
1.x y
2.关键字：left top right bottom center*/

transform-origin: left top; 左上角旋转

卡牌旋转：（鼠标移动上去后）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .pkBox{
            width: 155px;
            height: 219px;
            position: relative;
            margin:300px auto;
        }
        .pkBox > img{
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            /*添加过渡*/
            transition: transform 2s;
            /*设置旋转轴心*/
            transform-origin: right top;
        }
        /*添加鼠标上移的效果*/
        .pkBox:hover >img:nth-of-type(1){
             transform: rotate(60deg);
         }
        .pkBox:hover >img:nth-of-type(2){
            transform: rotate(120deg);
        }
        .pkBox:hover >img:nth-of-type(3){
            transform: rotate(180deg);
        }
        .pkBox:hover >img:nth-of-type(4){
            transform: rotate(240deg);
        }
        .pkBox:hover >img:nth-of-type(5){
            transform: rotate(300deg);
        }
        .pkBox:hover >img:nth-of-type(6){
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
<div class="pkBox">
    <img src="../images/pk1.png" alt="">
    <img src="../images/pk2.png" alt="">
    <img src="../images/pk1.png" alt="">
    <img src="../images/pk2.png" alt="">
    <img src="../images/pk1.png" alt="">
    <img src="../images/pk2.png" alt="">
</div>
</body>
</html>

　同时添加多个transform值（安全卫士案例）

<!DOCTYPE html>
<html lang="zh">
<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>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: #31965b;
		}
		.box{
			width: 440px;
			margin: 100px auto;
		}
		.box > img{
            transition: transform 1s;
        }
		.box > img:nth-of-type(1){
            transform: translate(100px,100px) rotate(30deg);
        }
        .box > img:nth-of-type(2){
            transform: translate(-100px,-100px) rotate(-30deg);
        }
        .box > img:nth-of-type(3){
            transform: translate(200px,200px) rotate(60deg);
        }
        .box > img:nth-of-type(4){
            transform: translate(-200px,-200px) rotate(-60deg);
        }
        .box > img:nth-of-type(5){
            transform: translate(150px,150px) rotate(90deg);
        }
        .box > img:nth-of-type(6){
            transform: translate(50px,150px) rotate(-90deg);
        }
        .box > img:nth-of-type(7){
            transform: translate(-150px,-150px) rotate(60deg);
        }
        .box > img:nth-of-type(8){
            transform: translate(10px,-250px) rotate(-90deg);
        }
        .box > img:nth-of-type(9){
            transform: translate(-250px,10px) rotate(45deg);
        }
		 .box:hover > img{
            transform: none;
        }
		
	</style>
</head>
<body>
	<div class="box">
		<img src="img/shield_1_01.png" />
		<img src="img/shield_1_02.png" />
		<img src="img/shield_1_03.png" />
		<img src="img/shield_1_04.png" />
		<img src="img/shield_1_05.png" />
		<img src="img/shield_1_06.png" />
		<img src="img/shield_1_07.png" />
		<img src="img/shield_1_08.png" />
		<img src="img/shield_1_09.png" />
	</div>
</body>
</html>

　　任意元素居中：

<!DOCTYPE html>
<html lang="zh">
<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>
		*{
			margin: 0;
			padding: 0;
		}
		.box{
			width: 400px;
			height: 400px;
			border-radius: 200px;
			background-color: #ccc;
			margin: 100px auto;
			position: relative;
		}
		.rec{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
			/**
			 * 定位的百分比参照父容器的宽高
			 */
			left: 50%;
			top: 50%;
			/*margin-top: -50px;
			margin-left: -50px;*/
			transform: translate(-50%,-50%);
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="rec">
			
		</div>
	</div>
</body>
</html>

移动，旋转，斜切，缩放

1. 3D移动

方法：translate3d(x,y,z)

<!DOCTYPE html>
<html lang="zh">
<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>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-left: 200px;
			margin-top: 10px;
			transition: transform 2s;
		}
		/**
		 * 添加3d移动
		 */
		div:first-of-type:active{
			transform: translate3d(400px,400px,400px);
		}
			
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</body>
</html>

1. 3D缩放

a) scale3d(number,number,number) 使元素在这三个纬度中缩放，也可分开写，如：scaleX(),scaleY(),scaleZ()

<!DOCTYPE html>
<html lang="zh">
<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>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-left: 200px;
			margin-top: 10px;
			transition: transform 2s;
		}
		/**
		 * 3d缩放
		 * >1.01放大 <0.99缩小
		 */
		div:nth-of-type(2):active{
			transform: scale3d(2,0.5,10)
		}
			
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</body>
</html>

1. 3D旋转

a) rotate3d(x,y,z,angle)：指定需要进行旋转的坐标轴

b) rotateX(angle) 是元素依照x轴旋转；

c) rotateY(angle) 是元素依照y轴旋转；

d) rotateZ(angle) 是元素依照z轴旋转

<!DOCTYPE html>
<html lang="zh">
<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>
		*{
			padding: 0;
			margin: 0;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin-left: 200px;
			margin-top: 10px;
			transition: transform 2s;
		}
		/**
		 * 添加3d旋转
		 */
		div:nth-of-type(3):active{
			/*transform: rotate3d(x,y,z,angle)
			 x:代表x轴方向上的一个向量
			 * */
			transform: rotate3d(1,1,1,330deg)
		}
			
	</style>
</head>
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
</body>
</html>

posted @ 2018-08-28 18:52 少侠gqk 阅读(193) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

少侠gqk

HML5day03

公告