CSS3操纵HTML元素动漫实际效果

日期:2020-10-22 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

应用CSS3操纵HTML元素的动漫实际效果:

1.对元素transform的操纵

先上事例:


拷贝编码
编码以下:

<head>
<style>
.showbox{
float: left;
margin:4em 1em;
width:100px;
height:60px;
borer:2px solid green;
background-color:#000;
text-align:center;
-webkit-transition: 1s ease-in-out;
transition:1s ease-in-out;
}
.sliderright:hover{
-webkit-transform:translate(30em, 0);
transform:translate(30em, 0);
}
</style>
</head>
<body>
<div class='showbox sliderright'>
</div>
</body>


CSS3中,元素能够具备以下的transform-control特性:

拷贝编码
编码以下:

-webkit-transform: translate(3em,0);
-webkit-transform: rotate(30deg);
-webkit-transform: scale(1.5);

根据适当的转换,最后能够将元素的部位转变变成大家必须的实际效果。

2.CSS3的动漫特性

CSS3中元素的全部均由下面的特性操纵

拷贝编码
编码以下:

-webkit-transition: 1s ease-in-out;

具体上,这个css特性操纵了在元素的style产生转变的情况下应当如何更改那些标值,1些能够持续转变的style,诸如opacity,color,width这些都可以以在这样的特性操纵下开展动漫

3.动漫的多時间点操纵

大家能够逐点操纵动漫,放上另外一个事例:

拷贝编码
编码以下:

<head>
<style>
.box{
position:relative;
width:100px;
height:100px;
left:0;
top:0;
background:blue;
-webkit-transition-property: width, height, left, top, background, -webkit-transform;
-webkit-transition-duration: 1s, 1s, 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-in-out, ease-in-out, ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay:1s, 1s, 0, 0, 0, 1s;
}
.box:hover{
width:50px;
height:50px;
left:150px;
top:150px;
background:red;
-webkit-transform:rotate(360deg);
}
</style>
</head>
<body>
<div style='height:250px;width:250px;background:grey'>
<div class='box'>
</div>
</div>
</body>

在上面的事例中,-webkit-transition-property操纵了动漫必须操纵那些style特性,duration和delay操纵時间连接点,timeing function操纵了是否必须淡入淡出的实际效果。

4.怎样让1个元素的hover姿势开启另外一个元素的动漫?

大家可使用CSS特性的1些连接标记,以下面的事例中,应用~号,在label1的hover姿势开启的情况下,会危害到label2,随后开启label2的动漫

拷贝编码
编码以下:

<head>
<style>
.box1{
position:absolute;
background:red;
width:100px;
height:100px;
top:0;
left:0;
}
.box1:hover ~ .box2{
left:500px;
}
.box2{
position:absolute;
width:100px;
height:100px;
left:120px;
top:0;
background:blue;
-webkit-transition: 1s ease-in-out;
}
</style>
</head>
<body>
<div style='height:100px;width:400px;background:grey'>
<div class='box1'>
</div>
<div class='box2'>
</div>
</div>
</body>