js学习-边框相关的样式、变形功能、动画效果
边框相关的样式
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;
}实例：
<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>