js实现涟漪过渡全屏幻灯片效果代码-html代码-BFW代码库

js实现涟漪过渡全屏幻灯片效果代码

代码语言：html

所属分类：幻灯片

代码描述：js实现涟漪过渡全屏幻灯片效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">



    <style>
        .info {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 9999999;
          margin: 1.5rem;
        }
        @import url(https://fonts.googleapis.com/css?family=Montserrat:700);
        *, *::before, *::after {
        	box-sizing: border-box;
        	padding: 0;
        	margin: 0;
        	border: 0;
        }
        html {
        	font-size: 10px;
        	font-size: calc(5px + 0.4vw);
        }
        body {
        	font-family: 'Montserrat', sans-serif;
          font-weight: 700;
        	font-size: 1rem;
        	color: #fff;
        }
        a {
          text-decoration: none;
          color: rgba(225, 255, 255, .8);
        }
        /* Slider style */
        .cd-slider {
        	position: relative;
        	width: 100%;
        	height: 100vh;
        	overflow: hidden;
        }
        .cd-slider.ie9 nav div span {
        	display: none;
        }
        .cd-slider ul li {
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        	visibility: hidden;
        	transition: visibility 0s .6s;
        }
        .cd-slider ul li::before {
        	content: '';
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	border-radius: 100%;
        	width: 135vh;
        	height: 135vh;
        	border: solid rgba(0,0,0,0.2);
        	border-width: 0;
        	transform: translate(-50%, -50%);
        	pointer-events: none;
        	transition: border-width .4s .6s;
        }
        .content {
        	position: absolute;
        	top: 0;
        	left: 0;
        	width: 100%;
        	height: 100%;
        	background-position: 50% 100%;
        	background-.........完整代码请登录后点击上方下载按钮下载查看