边框相关的样式
border-radius
1、border-radius是边框圆角绘制
- border-radius:length(左上角和右下角) length(右上角和左下角);
- 无边框设置时,会把背景进行圆角设置
- 边框无论是实线,还是虚线等等,都会沿着圆角曲线绘制
- border - top / bottom - left / right - radius,一共四种
2、border-image图像边框
- (-webkit-) / (-moz-) / (-o-) / border-image: url(xxx.jpg) 四个边距 / 四个边框宽度;
- 四个边距必须设置,可以只写一个数值,表示四个边距相同
- 四个角不会拉伸,四个边距会拉伸
3、规定四条边的背景的显示方法:
border-image: url(xxx.jpg) 四个边距 / 四个边框宽度 topbottom leftright;
iv{
width: 500px;
height: 300px;
-webkit-border-image: url("1.jpg") 50/100px round stretch ;
}
topbottom leftright的值有:repeat(平铺),stretch(拉伸),round(平铺,但是最后一张图不能完全显示的,就不会显示图像,把之前的几个图象拉伸)
round效果(222、555、888有拉伸的效果):
stretch效果:
变形功能
1、transform
- -ms-transform:
- -moz-transform:
- -webkit-transform:
- -o-transform:
2、rotate旋转
transform: rotate(角度)
如transform:rotate(45deg);
deg是角度单位
3、scale缩放
transform:scale(值);
值是0.5表示缩小50%,1.5表示放大150%。
scale(x,y)沿x,y轴同时缩放
scalex(值):沿x轴缩放
scaley(值):沿y轴缩放
4、skew倾斜
skew(x,y)
skewx(值)
skewy(值)
值是角度
5、translate移动
translate(x,y)
translatex(值)
translatey(值)
6、多种变形方式
transform:方法1 方法2 方法3 方法4;
每种方法只能指定一次
7、改变元素基点transform-origin
div{
width: ;
height: ;
background-color: ;
transform-origin: ;
}
div:hover{
-ms-transform: ;
-moz-transform: ;
-webkit-transform: ;
-o-transform: ;
}
动画效果:
一、transition方法
transition: ;
-moz-transition: ;
-webkit-transition: ;
-o-transition: ;
1、transition: property duration timing-function delay
- transition-property: all (无论是颜色还是大小、长宽都可以同时改变) / none (无改变) / property(单独指定,逗号分隔)
- transition-duration: 过渡的时间
- transition-timing-function: 变换速率变化
1)ease:变慢,默认值
2)linear:匀速
3)ease-in:加速
4)ease-out:减速
5)ease-in-out:加速后减速
6)cubic-bezier:函数指定 - delay: 指鼠标移上去去几秒后开始执行动画,可以不设置,默认为0
div{
width: 200px;
height: 200px;
background-color: green;
transition:background-color 1s linear 0 ,width 1s linear 0;
-moz-transition: background-color 1s linear 0 ,width 1s linear 0; /* Firefox 4 */
-webkit-transition:background-color 1s linear 0 ,width 1s cubic-bezier(0,0.5,0,0) 2s,height 1s linear 0; /* Safari 和 Chrome */
-o-transition:background-color 1s linear 0 ,width 1s linear 0; /* Opera */
}
div:hover{
background-color: #f60;
width: 900px;
height: 400px;
}
二、animation方法
通过关键帧以及关键帧的属性值实现复杂的动画
1、@-webkit-keyframes 关键帧名称{
0%{
…
}
) 10%{
…
}
…
100%{
…
}
}
2、关键帧创建好后
元素{
-webkit-animation-name: mycolor(关键帧名称);
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: 2(重复的次数,infinite无限次);
}
div{
width: 200px;
height: 200px;
background-color: #ff6600;
}
@-webkit-keyframes mycolor {
0%{
background-color: #ff6600;
-webkit-transform:rotate(0deg);
transform:translate(0px,0px);
}
10%{
background-color: green;
-webkit-transform:rotate(30deg);
transform:translate(100px,0px);
}
20%{
background-color: red;
-webkit-transform:rotate(0deg);
}
80%{
background-color: #000;
-webkit-transform:rotate(30deg);
}
100%{
background-color: #ff6600;
-webkit-transform:rotate(0deg);
}
}
div:hover{
-webkit-animation-name:mycolor;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:2;
}
实例:
<!DOCTYPE html>
<!-- saved from url=(0042)http://localhost:63342/untitled3/fzdh.html -->
<html><head lang="en"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<title></title>
<style>
body{
width: 900px;
margin: 0 auto;
}
a{
-webkit-transition:color 1s linear 0,font-size 1s linear 0;
color: #000;
}
a:hover{
color: #f60;
font-size:28px ;
}
div#transition{
width: 200px;
height: 200px;
margin: 100px 0;
background-color: #ff6600;
-webkit-transition:transform 1s linear , background-color 1s linear;
}
div#transition:hover{
-webkit-transform:rotate(90deg); /*可以加入transform元素*/
background-color: #600864;
}
div#Animations{
background-color: #f60;
width: 20px;
height: 20px;
}
@-webkit-keyframes mymove{
0%{
background-color: #f60;
width: 20px;
height: 20px;
}
10%{
background-color: #0D220F;
width: 70px;
}
80%{
background-color: #00baff;
width: 960px;
}
100%{
background-color: #600864;
width: 80px;
}
}
div#Animations:hover{
-webkit-animation-name:mymove;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}
div#Animationsa{
width: 20px;
height: 20px;
background-color: #ff6600;
}
@-webkit-keyframes ma{
0%{
background-color: #f60;
width: 20px;
height: 20px;
}
10%{
background-color: #0D220F;
width: 100px;
}
20%{
background-color: #00baff;
width:25px;
}
30%{
background-color: #00baff;
width: 200px;
}
40%{
background-color: #600864;
width: 30px;
}
100%{
background-color: #600864;
width: 230px;
}
}
div#Animationsa:hover{
-webkit-animation-name:ma;
-webkit-animation-duration:5s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
}
</style>
</head>
<body>
<h1>transition案例</h1>
<a href="./fzdh_files/fzdh.html">transition案例</a>
<div id="transition"></div>
<h1>Animations案例</h1>
<div id="Animations"></div>
<br>
<div id="Animationsa"></div>
</body>
</html>