🏠首页 › 站长杂谈 › 怎么把横幅弄到可翻转 大神们

迪巴拉 发表于 2024-7-26 08:33:16

怎么把横幅弄到可翻转 大神们

怎么把横幅弄到可翻转 大神们，网站首页顶部有6个小横幅，领导要我搞到可翻转服了。。有大神们给代码改吗 就是鼠标移过去会翻转

TyCoding 发表于 2024-7-26 08:34:00

在BING里搜索一下：js 图片翻转效果 ，不就可以搜出东西来了

IT618发布 发表于 2024-7-26 08:34:13

问问ai吧

IT618发布 发表于 2024-7-26 08:35:13

一个css代码就可以搞定了，就是转圈圈这种可以不？

拾光 发表于 2024-7-26 08:35:32

请教大神吧

独家记忆 发表于 2024-7-26 08:35:38

<style>

#hover-image {
transition: transform 0.5s ease; /* 设置动画过渡效果 */
}
#hover-image:hover {
transform: rotate(90deg); /* 鼠标悬停时翻转图片 */
}

</style>

把css添加在css文件里面或者直接添加在页面前面




找到要翻转的图片 img标签，加上这个idid="hover-image"
img src="thumbnail.png" alt="缩略图" id="hover-image"

IT618发布 发表于 2024-7-26 08:36:17

transform: rotate(90deg); /* 鼠标悬停时翻转图片 */
这里的90   可以随便改

IT618发布 发表于 2024-7-26 08:36:54

不过上面给出的是旋转效果，

如果要翻转效果，

就把
transform: rotate(90deg); /* 鼠标悬停时翻转图片 */
改成
transform: scaleY(-1); /* 在鼠标悬停时沿y轴翻转图片 */

独家记忆 发表于 2024-7-26 08:37:49

不行，就淘宝上找人搞搞了

拾光 发表于 2024-7-26 08:38:05

别搞了，跟他说那样会拖慢网页打开速度，对网站用户体验不好，对SEO更不好！

查看完整版本: 怎么把横幅弄到可翻转 大神们