CSS3 完成侧面栏进行收启动画

日期:2020-09-21 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

@keyframes

标准用于建立动漫。

@keyframes 中要求某项 CSS 款式,就可以建立由当今款式慢慢改成新款式的动漫实际效果

@keyframes 中建立动漫时,请把它捆缚到某个挑选器,不然不容易造成动漫实际效果。

根据要求最少下列两项 CSS3 动漫特性,便可将动漫关联到挑选器:

      要求动漫的名字
      要求动漫的时长

animation


animation 特性是1个简写特性,用于设定动漫特性:

animation-name:要求 @keyframes 动漫的名字。
animation-duration:要求动漫进行1个周期所花销的秒或毫秒。默认设置是 0。
animation-timing-function:要求动漫的速率曲线图。默认设置是 "ease"。
animation-delay:要求动漫什么时候刚开始。默认设置是 0
animation-iteration-count:要求动漫被播发的次数。默认设置是 1。
animation-direction:要求动漫是不是在下1周期逆向地播发。默认设置是 "normal"。
animation-fill-mode:要求目标动漫時间以外的情况

侧面栏完成


拷贝编码
编码以下:

/* 动漫界定 */
@-webkit-keyframes move_right {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
}
@keyframes move_right {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateX(120px);
transform: translateX(120px);
}
}
@-webkit-keyframes move_left {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translateX(⑴20px);
transform: translateX(⑴20px);
}
}
@keyframes move_left {
from {
opacity: 1;
}
to {
opacity: 0;
-webkit-transform: translateX(⑴20px);
transform: translateX(⑴20px);
}
}
@-webkit-keyframes move_up {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateY(⑵50px);
transform: translateY(⑵50px);
}
}
@keyframes move_up {
from {
opacity: 0;
}
to {
opacity: 1;
-webkit-transform: translateY(⑵50px);
transform: translateY(⑵50px);
}
}


拷贝编码
编码以下:

/* 动漫关联 */
.move_right {
-webkit-animation-name : move_right;
animation-name : move_right;
-webkit-animation-duration : 1s;
animation-duration : 1s;
-webkit-animation-iteration-count : 1;
animation-iteration-count : 1;
-webkit-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}
.move_left {
-webkit-animation-name : move_left;
animation-name : move_left;
-webkit-animation-duration : 1s;
animation-duration : 1s;
-webkit-animation-iteration-count : 1;
animation-iteration-count : 1;
-webkit-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}
.move_up {
-webkit-animation-name : move_up;
animation-name : move_up;
-webkit-animation-duration : 1s;
animation-duration : 1s;
-webkit-animation-iteration-count : 1;
animation-iteration-count : 1;
-webkit-animation-fill-mode : forwards;
animation-fill-mode : forwards;
}
.fadeIn {
-webkit-transform : translateX(120px);
transform : translateX(120px);
opacity: 1;
}
.fadeInUp {
-webkit-transform : translateY(⑵50px);
transform : translateY(⑵50px);
opacity: 1;
-webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
transition :transform .2s ease-out, opacity .2s ease-out;
}
.fadeOutLeft {
-webkit-transform : translateX(⑴20px);
transform : translateX(⑴20px);
opacity: 0.0;
-webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;
transition :transform .2s ease-out, opacity .2s ease-out;
}

html


拷贝编码
编码以下:

<!doctype html>
<html lang="en" class="fullHeight">
<head>
<meta charset="UTF⑻">
<title>demo</title>
<link rel="stylesheet" type="text/css" href="sidebar.css">
</head>
<body class="fullHeight">
<div class='sidebar fullHeight'>sidebar</div>
<div class="controller">
<div>
<button onclick="fadeIn()">淡进</button>
<button onclick="fadeOut()">淡出</button>
</div>
<div>
<button onclick="fadeInUp()">向上淡进</button>
<button onclick="fadeOutLeft()">向左淡出</button>
</div>
</div>
<script src="sidebarEffects.js"></script>
</body>
</html>

添加JS


拷贝编码
编码以下:

<script>
var sidebarEl = document.querySelector(".sidebar");
function fadeIn (e) {
sidebarEl.className = 'sidebar fullHeight';
sidebarEl.style.top = '0px';
sidebarEl.style.left = '0px';
sidebarEl.classList.add('move_right');
}
function fadeOut (e) {
sidebarEl.className = 'sidebar fullHeight';
sidebarEl.style.left = '120px';
sidebarEl.classList.add('move_left');
}
function fadeInUp(e) {
sidebarEl.className = 'sidebar fullHeight';
sidebarEl.style.top = '250px';
sidebarEl.style.left = '120px';
sidebarEl.classList.add('move_up');
}
function fadeOutLeft(e) {
sidebarEl.className = 'sidebar fullHeight';
sidebarEl.style.top = '0px';
sidebarEl.style.left = '120px';
sidebarEl.classList.add('move_left');
}
</script>

以上便是应用CSS3制做侧面栏动漫实际效果的所有內容和编码了,小伙子伴们依据自身的新项目要求来改进清理下便可以了哦。