1.背景
(1) 背景尺寸(backgroun-size)及背景原点/起始点(background-origin)
案例:
<title></title>
<style type="text/css">
.wrap{
/*背景的图片的尺寸*/
/*width: 500px;
height: 800px;
border: 1px solid red;
background: url(img/baby0.jpg) no-repeat;
background-size:400px 100%;*/
/*背景的起始点*/
width: 500px;
height: 800px;
border: 20px solid rgba(255,0,0,0.3);
background: url(img/baby0.jpg) no-repeat;
padding: 20px;
/*背景以边框为起始点*/
/*background-origin: border-box;*/
/*背景以内容为起始点*/
/*background-origin: content-box;*/
/*背景以内边距为起始点*/
background-origin: padding-box;
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>属性:border-box(以边框为起始点)
content-box(以内容为起始点,是默认值)
padding-box(以内边距为起始点)
(2)背景裁剪:background-clip (属性同background-0rigin)
(3)多背景:
案例:
<title></title>
<style type="text/css">
.wrap{
border: 1px solid black;
width:623px;
height:417px;
background: url(../img/bg1.png) no-repeat left top,
url(../img/bg2.png) no-repeat right top,
url(../img/bg3.png) no-repeat right bottom,
url(../img/bg4.png) no-repeat left bottom,
url(../img/bg5.png) no-repeat center center;
margin:auto;
font-family:新宋体;
font-size:50px;
color: cornflowerblue;
text-align: center;
line-height: 417px;
}
</style>
</head>
<body>
<div class="wrap">细水长流</div>
</body>2.渐变
(1)线性渐变:linear-gradient();
(2)径向渐变:radial-gradient();
案例:线性渐变
<style type="text/css">
div{
border: 1px solid black;
width:600px;
height:100px;
margin: 100px auto;
}
.line1{
background: linear-gradient(to left,yellow,red);
}
.line2{
background: linear-gradient(135deg,
yellow 0%,
yellow 25%,
red 25%,
red 50%,
green 50%,
green 75%,
pink 75%,
pink 100%
);
}
.line3{
background: linear-gradient(135deg,
yellow 0%,
red 25%,
green 50%,
blue 75%,
pink 100%
);
}
.line4{
background: linear-gradient(135deg,
white 0%,
white 25%,
black 25%,
black 50%,
white 50%,
white 75%,
black 75%,
black 100%
);
background-size:100px 100px;
animation:move 1s linear infinite;
}
@keyframes move{
from{
background-position: 0px 0px;
}
to{
background-position: -100px 0px;
}
}
.line5{
background:linear-gradient(45deg, yellow ,green,blue);
}
.line6{
background:linear-gradient(to left,pink,green,blue);
}
</style>
</head>
<body>
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
<div class="line5"></div>
<div class="line6"></div>
</body>
径向渐变
<style type="text/css">
div{
width:300px;
height:300px;
border: 1px solid black;
margin-right:100px;
float:left;
}
.xian1{
background: radial-gradient(at center,yellow,green);
}
.xian2{
background: radial-gradient(200px at left top,green,yellow);
}
.xian3{
background: radial-gradient(100px 50px at center, yellow,green );
}
.xian4{
background: radial-gradient(120px at 100px 50px,yellow,green,red);
}
</style>
</head>
<body>
<div class="xian1"></div>
<div class="xian2"></div>
<div class="xian3"></div>
<div class="xian4"></div>
</body>
3.过渡:transition
transition:param1 param2
param1表示要过渡的属性,param2表示要过渡的时间
属性:(1)设置过渡的属性:transition-property:left;
(2)设置过渡时间:transition-duration:2s;
(3)设置过渡的延迟加载:transition-timing-function:linear;
linear：线性过渡(匀速过渡)
ease：平滑过渡
ease-in：由慢到快
ease-out：由快到慢
ease-in-out：由慢到快再到慢
案例:
<style type="text/css">
.wrap1{
width: 200px;
height: 100px;
background: pink;
/*transition: width 8s,height 3s;*/
/*设置元素的过渡: 第一个值all表示该元素的所有属性*/
/*第二个值2s表示该属性过渡的所需时间*/
/*transition: all 2s;*/
/*position: absolute;*/
/*设置过渡的属性*/
/*transition-property:left;*/
transition-property: width;
/*设置过渡的时间*/
transition-duration: 2s;
/*设置过渡的延迟执行*/
/*transition-delay:2s;*/
/*设置过渡的速度*/
/*属性linear表示匀速过渡*/
/*transition-timing-function: linear;*/
/*平滑过渡*/
transition-timing-function: ease;
}
div{
margin-top: 50px;
}
.wrap2{
width: 200px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
/*由慢到块*/
transition-timing-function: ease-in;
}
div:hover{
width: 1000px;
/*left: 500px;*/
/*width: 300px;
height: 300px;
background: rgba(0,255,255,0.4);*/
/*margin-left: 300px;*/
/*border-radius: 50%;
background: url(img/baby0.jpg) no-repeat;
background-size: 100% 100%;*/
}
</style>
</head>
<body>
<div class="wrap1"></div>
<div class="wrap2"></div>
<div class="wrap3"></div>
<div class="wrap4"></div>
</body>
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
