Watch 1 Star 3 Fork 0

佐阿衡 / CSS+JS实现四个角度随机切入背景动画效果CSSApache-2.0

Join us
Explore and code with more than 5 million developers,Free private repositories !:)
Sign up
CSS+JS实现四个角度随机切入背景动画效果 spread retract

Clone or download
index.html 11.70 KB
Copy Edit Web IDE Raw Blame History
佐阿衡 authored 2020-03-06 15:10 . html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<link rel="stylesheet" href="http://demo.z01.com/dist/css/animate.min.css">
<style>
.major-list-outer{}
.major-list{}
.major-list li{}
.major-list li a, .major-list li a span{width:100%;height:100%;display:block;position:absolute;left:0;top:0}
.front-face{z-index:2; }
.major-list li a span.back-face{z-index:3;background:url(images/bg.png) no-repeat center; display:none; color:#FFFFFF; font-size:16px; text-align:center; }
.major-list li .back-face p{margin:37px 0 0 0;}
.major-list li a{overflow:hidden}
.major-list li a:hover span.back-face{/*z-index:3;*/ display:block;}
/* index_hd */
.index_hd{clear:both; margin:0 auto; max-width:1212px; padding:10px 30px 30px 30px; overflow:hidden;}
.index_hd .hd_r ul{clear:both; margin:0; padding:0; overflow:hidden;}
.index_hd .hd_r ul li{float:left; width:159px; height:100px; padding:0; border:#dcdddd solid 1px; display:block; margin:6px; position:relative; }
.index_hd .hd_r ul li a{text-align:center; cursor:pointer; height:100%}
.index_hd .hd_r ul li a img{width:100%;}
/* Above all are from animate.css by daneden http://daneden.me/animate/ */
.from-top{
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
transform-origin: 0% 0%;
}
.from-left{
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.from-top, .from-left{
-webkit-animation: enter-clockwise 0.23s ease-out;
-moz-animation: enter-clockwise 0.23s ease-out;
-ms-animation: enter-clockwise 0.23s ease-out;
animation: enter-clockwise 0.23s ease-out;
}
.from-right{
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.from-bottom{
-webkit-transform-origin: 0% 100%;
-moz-transform-origin: 0% 100%;
-ms-transform-origin: 0% 100%;
transform-origin: 0% 100%;
}
.from-right, .from-bottom{
-webkit-animation: enter-anti-clockwise 0.23s ease-out;
-moz-animation: enter-anti-clockwise 0.23s ease-out;
-ms-animation: enter-anti-clockwise 0.23s ease-out;
animation: enter-anti-clockwise 0.23s ease-out;
}
@-webkit-keyframes enter-clockwise{
from{
z-index: 3;
-webkit-transform: rotate(-90deg);
}
to{
z-index: 3;
-webkit-transform: rotate(0deg);
}
}@-moz-keyframes enter-clockwise{
from{
z-index: 3;
-moz-transform: rotate(-90deg);
}
to{
z-index: 3;
-moz-transform: rotate(0deg);
}
}@-ms-keyframes enter-clockwise{
from{
z-index: 3;
-ms-transform: rotate(-90deg);
}
to{
z-index: 3;
-ms-transform: rotate(0deg);
}
}@keyframes enter-clockwise{
from{
z-index: 3;
transform: rotate(-90deg);
}
to{
z-index: 3;
transform: rotate(0deg);
}
}
@-webkit-keyframes enter-anti-clockwise{
from{
z-index: 3;
-webkit-transform: rotate(90deg);
}
to{
z-index: 3;
-webkit-transform: rotate(0deg);
}
}@-moz-keyframes enter-anti-clockwise{
from{
z-index: 3;
-moz-transform: rotate(90deg);
}
to{
z-index: 3;
-moz-transform: rotate(0deg);
}
}@-ms-keyframes enter-anti-clockwise{
from{
z-index: 3;
-ms-transform: rotate(90deg);
}
to{
z-index: 3;
-ms-transform: rotate(0deg);
}
}@keyframes enter-anti-clockwise{
from{
z-index: 3;
transform: rotate(90deg);
}
to{
z-index: 3;
transform: rotate(0deg);
}
}
</style>
</head>
<body>
<div class="index_hd">
<h1>CSS+JS实现四个角度随机切入背景动画效果<small><a href="http://www.z01.com">by Zoomla!逐浪CMS</a></small></h1>
<div class="fr hd_r major-list-outer">
<ul class="major-list">
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/01.gif" title="中国地质科学院" /></span>
<span class="back-face to-left"><p>中国地质科学院</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/02.gif" title="中国乐凯集团" /></span>
<span class="back-face to-left"><p>中国乐凯集团</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/03.gif" title="英利集团" /></span>
<span class="back-face to-left"><p>英利集团</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/04.gif" title="长城汽车" /></span>
<span class="back-face to-left"><p>长城汽车</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/05.gif" title="风帆股份" /></span>
<span class="back-face to-left"><p>风帆股份</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/06.gif" title="天威集团" /></span>
<span class="back-face to-left"><p>天威集团</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/07.gif" title="保定供水总公司" /></span>
<span class="back-face to-left"><p>保定供水总公司</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/08.gif" title="中国正誉集团" /></span>
<span class="back-face to-left"><p>中国正誉集团</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/09.gif" title="河北保百集团" /></span>
<span class="back-face to-left"><p>河北保百集团</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/10.gif" title="城乡规划管理局" /></span>
<span class="back-face to-left"><p>城乡规划管理局</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/11.gif" title="轩宇汽车集团" /></span>
<span class="back-face to-left"><p>轩宇汽车集团</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/12.gif" title="亚太企业集团" /></span>
<span class="back-face to-left"><p>亚太企业集团</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/13.gif" title="和道国际" /></span>
<span class="back-face to-left"><p>和道国际</p></span>
</a>
</li>
<li class="major-item">
<a class="title">
<span class="txt-hide front-face"><img src="images/14.gif" title="河北大学" /></span>
<span class="back-face to-left"><p>河北大学</p></span>
</a>
</li>
</ul>
</div>
</div>
<script src="public.js"></script>
<script>
let hover_dir = {
wrapper: $p(".major-list")[0],
box: $p(".major-item"),
target: $p(".back-face"),
bindEvent: function(){
var mouse_pos, x, y, stop_bubble;
for(var i = 0; i < hover_dir.box.length; i++){
(function(n){
$p.addEvent(hover_dir.box[n], "mouseover", function(event){
event = $p.getEvent(event);
var relatedT = $p.getRelatedTarget(event);
if(!$p.contains(hover_dir.box[n], relatedT)){
var child = hover_dir.box[n].childNodes[0];
$p.stopPropagation(event);
$p.removeClass(hover_dir.target[n], "to-left") ||
$p.removeClass(hover_dir.target[n], "to-right") ||
$p.removeClass(hover_dir.target[n], "to-top") ||
$p.removeClass(hover_dir.target[n], "to-bottom");
x = event.pageX;
y = event.pageY;
mouse_pos = {"x": x, "y": y};
var dir = $p.get_dir(hover_dir.box[n], mouse_pos);
switch(dir){
case "left":
$p.addClass(hover_dir.target[n], "from-left");
break;
case "right":
$p.addClass(hover_dir.target[n], "from-right");
break;
case "top":
$p.addClass(hover_dir.target[n], "from-top");
break;
case "bottom":
$p.addClass(hover_dir.target[n], "from-bottom");
break;
default: break;
}
}
});
$p.addEvent(hover_dir.box[n], "mouseout", function(event){
event = $p.getEvent(event);
var relatedT = $p.getRelatedTarget(event);
if(!$p.contains(hover_dir.box[n], relatedT)){
$p.removeClass(hover_dir.target[n], "from-left") ||
$p.removeClass(hover_dir.target[n], "from-right") ||
$p.removeClass(hover_dir.target[n], "from-top") ||
$p.removeClass(hover_dir.target[n], "from-bottom");
x = event.pageX;
y = event.pageY;
mouse_pos = {"x": x, "y": y};
var dir = $p.get_dir(hover_dir.box[n], mouse_pos);
switch(dir){
case "left":
$p.addClass(hover_dir.target[n], "to-left");
break;
case "right":
$p.addClass(hover_dir.target[n], "to-right");
break;
case "top":
$p.addClass(hover_dir.target[n], "to-top");
break;
case "bottom":
$p.addClass(hover_dir.target[n], "to-bottom");
break;
default: break;
}
}
});
})(i);
}},
init: function(){
hover_dir.bindEvent();
}
};
hover_dir.init();
</script>
</body>
</html>

Comment ( 0 )

Sign in for post a comment

CSS
1
https://gitee.com/zoomlacms/zoomlacss.git
git@gitee.com:zoomlacms/zoomlacss.git
zoomlacms
zoomlacss
CSS+JS实现四个角度随机切入背景动画效果
master

Help Search