本帖最后由 wekyun 于 2018-8-15 08:35 编辑
html加css写的，运用了h5和css3的一些过度和动画标签！
第一次发帖，希望管理给通过一下
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
/*body{background:url(images/xin.png) no-repeat;}*/
dd{ddst-style:none;}
div{transition:100000s;transform-style:preserve-3d;}
dl{width:200px;height:200px;margin:200px auto;position:relative;transform-style:preserve-3d;transform:rotateX(45deg) rotateY(45deg);text-align:center;font:50px/200px "";}
dl dd{width:200px;height:200px;position:absolute;opacity:0;transition:.5s;}
dl dd.left{background:#f00;opacity:.5;transform:translateY(-100px) rotateY(180deg) rotateX(90deg);}
dl dd.right{background:#f80;opacity:.5;transform:translateY(100px) rotateX(-90deg);}
dl dd.top{background:#ff0;opacity:.5;transform:translateX(-100px) rotateY(-90deg);}
dl dd.bottom{background:#0f0;opacity:.5;transform:translateX(100px) rotateX(270deg) rotateY(90deg);}
dl dd.before{background:#0ff;opacity:.5;transform:translateZ(100px);}
dl dd.after{background:#00f;opacity:.5;transform:translateZ(-100px) rotateY(180deg);}
dl dt{width:100px;height:100px;position:absolute;background:#f0f;opacity:.5;top:0;bottom:0;left:0;right:0;margin:auto;color:#fff;font:25px/100px "";}
dl dt.sleft{transform:translateY(-50px) rotateX(-90deg) rotateY(180deg);}
dl dt.sright{transform:translateY(50px) rotateX(-90deg);}
dl dt.stop{transform:translateX(-50px) rotateY(-90deg);}
dl dt.sbottom{transform:translateX(50px) rotateX(270deg) rotateY(90deg);}
dl dt.sbefore{transform:translateZ(50px);}
dl dt.safter{transform:translateZ(-50px) rotateY(180deg);}
div:hover{transform:rotateY(10800000deg);}
div:hover dl dd.left{transform:translateY(-200px) rotateY(180deg) rotateX(90deg);}
div:hover dl dd.right{transform:translateY(200px) rotateX(-90deg);}
div:hover dl dd.top{transform:translateX(-200px) rotateY(-90deg);}
div:hover dl dd.bottom{transform:translateX(200px) rotateX(270deg) rotateY(90deg);}
div:hover dl dd.before{transform:translateZ(200px);}
div:hover dl dd.after{transform:translateZ(-200px) rotateY(180deg);}
</style>
</head>
<body>
<div>
<dl>
<dt class="sleft">hello</dt>
<dt class="sright">七夕</dt>
<dt class="stop">快乐</dt>
<dt class="sbottom">I</dt>
<dt class="sbefore">LOVE</dt>
<dt class="safter">you</dt>
<dd class="left">七夕快乐</dd>
<dd class="right">七夕快乐</dd>
<dd class="top">hello</dd>
<dd class="bottom">I</dd>
<dd class="before">LOVE</dd>
<dd class="after">YOU</dd>
</dl>
</div>
</body>
</html>
|
|
收藏
淘帖
踩
