css3的过渡.动画与2D3D变换

最新推荐文章于 2020-07-07 17:36:15 发布

Modify_QmQ

最新推荐文章于 2020-07-07 17:36:15 发布

阅读量262

点赞数 1

分类专栏： # JS 文章标签： h5 css3的过渡.动画与2D3D变换

本文链接：https://blog.csdn.net/qq_44973159/article/details/100879366

版权

JS 专栏收录该内容

13 篇文章 4 订阅

订阅专栏

1.过渡Transition

将HTML元素从一个位置平实的改变到另一个位置

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;  //初始宽和高
background:blue;
transition:width 2s;
-webkit-transition:width 2s; //谷歌
-webkit-transition-duration:3s; //过渡的时间3秒 即属性 transition-duration
-webkit-transition-property: width; //css名称
/*  
	-webkit-transition-property:width;  
	-webkit-transition-duration:5s;
	-webkit-transition-delay:2s;    属性 transition-delay 延迟多少时间
*/
}
div:hover  //定义一个伪类
{
width:300px;  //宽增加到300px
}
</style>
</head>
<body>
<div></div>
<p>请把鼠标指针移动到蓝色的 div 元素上，就可以看到过渡效果。</p>
</body>
</html>

2.应用动画Animation

将动画效果应用到HTML元素上，需要先创建某些称为 @keyframe 的动画规则

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; 
-webkit-animation-name:myname; //属性animation-name 定义一个名称
-webkit-animation-duration:3s; //属性animation-duration 设置动画循环的时间3秒 
-webkit-animation-delay:3s;    //属性animation-delay 动画延迟一段时间后开始 
@-webkit-keyframes mymove      //谷歌
{
from {top:0px;}
to {top:200px;}  
}
</style>
</head>
<body>
<p>本例在 Internet Explorer 中无效。</p>
<div></div>
</body>
</html>

3. 2D变换

deg:角，比如90deg表示旋转90度，一共360度

3.0 translate属性

用于将元素从其当前位置移动到以XY轴指定的位置

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-webkit-transform:rotate(9deg);
}
</style>
</head>
<body>
<div>Hello World</div>
</body>
</html>

3.1 transform-origin属性

允许您改变被转换元素的位置

<!DOCTYPE html>
<html>
<head>
<style>
#div1
{
position: relative;
height: 200px;
width: 200px;
margin: 100px;
padding:10px;
border: 1px solid black;
}
#div2
{
padding:50px;
position: absolute;
border: 1px solid black;
background-color: yellow;
transform: rotate(45deg);
transform-origin:20% 40%;
-webkit-transform: rotate(45deg); 
-webkit-transform-origin:20% 40%; 
}
</style>
</head>
<body>
<div id="div1">
  <div id="div2">HELLO</div>
</div>
</body>
</html>