js轮播图自动切换和css做页面自动渐变文情-

js轮播图自动切换和css页面自动渐变

效果如下：

可以去jq官网学习：https://www.jq22.com/
部分代码如下：

 <div class="swiper-container" id="case1">       <div class="swiper-wrapper">      <div class="swiper-slide"><img src="img/t1.png" ></div>      <div class="swiper-slide"><img src="img/t2.png" ></div>      <div class="swiper-slide"><img src="img/t4.png" ></div>       </div>       <!-- 导航按钮 上一页下一页 -->       <div class="swiper-button-prev"></div>       <div class="swiper-button-next"></div>       <!-- 分页器 -->       <div class="swiper-pagination"></div>       <!-- 滚动条 -->        <div class="swiper-scrollbar"></div>     </div> 

<style type="text/css">    *{margin: 0; padding: 0;} p{text-align: center;} img{ width: 43.75rem; height: 18.125rem; } .swiper-container{ width: 43.75rem; height: 18.125rem; margin:0 auto; } .swiper-button-next { right: 20px; left: auto; } .swiper-button-prev { left: 20px; right: auto; } /* css定义分页，导航按钮颜色 */ #case5{ --swiper-theme-color: #ff6600; --swiper-pagination-color: #00ff33;/* 两种都可以 */ } #case6 img,#case7 img{transform: scale(0.7);} #case7{ width:auto; }   </style> 

var mySwiper = new Swiper('#case1', {    autoplay: true,//可选选项，自动滑动    initialSlide :1,//默认显示第二张图片索引从0开始    speed:2000,//设置过度时间 /* grabCursor: true,//鼠标样式根据浏览器不同而定 */     autoplay : {     delay:3000 }, /*  设置每隔3000毫秒切换 */ <!-- 分页器 -->     pagination: {       el: '.swiper-pagination',       clickable :true, }, <!-- 导航按钮 上一页下一页 -->     navigation: {       nextEl: '.swiper-button-next',       prevEl: '.swiper-button-prev', }, <!-- 滚动条 -->     scrollbar: {       el: '.swiper-scrollbar',       hide:true, }, /*  设置当鼠标移入图片时是否停止轮播*/    autoplay: {     disableOnInteraction: false, }, }); </script> 

css 页面自动渐变 效果如下：

     <div class="btn">      <p>自动渐变颜色</p>  </div> 

<style>   body { margin: 0; padding: 0; background: linear-gradient(70deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400%; animation: bganimation 5s infinite; } .btn { color: white; text-align: center; text-transform: uppercase; margin: 400px 0; font-size: 22px; } @keyframes bganimation { 0%{ background-position: 50% 50%; } 50%{ background-position: 100% 100%; } 100%{ background-position: 50% 50%; } }    </style>