H 5回転切り替えアニメーション効果コード.
暇で大丈夫、コードを叩くのもいいし、、、、
アニメーションの効果は次のとおりです.
具体的なコードは以下の通りです.
ちょうど自分の好きな新しい仕事を探し当てて、ずっと努力して进歩して、努力して试用期间を通じて(通って).
アニメーションの効果は次のとおりです.
具体的なコードは以下の通りです.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../Util/jquery-3.3.1.min.js">script>
<title>H5 title>
<style>
*{margin:0;padding:0}
.clear::after{content:"";display:block;clear:both;}
.banner{width:400px;margin:40px auto;}
.banner .box{margin:auto;width:420px;overflow: hidden;}
.banner .box ul{position:relative;width:1000px;padding:30px 0;}
.banner .box .active{transform:scale(1.5) rotate(360deg);transition: all 0.5s ease-in-out;/* ， */}
.banner .box ul li{float:left;height:100px;width:100px;margin:0 20px;font-size:46px;color:#fff;line-height:100px;text-align:center;list-style:none;transition: all 0.5s ease-in-out;/* ， ， ， ， */}
.scroll{height:200px;width:200px;margin:auto;}
.scroll .box{width:200px;height:200px;overflow: hidden;}
.scroll .box ul{width:400px;height:400px;transform: rotate(0deg);}
.scroll .box ul li{float:left;height:200px;width:200px;font-size:46px;color:#fff;line-height:200px;text-align:center;list-style: none;}
.scroll .box ul li:nth-of-type(2){transform:rotate(90deg);}
.scroll .box ul li:nth-of-type(3){transform:rotate(270deg);}
.scroll .box ul li:nth-of-type(4){transform:rotate(180deg);}
style>
head>
<body>
<h2 style="text-align:center;margin-bottom:10px;"> h2>
<div class="banner">
<div class="box">
<ul class="clear">
<li style="background:lawngreen">1li>
<li style="background:red" class="active">2li>
<li style="background:blue">3li>
<li style="background:yellow">4li>
<li style="background:pink">5li>
<li style="background:orange">6li>
ul>
div>
div>
<h2 style="text-align:center;margin-bottom:10px;"> h2>
<div class="scroll">
<div class="box">
<ul class="clear">
<li style="background:indigo">1li>
<li style="background:pink">2li>
<li style="background:orange">4li>
<li style="background:green">3li>
ul>
div>
div>
body>
html>
<script>
(function(select){
var outBox = $(select);
var box = outBox.find(".box");
var ul = outBox.find("ul");
var li = outBox.find("li");
var num = li.length;
var width = li.width() + 40;
ul.find("li.active").animate({"scale" : "0"},1000)
console.log(outBox);
var start = 0;
setInterval(function(){
ul.animate({"left": "-=" + width + "px"},1000,function(){
$(this).append($(this).find("li").eq(0)).css({"left": "0px"});
})
ul.find("li.active").removeClass("active").next().addClass("active");
},2000);
})(".banner");
(function(select){
var outBox = $(select);
var ul = outBox.find("ul");
var start = 1;
function rotate(elem, step, time ,deg){
var olddeg = ul.get(0).style.webkitTransform ? parseInt(ul.get(0).style.webkitTransform.replace("rotate(-","")) : 0;
setInterval(function(){
//console.log(olddeg)
if(step <= deg){
var rotatedeg = olddeg + step;
elem.style.webkitTransform = "rotate(-" + rotatedeg + "deg" + ")";
step++;
}
},time);
}
setInterval(function(){
rotate(ul.get(0), 1, 10,90);
},2000);
})(".scroll");
script>ちょうど自分の好きな新しい仕事を探し当てて、ずっと努力して进歩して、努力して试用期间を通じて(通って).