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

代码语言：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-size: auto 100%;
        	background-repeat: no-repeat;
        	mix-blend-mode: lighten;
        	opacity: 0;
        	transform: scale(1.2);
        	transition: opacity .4s .6s, transform .4s .6s;
        }
        .content blockquote {
        	position: absolute;
        	bottom: 5%;
        	left: 4%;
        	z-index: 2;
        	max-width: 45%;
        }
        blockquote p {
        	font-size: 4rem;
        	margin-bottom: 2rem;
        }
        blockquote span {
        	font-size: 1.4rem;
        }
        /* current slide
        ---------------------------------*/
        .cd-slider li.current_slide {
        	visibility: visible;
        }
        .cd-slider li.current_slide::before {
        	border-width: 16rem;
        }
        .cd-slider li.current_slide .content {
        	opacity: 1;
        	transform: scale(1);
        }
        /* nav
        ---------------------------------*/
        nav div {
        	position: absolute;
        	top: 50%;
        	left: 4%;
        	width: 5rem;
        	height: 5rem;
        	margin-top: -2.5rem;
        	list-style: none;
        }
        nav div:last-of-type {
        	left: auto;
        	right: 4%;
        }
        .prev, .next {
        	position: relative;
        	z-index: 100;
        	width: 100%;
        	height: 100%;
        	display: block;
        	border-radius: 100%;
        	transition: box-shadow .3s;
        }
        .prev::before, .prev::after, .next::before, .next::after {
        	content: '';
        	position: absolute;
        	left: 43%;
        	background: #fff;
        	width: .4rem;
        	min-width: 3px;
        	border-radius: 3px;
        	height: 34%;
        }
        .prev::before {
        	transform: rotate(45deg);
        	top: 24%;
        }
        .prev::after {
        	transform: rotate(-45deg);
        	bottom: 24%;
        }
        .next::before, .next::after {
        	left: auto;
        	right: 43%;
        }
        .next::before {
        	transform: rotate(-45deg);
        	top: 24%;
        }
        .next::after {
        	transform: rotate(45deg);
        	bottom: 24%;
        }
        .prev:hover, .next:hover {
        	box-shadow: 0 0 0 1rem rgba(0, 0, 0, 0.15);
        }
        nav > div > span {
        	position: absolute;
        	top: 50%;
        	left: 50%;
        	width: 0;
        	height: 0;
        	border-radius: 100%;
        	z-index: 5;
        	pointer-events: none;
        	will-change: width, height;
        	transform: translate(-50%, -50%);
        	transition: width .6s, height .6s;
        }
    </style>



</head>

<body>
  
    <section class="cd-slider">
        <ul>
            <li data-color="#FF384B">
                <div class="content" style="background-image:url(//repo.bfw.wiki/bfwrepo/icon/6188d5f051b8e.png)">
                    <blockquote>
                        <p>I got my red dress on tonight dancing in the dark in the pale moonlight.</p>
                        <span>Summertime Sadness - Lana Del Rey</span>
                    </blockquote>
                </div>
            </li>
            <li data-color="#FF9C00">
                <div class="content" style="background-image:url(//repo.bfw.wiki/bfwrepo/icon/6188d5f051b8e.png)">
                    <blockquote>
                        <p>Will you still love me When I'm no longer young and beautiful Will you still love me</p>
                        <span>Young And Beautiful - Lana Del Rey</span>
                    </blockquote>
                </div>
            </li>
            <li data-color="#002AFF">
                <div class="content" style="background-image:url(//repo.bfw.wiki/bfwrepo/icon/6188d5f051b8e.png)">
         .........完整代码请登录后点击上方下载按钮下载查看