首页 技术 正文
技术 2022年11月23日
0 收藏 312 点赞 2,998 浏览 5967 个字

Transition

1.简写属性transition,可以包括四个属性,这四个属性的顺序按照下面介绍的顺序书写,即transition:property duration timing-function delay。

2.transition-property表示属性值,例如width,height等等

3.transition-duration过渡效果花费的时间,默认值为0

4.transition-timing-function规定过渡效果的时间曲线,形式有很多种。

linear 规定以相同速度开始至结束的过渡效果(等于 cubic-bezier(0,0,1,1))。
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。
ease-in 规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。
ease-out 规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。
ease-in-out 规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

以上五种形式的过度都是基于贝赛尔曲线(5种特殊情况),具体的可以参看http://cubic-bezier.com/

5.transition-delay过渡效果的延迟多长时间才开始。

实例1

ps:在一个元素上面使用transition时,需要指定该hover样式,那么就会按照hover时的值过度;其次,元素的大小边框颜色都是逐渐改变的;当鼠标离开元素时,会触发相反的过渡效果。

 <html>
<head>
<title></title>
<style type="text/css">
div{width: 100px;height:100px;background:red;transition:all 2s ease-in-out 20ms; }
div:hover{width:200px;height:200px;background:blue; }
</style>
</head>
<body>
<div></div>
</body>
</html>

复制代码预览效果。

—————————————————————overline———————————————————————-

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

转换分为2D和3D—下面是2D转换的介绍

1.translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数

 <html>
<head>
<title></title>
<style type="text/css">
div{width: 100px;height: 100px;border: 1px solid #000;background:red;-webkit-transform:translate(40px,60px);}
      //需要写浏览器前缀
</style>
</head>
<body>
<div></div>
</body>
</html>

CSS3 transition/transform

2. rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。

 <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{-webkit-transform:rotate(40deg);}
</style>
</head>
<body>
<div>1</div>
<div id="div2">2</div>
</body>
</html>

CSS3 transition/transform

3.scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数。

值 scale(1,2) 把宽度转换为原始尺寸的 1 倍,把高度转换为原始高度的 2 倍。

 <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{margin-top:40px;//如果把margin-top设置为10px;父级div会覆盖子div的一部分
-webkit-transform:scale(1,2);//内容也会变形
}
</style>
</head>
<body>
<div>1</div>
<div id="div2">2</div>
</body>
</html>

CSS3 transition/transform

4.skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数—–围绕轴翻转,不是水平翻转,x,y轴以物体的中心点展开

 <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:75px;
background-color:yellow;
border:1px solid black;
}
div#div2
{
background-color:red;
-webkit-transform:skew(30deg,30deg);
}
</style>
</head>
<body>
<div>1</div>
<div id="div2">2</div>
</body>
</html>

CSS3 transition/transform

5.matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素

ps:transform-origin–设置旋转元素的基点位置,(该属性必须与transform属性一同使用。)请参看http://www.w3school.com.cn/example/css3/demo_css3_transform-origin.html

3D转换—–transform—–主要有两个方法rotateX()和rotateY(),rotateZ()——–ps:rotate的x和y,z不区分大小写,只测试了chrome,没有测试其他浏览器

具体属性值

 <!DOCTYPE html>
<html>
<head>
<style>
div
{
width:300px;
height:300px;
border:1px solid black;
padding:100px;
-webkit-perspective:300px;/*当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。*/
}
#div2
{
width:100px;height:100px;
background-color:rgba(255, 0, 0, 0.63);
-webkit-transform:rotateY(20deg);
-webkit-transform-style: preserve-3d;
/*
flat 子元素将不保留其 3D 位置。
preserve-3d 子元素将保留其 3D 位置。 backface-visibility 属性定义当元素不面向屏幕时是否可见,如果在旋转元素不希望看到其背面时,该属性很有用。
*/
}
</style>
</head>
<body>
<div>
<div id="div2">2</div>
</div>
</body>
</html>

CSS3 transition/transform

综合实例—CSS3轮播图—–本来想使用codenvy.com生成在线预览的,但是地址会动态的改变,所以有兴趣的话还是自己复制代码,放几张图片来查看效果。

 <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3Transition-paxster</title>
<style id="css">
body,ul,ol{ margin:0;padding:0;}
li{ list-style:none;}
.box{width:800px; margin:50px auto;}
#picList{ width:800px;height:360px;-webkit-perspective:800px; }
#picList li{ width:25px; height:360px; float:left; position:relative;-webkit-transform-style:preserve-3d;-webkit-transform:translateZ(-180px) rotate(0deg);}
#picList li a{ width:25px;height:360px; position:absolute;left:0;top:0;}
#picList li a:nth-of-type(1){ background:url(1.jpg); -webkit-transform:translateZ(180px);}
#picList li a:nth-of-type(2){ background:url(2.jpg); -webkit-transform-origin:top;-webkit-transform:translateZ(-180px) rotateX(90deg);}
#picList li a:nth-of-type(3){ background:url(3.jpg); -webkit-transform:translateZ(-180px) rotateX(180deg);}
#picList li a:nth-of-type(4){ background:url(4.jpg); -webkit-transform-origin:bottom; -webkit-transform:translateZ(-180px) rotateX(-90deg);}
#picList span{ width:360px;height:360px; background:#aaa; position:absolute;top:0;}
#picList li span:nth-of-type(1){ left:0; -webkit-transform-origin:left; -webkit-transform: translateZ(180px) rotateY(90deg);}
#picList li span:nth-of-type(2){ right:0; -webkit-transform-origin:right; -webkit-transform: translateZ(180px) rotateY(-90deg);}
#btns{ padding:30px; height:30px;}
#btns li{ width:30px;height:30px; background:#000; border-radius:50%; font-size:16px; color:#fff; margin:0 10px; float:left; text-align:center; line-height:30px;}
#btns .active{ background:#f60; font-weight:bold;}
</style>
<script>
window.onload=function()
{
var oPicList=document.getElementById("picList");
var oCss=document.getElementById("css");
var oBtns=document.getElementById("btns");
var aBtns=oBtns.getElementsByTagName("li");
var iLiW=25;
var aPic=[];
var iLilength=oPicList.clientWidth/iLiW;
var sHtml="";
var iZindex=0;
var sStyle="";
var iNow=0;
for(var i=0;i<iLilength;i++)
{
i<iLilength/2?iZindex++:iZindex--;
sStyle+="#picList li:nth-of-type("+(i+1)+"){z-index:"+iZindex+"}"
sStyle+="#picList li:nth-of-type("+(i+1)+") a{background-position:-"+i*iLiW+"px 0px}"
sHtml+='<li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a><span></span><span></span></li>';
}
oPicList.innerHTML=sHtml;
oCss.innerHTML+=sStyle;
aPic=oPicList.getElementsByTagName("li");
for(var i=0;i<aBtns.length;i++)
{
aBtns[i].onclick=(function(a){
return function()
{
aBtns[iNow].className="";
this.className="active";
for(var i=0;i<aPic.length;i++)
{
aPic[i].style.transition=0.5*Math.abs(iNow-a)+"s "+i*60+"ms all ease";
aPic[i].style.WebkitTransform="translateZ(-180px) rotateX(-"+a*90+"deg)";
}
iNow=a;
}
})(i);
}
};
</script>
</head>
<body>
<h1>paxster</h1>
<div class="box">
<ul id="picList">
</ul>
<ol id="btns">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>
上一篇: hdu 5693 朋友 博弈
下一篇: css 集锦。
相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,254
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,692
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,531
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,302
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,942
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:5,102