老铁们，大家好，相信还有很多朋友对于炫酷网站源码分享大全和酷炫网站欣赏的相关问题不太懂，没关系，今天就由我来为大家分享分享炫酷网站源码分享大全以及酷炫网站欣赏的问题，文章篇幅可能偏长，希望可以帮助到大家，下面一起来看看吧！
效果图
各位观众大家好，今天给大家带来的是
HTML5焦点图片波浪过渡效果切换动画特效
是不是很炫酷！
代码过长需要文档版源码来我的前端群581549454，已上传到群文件
废话不多说上源码
网站样式源码：
<!doctypehtml>
<html>
<head>
<metacharset=”utf-8″>
<title>HTML5焦点图片波浪过渡效果切换动画特效</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
.parent{
width:681px;
height:384px;
top:0;
bottom:0;
left:0;
right:0;
margin:autoauto;
overflow:hidden;
position:absolute;
-webkit-box-shadow:0088px5pxrgba(0,0,0,0.75);
-moz-box-shadow:0088px5pxrgba(0,0,0,0.75);
box-shadow:0088px5pxrgba(0,0,0,0.75);
}
svg{
position:absolute;
z-index:1;
width:681px;
height:384px;
}
button{
position:absolute;
z-index:50;
width:40px;
overflow:hidden;
height:40px;
border:none;
border-radius:50%;
background:fff;
fill:none;
transition:0.3s;
}
svg2circle{
transition-timing-function:linear;
}
Capa_2{
position:absolute;
width:16px;
height:16px;
transform:translate(-9px,-8px);
}
.right{
margin-left:628px;
margin-top:168px;
border:1pxsolidfff;
}
.left{
margin-left:0.5%;
margin-top:6.17%;
border:1pxsolidfff;
}
.circle1{
transition-delay:0.05s;
}
.circle2{
transition-delay:0.1s;
}
.circle3{
transition-delay:0.15s;
}
.circle4{
transition-delay:0.2s;
}
.circle5{
transition-delay:0.25s;
}
.circle6{
transition-delay:0.3s;
}
.circle7{
transition-delay:0.35s;
}
.circle8{
transition-delay:0.4s;
}
.circle9{
transition-delay:0.45s;
}
.circle10{
transition-delay:0.05s;
}
.circle11{
transition-delay:0.1s;
}
.circle12{
transition-delay:0.15s;
}
.circle13{
transition-delay:0.2s;
}
.circle14{
transition-delay:0.25s;
}
.circle15{
transition-delay:0.3s;
}
.circle16{
transition-delay:0.35s;
}
.circle17{
transition-delay:0.4s;
}
.circle18{
transition-delay:0.45s;
}
.slide1{
background-image:url(“img/1.jpg”);
}
.slide2{
background-image:url(“img/2.jpg”);
}
.slide3{
background-image:url(“img/3.jpg”);
}
.slide4{
background-image:url(“img/4.jpg”);
}
.slider{
position:absolute;
width:400%;
height:100%;
background:fff;
font-size:62px;
padding-top:138px;
font-weight:800;
font-family:’Heebo’,sans-serif;
text-align:center;
width:25%;
height:100%;
z-index:10;
transition:1.4s;
}
.tran{
transform:scale(1.3);
}
.up1{
z-index:20;
}
.up2{
z-index:40;
}
.steap{
stroke-width:0;
}
.streak{
stroke-width:82px;
}
@media(max-width:700px){
.parent{
margin-left:1%;
}
}
</style>
</head>
<body><scriptsrc=”/demos/googlegg.js”></script>
<divclass=’parent’>
<divclass=’slider’>
<buttontype=”button”id=’right’class=’right’name=”button”>
<svgversion=”1.1″id=”Capa_1″width=’40px’height=’40px’xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”x=”0px”y=”0px”
viewBox=”00477.175477.175″style=”enable-background:new00477.175477.175;”xml:space=”preserve”>
<g>
<pathstyle=’fill:9d9d9d;’d=”M145.188,238.575l215.5-215.5c5.3-5.3,5.3-13.8,0-19.1s-13.8-5.3-19.1,0l-225.1,225.1c-5.3,5.3-5.3,13.8,0,19.1l225.1,225
c2.6,2.6,6.1,4,9.5,4s6.9-1.3,9.5-4c5.3-5.3,5.3-13.8,0-19.1L145.188,238.575z”>
</g>
</svg>
</button>
<svgid=’svg2’class=’up2’xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”>
<circleid=’circle1’class=’circle1steap’cx=”34px”cy=”49%”r=”20″/>
<circleid=’circle2’class=’circle2steap’cx=”34px”cy=”49%”r=”100″/>
<circleid=’circle3’class=’circle3steap’cx=”34px”cy=”49%”r=”180″/>
<circleid=’circle4’class=’circle4steap’cx=”34px”cy=”49%”r=”260″/>
<circleid=’circle5’class=’circle5steap’cx=”34px”cy=”49%”r=”340″/>
<circleid=’circle6’class=’circle6steap’cx=”34px”cy=”49%”r=”420″/>
<circleid=’circle7’class=’circle7steap’cx=”34px”cy=”49%”r=”500″/>
<circleid=’circle8’class=’circle8steap’cx=”34px”cy=”49%”r=”580″/>
<circleid=’circle9’class=’circle9steap’cx=”34px”cy=”49%”r=”660″/>
</svg>
<svgid=’svg1’class=’up2’xmlns=”http://www.w3.org/2000/svg”xmlns:xlink=”http://www.w3.org/1999/xlink”>
<circleid=’circle10’class=’circle10steap’cx=”648px”cy=”49%”r=”20″/>
<circleid=’circle11’class=’circle11steap’cx=”648px”cy=”49%”r=”100″/>
<circleid=’circle12’class=’circle12steap’cx=”648px”cy=”49%”r=”180″/>
<circleid=’circle13’class=’circle13steap’cx=”648px”cy=”49%”r=”260″/>
<circleid=’circle14’class=’circle14steap’cx=”648px”cy=”49%”r=”340″/>
<circleid=’circle15’class=’circle15steap’cx=”648px”cy=”49%”r=”420″/>
<circleid=’circle16’class=’circle16steap’cx=”648px”cy=”49%”r=”500″/>
<circleid=’circle17’class=’circle17steap’cx=”648px”cy=”49%”r=”580″/>
<circleid=’circle18’class=’circle18steap’cx=”648px”cy=”49%”r=”660″/>
</svg>
<divid=’slide1’class=’slide1up1′>MOUNTAIN</div>
<divid=’slide2’class=’slide2′>BEACH</div>
<divid=’slide3’class=’slide3′>FOREST</div>
<divid=’slide4’class=’slide4′>DESERT</div>
</div>
</div><script>
varcurpage=1;
varsliding=false;
varclick=true;
varleft=document.getElementById(‘left’);
varright=document.getElementById(‘right’);
varpagePrefix=’slide’;
varpageShift=500;
vartransitionPrefix=’circle’;
varsvg=true;
functionleftSlide(){
if(click){
if(curpage==1)curpage=5;
console.log(‘woek’);
sliding=true;
curpage–;
svg=true;
click=false;
for(k=1;k<=4;k++){
vara1=document.getElementById(pagePrefix+k);
a1.className+=’tran’;
}
setTimeout(()=>{
move();
},200);
setTimeout(()=>{
for(k=1;k<=4;k++){
vara1=document.getElementById(pagePrefix+k);
a1.classList.remove(‘tran’);
};
},1400);
}
}
functionrightSlide(){
if(click){
if(curpage==4)curpage=0;
console.log(‘woek’);
sliding=true;
curpage++;
svg=false;
click=false;
for(k=1;k<=4;k++){
vara1=document.getElementById(pagePrefix+k);
a1.className+=’tran’;
}
setTimeout(()=>{
move();
},200);
setTimeout(()=>{
for(k=1;k<=4;k++){
vara1=document.getElementById(pagePrefix+k);
a1.classList.remove(‘tran’);
};
},1400);
}
}
functionmove(){
if(sliding){
sliding=false;
if(svg){
for(j=1;j<=9;j++){
varc=document.getElementById(transitionPrefix+j);
c.classList.remove(“steap”);
c.setAttribute(“class”,(transitionPrefix+j)+”streak”)
console.log(‘streak’);
}
}else{
for(j=10;j<=18;j++){
varc=document.getElementById(transitionPrefix+j);
c.classList.remove(“steap”);
c.setAttribute(“class”,(transitionPrefix+j)+”streak”)
console.log(‘streak’);
}
}
//for(k=1;k<=4;k++){
//vara1=document.getElementById(pagePrefix+k);
//a1.className+=’tran’;
//}
setTimeout(()=>{
for(i=1;i<=4;i++){
if(i==curpage){
vara=document.getElementById(pagePrefix+i);
a.className+=’up1′;
}else{
varb=document.getElementById(pagePrefix+i);
b.classList.remove(“up1”);
}
};
sliding=true;
},600);
setTimeout(()=>{
click=true;
},1700);
setTimeout(()=>{
if(svg){
for(j=1;j<=9;j++){
varc=document.getElementById(transitionPrefix+j);
c.classList.remove(“streak”);
c.setAttribute(“class”,(transitionPrefix+j)+”steap”);
}
}else{
for(j=10;j<=18;j++){
varc=document.getElementById(transitionPrefix+j);
c.classList.remove(“streak”);
c.setAttribute(“class”,(transitionPrefix+j)+”steap”);
}
sliding=true;
}
},850);
setTimeout(()=>{
click=true;
},1700);
}
}
left.onmousedown=()=>{
leftSlide();
}
right.onmousedown=()=>{
rightSlide();
}
document.onkeydown=(e)=>{
if(e.keyCode==37){
leftSlide();
}
elseif(e.keyCode==39){
rightSlide();
}
}
//forcodepenheader
setTimeout(()=>{
rightSlide();
},500)
</script>
<divstyle=”text-align:center;margin:50px0;font:normal14px/24px’MicroSoftYaHei’;”>
</div>
</body>
</html>
关于本次炫酷网站源码分享大全和酷炫网站欣赏的问题分享到这里就结束了，如果解决了您的问题，我们非常高兴。