css3制作酷炫的相册集动画

Posted 2021-04-09 100素材网

（给100素材网点亮★号，提升开发技能）

通过css3 style属性和svg代码制作酷炫的图片相册动画特效

特效说明：默认加载时图片黑白色倾斜重叠摆置，当鼠标悬浮于对应图片时图片显示彩色效果并有过度动画

box-shadow：设置图片阴影效果

transition：过度动画

transform-origin：设置旋转元素的基点位置

transform: rotate(deg)：图片倾斜角度值  

:first-child：伪类设置第一张图片倾斜角度

:last-child：伪类设置最后一张图片倾斜角度

filter：图片颜色滤镜效果

效果图：

html代码：

<div class="cardfan">
  <img src="florence.jpg" id="roma">
  <img src="roma.jpg" id="aqueduct">
  <img src="bike.jpg" id="bike">
</div>

svg代码：

svg代码用于处理图片颜色滤镜特效

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
<feGaussianBlur stdDeviation="3" />
</filter>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0.3333 0.3333 0.3333 0 0
0 0 0 1 0" />
</filter>
</svg>

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="sepia">
<feColorMatrix values="0.14 0.45 0.05 0 0
0.12 0.39 0.04 0 0
0.08 0.28 0.03 0 0
0 0 0 1 0" />
</filter>
</svg>

css代码：

div.cardfan { 
  width: 33%;
  margin: 2rem auto;
  position: relative; 
}
div.cardfan img { 
  position: absolute; 
  width: 100%; 
  height: auto; 
  border: 12px solid #ffe; 
  box-shadow: 4px 4px 3px rgba(0, 0, 0, 0.2); 
  transform-origin: center 400px; 
  transition: all 1s linear; 
}
div.cardfan img:first-child { 
  transform: rotate(5deg);  
}
div.cardfan img:last-child { 
  transform: rotate(-5deg); 
}
div.cardfan:hover img:first-child { 
  transform: rotate(25deg); 
}
div.cardfan:hover img:last-child { 
  transform: rotate(-25deg);  
}

img#aqueduct {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(#greyscale);
  filter: gray;
}
img#aqueduct:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  filter: none;
}
img#bike {
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  filter: url(#sepia);
  background-color: #5E2612;
  filter: alpha(opacity = 50);
}
img#bike:hover {
  -webkit-filter: sepia(0);
  filter: sepia(0);
  filter: alpha(opacity = 100);
  filter: none;
}
img#roma {
  -webkit-filter: blur(3px);
  filter: blur(3px);
  filter: url(#blur); 
}
img#roma:hover {
  -webkit-filter: blur(0px);
  filter: blur(0px);
  filter: none;
}

代码在线演示：https://codepen.io/dudleystorey/pen/pKoqa