请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

用css给图片加入动态效果的各种简单样式代码

 
/* 图像翻转 */
img:hover {
transform: scaleX(-1); /* 沿着x轴翻转 */
}
/* 图像旋转 */
img:hover {
transform: rotate(45deg); /* 逆时针旋转45度 */
}
/* 图像放大缩小 */
img:hover {
transform: scale(1.2); /* 宽高放大1.2倍 */
}
/* 图像透明度变化 */
img:hover {
opacity: 0.5; /* 不透明度变为50% */
}
/* 图像边框变色 */
img:hover {
border-color: red; /* 边框颜色变为红色 */
}
/* 图像闪烁 */
img:hover {
animation: blink 1s infinite; /* 调用动画 */
}
@keyframes blink {
from {
opacity: 1; /* 起始不透明 */
}
to {
opacity: 0; /* 结束全透明 */
}
}
/* 图像滤镜 */
img:hover {
filter: grayscale(100%); /* 灰度滤镜 */
}
回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。