怎么用html5做出这种效果

发布网友发布时间：2022-05-12 07:44

共4个回答

懂视网时间：2022-05-12 12:06

类似猎豹浏览器安装时的用户须知效果。

点击后效果

代码如下:

<!DOCTYPE html>
<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>fold paper effect by gt-柯乐义</title>
 <style>
#wrapper {
 -webkit-perspective: 55cm;
 -webkit-perspective-origin: 50% 50%;
 text-align: center;
}
.paper {
 position: relative;
 height: 40px;
 width: 5em;
 margin: 0;
 background-color: aqua;
 -webkit-transition: -webkit-transform 1s linear;
}
</style>
 <script type="text/javascript">
 window.angel = 0;
 window.timer;
 function fold() {
 var foldUp = document.getElementById("foldUp");
 var foldDown = document.getElementById("foldDown");
 var down = document.getElementById("down");
 if (window.angel == 0) {
 window.timer = setInterval(function() {
 var diff = different(-1, 20);
 console.log(foldUp.offsetTop)
 move(foldUp, diff, 1);
 move(foldDown, diff, 3);
 move(down, diff, 4);
 }, 40);
 setTimeout(function() {
 clearInterval(window.timer);
 foldUp.style.top = "-20px";
 foldDown.style.top = "-60px";
 down.style.top = "-80px";
 window.angel = -90;
 }, 1030);
 foldUp.style.webkitTransform = "rotateX(-90deg)";
 foldDown.style.webkitTransform = "rotateX(90deg)";
 } else if (angel == -90) {
 window.timer = setInterval(function() {
 var diff = different(1, 20);
 console.log(foldUp.offsetTop)
 move(foldUp, diff, 1);
 move(foldDown, diff, 3);
 move(down, diff, 4);
 }, 40);
 setTimeout(function() {
 clearInterval(window.timer);
 foldUp.style.top = "0";
 foldDown.style.top = "0";
 down.style.top = "0";
 window.angel = 0;
 }, 1030);
 foldUp.style.webkitTransform = "rotateX(0deg)";
 foldDown.style.webkitTransform = "rotateX(0deg)";
 } else {
 console.log(window.angel)
 }
 }
 function positionValue(p, type) {// 得到css带单位的值
 var str = p.style[type];
 str = str.substring(0, str.length - 2);
 var value = parseInt(str);
 if (isNaN(value)) {
 value = 0;
 }
 return value;
 }
 function move(p, different, time) {
 var top = positionValue(p, "top");
 p.style.top = top + different * time + "px";
 }
 function different(direction, height) {
 var lastAngel = window.angel;
 window.angel += 3.6 * direction;
 var different = Math
 .ceil((Math.cos(window.angel / 180 * Math.PI) - Math
 .cos(lastAngel / 180 * Math.PI))
 * height * 100) / 100;
 return different;
 }
</script>
 </head>
 <body>
 <p id="wrapper">
 <p id="up" class="paper">
 g
 </p>
 <p id="foldUp" class="paper">
 n
 </p>
 <p id="foldDown" class="paper">
 b
 </p>
 <p id="down" class="paper">
 t
 </p>
 </p>
 <button onclick=fold();>
 fold
 </button>
 </body>
</html>

热心网友时间：2022-05-12 09:14

你上百度搜一下，*联动下拉菜单。这种效果要后台配合的。里面的城市要从后台拿，也不知道你么后台是什么，PHP么，还是Java。不懂继续追问吧，你问的不够清楚。

热心网友时间：2022-05-12 10:32

普遍的思维方式是：两张图片的互换

热心网友时间：2022-05-12 12:06

这是使用的插件，不是单纯的写出来的