(给100素材网点亮★号,提升开发技能)
通过css3 style属性和svg代码制作酷炫的图片相册动画特效
特效说明:默认加载时图片黑白色倾斜重叠摆置,当鼠标悬浮于对应图片时图片显示彩色效果并有过度动画
box-shadow:设置图片阴影效果
transition:过度动画
transform-origin:设置旋转元素的基点位置
transform: rotate(deg):图片倾斜角度值
:first-child:伪类设置第一张图片倾斜角度
:last-child:伪类设置最后一张图片倾斜角度
filter:图片颜色滤镜效果
效果图:
html代码:
"cardfan">
"florence.jpg" id="roma">
"roma.jpg" id="aqueduct">
"bike.jpg" id="bike">
svg代码:
svg代码用于处理图片颜色滤镜特效
"1.1" xmlns="http://www.w3.org/2000/svg">"blur">"3" />
"1.1" xmlns="http://www.w3.org/2000/svg">"greyscale">"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" />
"1.1" xmlns="http://www.w3.org/2000/svg">"sepia">
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