一、基本的图片样式
在Web开发中，图片是一个非常重要的元素，因为图片可以大大丰富网页的内容，吸引用户的眼球。样式可以用来为图片添加不同的效果，使其更加引人注目。
下面是一些基本的图片样式：
/* 图片设置为块级元素 */
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
/* 图片居中 */
img {
display: block;
margin: 0 auto;
}
/* 图片添加边框 */
img {
border: 1px solid #999;
}
/* 图片圆角 */
img {
border-radius: 5px;
}
/* 图片设置为灰色 */
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
二、图片阴影效果
阴影效果可以让图片看起来更加逼真，给用户带来更好的体验。
下面是几种常见的图片阴影效果：
/* 添加小的阴影 */
img {
box-shadow: 1px 1px 5px #999;
}
/* 添加大的阴影 */
img {
box-shadow: 3px 3px 10px #999;
}
/* 投影向上 */
img {
box-shadow: 0px -5px 10px #999;
}
/* 投影向下 */
img {
box-shadow: 0px 5px 10px #999;
}
三、图片滤镜效果
滤镜效果可以为图片添加不同的颜色和亮度，使其更加鲜明。
下面是几种常见的图片滤镜效果：
/* 图片变暗 */
img {
-webkit-filter: brightness(0.5);
filter: brightness(0.5);
}
/* 图片变亮 */
img {
-webkit-filter: brightness(1.5);
filter: brightness(1.5);
}
/* 图片灰色 */
img {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
/* 图片反转 */
img {
-webkit-filter: invert(100%);
filter: invert(100%);
}
/* 图片模糊 */
img {
-webkit-filter: blur(5px);
filter: blur(5px);
}
四、图片动画效果
动画效果可以为图片添加更多的生动感，让用户在浏览页面时更加愉快。
下面是几种常见的图片动画效果：
/* 图片悬停效果 */
img:hover {
box-shadow: 1px 1px 5px #999;
transform: scale(1.1);
}
/* 图片抖动效果 */
@-webkit-keyframes shake {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
10% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
20% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
30% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
40% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
50% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
60% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
70% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
80% {
-webkit-transform: translateX(5px);
transform: translateX(5px);
}
90% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
img:hover {
animation: shake 0.5s;
}
/* 图片旋转效果 */
@-webkit-keyframes rotate {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
img:hover {
animation: rotate 2s linear infinite;
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/188364.html
微信扫一扫 
支付宝扫一扫 