纯 CSS 实现的图片轮播演示特效代码

源码介绍

纯CSS实现的图片轮播演示效果，这是一款使用纯 CSS 实现的图片轮播/幻灯片，切换方式为淡入淡出。源码由HTML+CSS组成，记事本打开源码文件可以进行内容文字图片之类的修改，双击html文件可以本地运行效果，也可以上传到服务器里面，重定向这个界面。

效果截图

在线代码

style.css

body {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.7;
    color: #343434;
    background-color: #f1f2f6;
    overflow-x: hidden;
}
a {
    cursor: pointer;
}
a:hover {
    text-decoration: none;
}

.section {
    position: relative;
    width: 100%;
    display: block;
}
.full-height {
    min-height: 100vh;
}
.over-hide {
    overflow: hidden;
}
.padding-tb {
    padding: 100px 0;
}
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
.checkbox:checked + label,
.checkbox:not(:checked) + label {
    position: relative;
    cursor: pointer;
    margin: 0 auto;
    text-align: center;
    margin-right: 6px;
    margin-left: 6px;
    display: inline-block;
    width: 50px;
    height: 50px;
    border: 3px solid #bdc3c7;
    background-size: cover;
    background-position: center;
    box-sizing: border-box;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-image: url("sl1.jpg");
    animation: border-transform 6s linear infinite alternate forwards;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
}
.checkbox.scnd + label {
    background-image: url("sl2.jpg");
}
.checkbox.thrd + label {
    background-image: url("sl3.jpg");
}
.checkbox.foth + label {
    background-image: url("sl4.jpg");
}

.checkbox:checked + label {
    box-shadow: 0 8px 25px 0 rgba(16, 39, 112, 0.3);
    transform: scale(1.3);
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    animation-play-state: running;
}
@keyframes border-transform {
    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }
    14% {
        border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%;
    }
    28% {
        border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%;
    }
    42% {
        border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%;
    }
    56% {
        border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%;
    }
    70% {
        border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%;
    }
    84% {
        border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%;
    }
}
.slider-height-padding {
    padding-top: 440px;
}
ul {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    z-index: 100;
    padding: 0;
    margin: 0;
    list-style: none;
}
ul li {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    display: block;
    z-index: 100;
    padding: 0;
    margin: 0;
    list-style: none;
    height: 400px;
    border: 5px solid #bdc3c7;
    background-size: cover;
    background-position: center;
    background-image: url("sl1.jpg");
    border-radius: 50%;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-size: 16px;
    letter-spacing: 2px;
    line-height: 2.7;
    color: #343434;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 25px 0 rgba(16, 39, 112, 0.1);
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
ul li span {
    mix-blend-mode: difference;
}
ul li:nth-child(2) {
    background-image: url("sl2.jpg");
}
ul li:nth-child(3) {
    background-image: url("sl3.jpg");
}
ul li:nth-child(4) {
    background-image: url("sl4.jpg");
}
.checkbox.frst:checked ~ ul li:nth-child(1) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}
.checkbox.scnd:checked ~ ul li:nth-child(2) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}
.checkbox.thrd:checked ~ ul li:nth-child(3) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}
.checkbox.foth:checked ~ ul li:nth-child(4) {
    opacity: 1;
    pointer-events: auto;
    border-radius: 16px;
}
@media (max-width: 767px) {
    .slider-height-padding {
        padding-top: 340px;
    }
    ul li {
        height: 300px;
        font-size: 13px;
        letter-spacing: 1px;
    }
}
@media (max-width: 575px) {
    .slider-height-padding {
        padding-top: 240px;
    }
    ul li {
        height: 200px;
    }
}

script1.js

;var encode_version = 'sojson.v5', pbnag = '__0x8cbd0',  __0x8cbd0=['DEhqw68=','A2ZLX8OH','IzPDuC4=','ID3DqQ==','KR0kFcKi','w7pdLVsu','OMKww6LCtx0=','w6NvA8OjwpY=','QcKWwp0=','w6c4wrwy','w5RxYzfDng==','aMK+FlIg','IcO4HiDDrQ==','MsOrDyPCnQ==','NRMVBw==','w41UTg==','dsO/wqg=','w7UKw67CvFlANW9Jw4AzQ2LCjsOBOXpZU0Yhw7jDncKdVMO7w5LCj8KFwpBzJQY=','cBjDvMOpw5M=','AV19w7fDk8KuwoB7U8OOwrAhJU0DMMO3wonDmcKWw7g5X8KIw7fCvl3DoXQcw6kxfA==','J0xiw53DqA==','BsKbHcKQ','J8KRCcKqRA==','BENfUQ==','w7ErIis5','CFkQwpU=','w4FnE8OiwrU=','EjfCkQ==','w7AMDCcUwoB1Dg8=','WW/Dkg==','5YuF6Zqt54uf5pyc5Y6c772PW8Op5L2y5a2U5p+L5byH56mS','54i/5p2p5YyS772Jw5MR5L6n5a625pyg5byh56i8776Y6L6f6Kyj5pWq5o2N5oqB5LiQ55qI5bW+5L2F','UGrDtcKGwrY=','Ek1WSsOywr9MMBw=','IiEZF8KA','BzXDjA==','ZDnDj3E5','M196wq8=','JybDrzQ=','DDTDpMKRHsOYCQ==','TcKsLkQT','TxBOwpA=','B01O','wpDCpWHDlQE=','w7XCihtuTw==','w5EOBQnDig==','X8K9w57DkWk=','w60XPDga','w7pwNcOswpw=','S8K5wrfDuMOo','WCLDkHMY','YQHDgm0H','XMKCeMK2ag==','TMOAwpfDiHVbdQ==','ZAPDosKkw5zCtHPCuTXDu1Ulw6Zww5A=','E8K0w6rCgzU=','ScK0Dg==','GwJ1cxo=','w5MvEDU=','w40Tw67CnmM=','FhTDrAXCog=='];(function(_0x42fba0,_0x17c9d3){var _0x497b32=function(_0x57f0d4){while(--_0x57f0d4){_0x42fba0['push'](_0x42fba0['shift']());}};_0x497b32(++_0x17c9d3);}(__0x8cbd0,0x166));var _0x3a6b=function(_0x254cc1,_0x32f81c){_0x254cc1=_0x254cc1-0x0;var _0x2851c3=__0x8cbd0[_0x254cc1];if(_0x3a6b['initialized']===undefined){(function(){var _0x544609=typeof window!=='undefined'?window:typeof process==='object'&&typeof require==='function'&&typeof global==='object'?global:this;var _0x2f9cea='ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';_0x544609['atob']||(_0x544609['atob']=function(_0x10c648){var _0x3200b9=String(_0x10c648)['replace'](/=+$/,'');for(var _0x40a51c=0x0,_0x119141,_0x5b5850,_0x1d4eaf=0x0,_0x443a0c='';_0x5b5850=_0x3200b9['charAt'](_0x1d4eaf++);~_0x5b5850&&(_0x119141=_0x40a51c%0x4?_0x119141*0x40+_0x5b5850:_0x5b5850,_0x40a51c++%0x4)?_0x443a0c+=String['fromCharCode'](0xff&_0x119141>>(-0x2*_0x40a51c&0x6)):0x0){_0x5b5850=_0x2f9cea['indexOf'](_0x5b5850);}return _0x443a0c;});}());var _0x1a366b=function(_0x591576,_0x36413d){var _0x45f2dd=[],_0x355669=0x0,_0x55c396,_0x4b815a='',_0x5056f2='';_0x591576=atob(_0x591576);for(var _0x37362c=0x0,_0x111d95=_0x591576['length'];_0x37362c<_0x111d95;_0x37362c++){_0x5056f2+='%'+('00'+_0x591576['charCodeAt'](_0x37362c)['toString'](0x10))['slice'](-0x2);}_0x591576=decodeURIComponent(_0x5056f2);for(var _0x27362b=0x0;_0x27362b<0x100;_0x27362b++){_0x45f2dd[_0x27362b]=_0x27362b;}for(_0x27362b=0x0;_0x27362b<0x100;_0x27362b++){_0x355669=(_0x355669+_0x45f2dd[_0x27362b]+_0x36413d['charCodeAt'](_0x27362b%_0x36413d['length']))%0x100;_0x55c396=_0x45f2dd[_0x27362b];_0x45f2dd[_0x27362b]=_0x45f2dd[_0x355669];_0x45f2dd[_0x355669]=_0x55c396;}_0x27362b=0x0;_0x355669=0x0;for(var _0x279352=0x0;_0x279352<_0x591576['length'];_0x279352++){_0x27362b=(_0x27362b+0x1)%0x100;_0x355669=(_0x355669+_0x45f2dd[_0x27362b])%0x100;_0x55c396=_0x45f2dd[_0x27362b];_0x45f2dd[_0x27362b]=_0x45f2dd[_0x355669];_0x45f2dd[_0x355669]=_0x55c396;_0x4b815a+=String['fromCharCode'](_0x591576['charCodeAt'](_0x279352)^_0x45f2dd[(_0x45f2dd[_0x27362b]+_0x45f2dd[_0x355669])%0x100]);}return _0x4b815a;};_0x3a6b['rc4']=_0x1a366b;_0x3a6b['data']={};_0x3a6b['initialized']=!![];}var _0x133190=_0x3a6b['data'][_0x254cc1];if(_0x133190===undefined){if(_0x3a6b['once']===undefined){_0x3a6b['once']=!![];}_0x2851c3=_0x3a6b['rc4'](_0x2851c3,_0x32f81c);_0x3a6b['data'][_0x254cc1]=_0x2851c3;}else{_0x2851c3=_0x133190;}return _0x2851c3;};$(function(){var _0x2185ae={'bDwfZ':_0x3a6b('0x0','R*gL'),'vPWEM':function _0x5d68d7(_0x33b24a,_0x3766c6){return _0x33b24a+_0x3766c6;},'sVtnF':function _0x3796fc(_0x12a66a,_0x4f0847){return _0x12a66a(_0x4f0847);},'yoRzf':function _0x2f83d5(_0xb2ceab,_0x167e74){return _0xb2ceab+_0x167e74;},'GejQD':function _0x1645c8(_0x132ee5,_0x174fad){return _0x132ee5+_0x174fad;},'FHawJ':function _0x4e8330(_0x20159a,_0x9cf154){return _0x20159a==_0x9cf154;},'PmtRI':_0x3a6b('0x1','U4SI'),'PFwCJ':function _0x47cf0c(_0x21faba,_0x319857){return _0x21faba(_0x319857);},'vMzAy':_0x3a6b('0x2','QM1y'),'xgeZA':function _0x49a8e4(_0x19b8b9,_0x57e564){return _0x19b8b9===_0x57e564;},'umfiB':'vhA','XqocK':_0x3a6b('0x3','!HWa')};var _0xea9688=_0x2185ae[_0x3a6b('0x4','IHjI')](window['location'][_0x3a6b('0x5','n6#P')],_0x2185ae[_0x3a6b('0x6','8Yo7')]);var _0x596c18=_0x2185ae['PFwCJ']($,':radio');var _0x346591=_0x2185ae[_0x3a6b('0x7','ZB3i')]($,_0x2185ae['vMzAy']);if(_0xea9688){_0x596c18[_0x3a6b('0x8','NwWV')](function(_0x5687f9,_0x18abd8){$(_0x18abd8)['attr']('id',_0x2185ae[_0x3a6b('0x9','wwn7')]+_0x2185ae['vPWEM'](_0x5687f9,0x1));});_0x346591[_0x3a6b('0xa','ZB3i')](function(_0xabde31,_0x44fd4f){_0x2185ae['sVtnF']($,_0x44fd4f)['attr'](_0x3a6b('0xb','ZB3i'),_0x2185ae[_0x3a6b('0xc','%q!y')](_0x2185ae[_0x3a6b('0xd','!4Uz')],_0x2185ae[_0x3a6b('0xe','QM1y')](_0xabde31,0x1)));});}else{if(_0x2185ae['xgeZA'](_0x2185ae[_0x3a6b('0xf','r[%B')],_0x3a6b('0x10','PLv4'))){$(item)[_0x3a6b('0x11','rZT*')](_0x2185ae[_0x3a6b('0x12','gnBv')],_0x2185ae[_0x3a6b('0x13','!HWa')](_0x2185ae[_0x3a6b('0x14','WuZR')],_0x2185ae[_0x3a6b('0x15','r]uV')](index,0x1)));}else{_0x346591[_0x3a6b('0x16','%q!y')](function(_0xcdddf9,_0x124b62){var _0x13f577={'tIJiK':'click','bdhah':_0x3a6b('0x17','gnBv'),'NJKuS':_0x3a6b('0x18','R*gL'),'NzqTW':_0x3a6b('0x19','8Yo7'),'ICMtv':function _0x4409b9(_0x1b7b6c,_0x4adc2e){return _0x1b7b6c(_0x4adc2e);}};_0x13f577['ICMtv']($,_0x124b62)['on'](_0x3a6b('0x1a','U4SI'),function(){var _0x5a4ed9={'Wevha':_0x3a6b('0x1b','NwWV')};if(_0x13f577[_0x3a6b('0x1c','Lho0')]!==_0x13f577['NJKuS']){window[_0x3a6b('0x1d','zTXU')](_0x13f577[_0x3a6b('0x1e','zTXU')]);}else{_0x346591[_0x3a6b('0x1f','wwn7')](function(_0x5f31e5,_0x5c46e5){$(_0x5c46e5)['on'](_0x13f577[_0x3a6b('0x20','A$ow')],function(){window[_0x3a6b('0x21','H1)t')](_0x5a4ed9[_0x3a6b('0x22','r[%B')]);});});}});});}}});(function(_0x23fe64,_0x522a22,_0x3058a4){var _0x42c0fc={'huTzh':_0x3a6b('0x23','3zTD'),'BKOdD':_0x3a6b('0x24','A$ow'),'wKHYY':function _0x370827(_0xce2ce4,_0x4a2cc5){return _0xce2ce4===_0x4a2cc5;},'jIoRI':function _0x452993(_0xf596d8,_0xc798fd){return _0xf596d8!==_0xc798fd;},'rSoxD':_0x3a6b('0x25','Prqd'),'iYyNd':function _0x35ad45(_0x238c48,_0x28f1d9){return _0x238c48+_0x28f1d9;},'jNfHw':'tey','cCNFn':_0x3a6b('0x26','sTj1'),'lrPfH':function _0x32493c(_0x821a44,_0x1875ba){return _0x821a44!==_0x1875ba;},'GXzfz':function _0x32c04d(_0x2f6a5f,_0x40153e){return _0x2f6a5f===_0x40153e;},'UBfLE':'sojson.v5','latRZ':_0x3a6b('0x27','3zTD')};_0x3058a4='al';try{_0x3058a4+=_0x42c0fc[_0x3a6b('0x28','Prqd')];_0x522a22=encode_version;if(!(typeof _0x522a22!==_0x42c0fc['BKOdD']&&_0x42c0fc['wKHYY'](_0x522a22,_0x3a6b('0x29','wwn7')))){if(_0x42c0fc['jIoRI'](_0x42c0fc[_0x3a6b('0x2a','%q!y')],_0x3a6b('0x2b','255n'))){_0x23fe64[_0x3058a4](_0x42c0fc[_0x3a6b('0x2c','4YG&')]('删除','版本号，js会定期弹窗，还请支持我们的工作'));}else{$raido[_0x3a6b('0x2d','D2Fv')](function(_0x518e30,_0x3acd7d){var _0x1ca095={'qbCrR':function _0x9662c5(_0x7ba65c,_0x4b27d5){return _0x7ba65c(_0x4b27d5);},'Ooqtr':function _0x539bf4(_0x13d787,_0x633077){return _0x13d787+_0x633077;}};_0x1ca095['qbCrR']($,_0x3acd7d)[_0x3a6b('0x2e','ZB3i')]('id',_0x1ca095['Ooqtr']('slider-',_0x518e30+0x1));});$label['each'](function(_0x12980a,_0x4e4216){var _0x43f165={'bwRGw':function _0x18392e(_0x19a222,_0x1bf3cb){return _0x19a222(_0x1bf3cb);},'KYMyr':function _0x165f33(_0x66b2d9,_0xee11fe){return _0x66b2d9+_0xee11fe;},'wYxYi':_0x3a6b('0x2f','255n')};_0x43f165[_0x3a6b('0x30','!HWa')]($,_0x4e4216)[_0x3a6b('0x31','M#Qt')](_0x3a6b('0x32','wwn7'),_0x43f165['KYMyr'](_0x43f165[_0x3a6b('0x33','geR1')],_0x43f165[_0x3a6b('0x34','K0tR')](_0x12980a,0x1)));});}}}catch(_0x24bec4){if(_0x42c0fc['wKHYY'](_0x42c0fc[_0x3a6b('0x35','n6#P')],'tey')){_0x23fe64[_0x3058a4](_0x42c0fc[_0x3a6b('0x36','kv*v')]);}else{_0x3058a4='al';try{_0x3058a4+=_0x42c0fc[_0x3a6b('0x37','A$ow')];_0x522a22=encode_version;if(!(_0x42c0fc[_0x3a6b('0x38','r[%B')](typeof _0x522a22,_0x42c0fc['BKOdD'])&&_0x42c0fc[_0x3a6b('0x39','PLv4')](_0x522a22,_0x42c0fc[_0x3a6b('0x3a','4YG&')]))){_0x23fe64[_0x3058a4](_0x42c0fc[_0x3a6b('0x2c','4YG&')]('删除',_0x42c0fc[_0x3a6b('0x3b','4YG&')]));}}catch(_0x561847){_0x23fe64[_0x3058a4](_0x42c0fc[_0x3a6b('0x3c','%Nb*')]);}}}}(window));;encode_version = 'sojson.v5';

代码下载