当前位置: 开发笔记 > 后端 > 正文

关于css3动画的兼容性问题

作者：vbppn65853 | 来源：互联网 | 2023-05-17 13:35

下面这段css3样式在电脑上鼠标经过能看到效果，在iPhone上点击就能看到效果，但是在安卓机上点击是没反应，不知道是什么原因呢？.svg-hover:hover{opacity:1;

下面这段css3样式在电脑上鼠标经过能看到效果，在iPhone上点击就能看到效果，但是在安卓机上点击是没反应，不知道是什么原因呢？



.svg-hover:hover{

  opacity: 1;

  transform: translateY(-50%) translateX(0) scale(1);

  -ms-transform: translateY(-50%) translateX(0) scale(1);	/* IE 9 */

  -webkit-transform:translateY(-50%) translateX(0) scale(1);	/* Safari and Chrome */

  -o-transform: translateY(-50%) translateX(0) scale(1);		/* Opera */

  -moz-transform: translateY(-50%) translateX(0) scale(1);		/* Firefox */

}

2 个解决方案

#1

这样试下

.svg-hover:active{

  opacity: 1;

  transform: translateY(-50%) translateX(0) scale(1);

  -ms-transform: translateY(-50%) translateX(0) scale(1);    /* IE 9 */

  -webkit-transform:translateY(-50%) translateX(0) scale(1);    /* Safari and Chrome */

  -o-transform: translateY(-50%) translateX(0) scale(1);        /* Opera */

  -moz-transform: translateY(-50%) translateX(0) scale(1);        /* Firefox */

}

#2

引用 1 楼 slwsss 的回复:

这样试下

.svg-hover:active{

  opacity: 1;

  transform: translateY(-50%) translateX(0) scale(1);

  -ms-transform: translateY(-50%) translateX(0) scale(1);    /* IE 9 */

  -webkit-transform:translateY(-50%) translateX(0) scale(1);    /* Safari and Chrome */

  -o-transform: translateY(-50%) translateX(0) scale(1);        /* Opera */

  -moz-transform: translateY(-50%) translateX(0) scale(1);        /* Firefox */

}

这样做有什么区别

推荐阅读

ci
CSS深入剖析text和column

这里写目录标题一、text-shadow二、font-face三、其他text常用特性四、column一、text-shadow与box-shadow类似，这里通过 ... [详细]

蜡笔小新 2024-10-18 12:54:03
ci
每日前端实战：148# 视频教程展示纯 CSS 实现按钮两侧滑入装饰元素的悬停效果

通过点击页面右侧的“预览”按钮，您可以直接在当前页面查看效果，或点击链接进入全屏预览模式。该视频教程展示了如何使用纯 CSS 实现按钮两侧滑入装饰元素的悬停效果。视频内容具有互动性，观众可以实时调整代码并观察变化。访问以下链接体验完整效果：https://codepen.io/comehope/pen/yRyOZr。 ... [详细]

蜡笔小新 2024-11-07 14:24:29
ci
夜灵HTML日志第10天：深入探讨浏览器兼容性与高级选择器应用

在第10天的夜灵HTML日志中，我们深入探讨了浏览器兼容性和高级选择器的应用。CSS3引入了许多新属性，但在旧版浏览器中的支持情况并不理想。然而，目前主流浏览器的最新版本已全面支持这些新特性。对于那些不支持CSS3新属性的浏览器，我们提供了多种解决方案，以确保网站在不同环境下的兼容性和用户体验。此外，我们还详细讨论了如何利用高级选择器提升页面布局的灵活性和可维护性。 ... [详细]

蜡笔小新 2024-11-05 17:52:10
touch
HTML 页面实现用户无法选中文字，提供跨浏览器兼容的禁用文本选择功能

为了实现跨浏览器兼容的禁用文本选择功能，可以通过在全局CSS样式中定义一个特定的类来禁止用户选中文本。具体做法是在全局样式表中添加一个名为 `.no-select` 的类，并在需要禁用文本选择的元素上应用该类。这样可以确保在不同浏览器中都能达到一致的效果。此外，还可以结合JavaScript进一步增强用户体验，例如在某些交互场景下动态启用或禁用文本选择功能。 ... [详细]

蜡笔小新 2024-11-05 10:04:35
http
网页图像抓取技术学习心得：从零开始掌握爬虫技巧

在今天的实践中，我深入学习了网页图像抓取技术，通过编写爬虫程序批量获取网站上的图片资源。具体来说，我选择了一个包含大量高质量图片的网站作为练习对象，并成功实现了将这些图片批量下载到本地存储。这一过程不仅提升了我对爬虫技术的理解，还增强了我的编程能力。 ... [详细]

蜡笔小新 2024-11-03 19:35:28
http
CSS中的pointer-events属性详解与应用

在CSS中，`pointer-events`属性是一个非常实用但常被忽视的功能。它主要用于控制元素是否响应鼠标事件。当一个元素覆盖在其他元素之上时，通过设置`pointer-events`属性，可以决定该元素是否能够接收鼠标点击、悬停等交互操作，从而实现更灵活的用户界面设计。例如，将`pointer-events`设置为`none`可以使元素透明地传递鼠标事件，方便实现复杂的叠加效果和交互逻辑。 ... [详细]

蜡笔小新 2024-11-02 15:11:13
http
软件测试工程师必备：全面解析Web应用的浏览器兼容性测试方法与工具

随着市场上浏览器种类的不断增多，特别是在平板和移动设备上的普及，确保网站在各种浏览器中都能正常运行变得尤为重要。本文将深入探讨Web应用的浏览器兼容性测试方法与工具，帮助软件测试工程师全面掌握这一关键技能，以提高应用的用户体验和可靠性。 ... [详细]

蜡笔小新 2024-10-31 07:56:54
http
Css3中box-pack属性怎么用

小编给大家分享一下Css3中box-pack属性怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收 ... [详细]

蜡笔小新 2024-10-21 10:39:14
http
如何在PHP中计算腾讯云接口签名，实现人脸核身接口的对接与签名配置

在PHP中实现腾讯云接口签名，以完成人脸核身功能的对接与签名配置时，需要注意将文档中的POST请求改为GET请求。具体步骤包括：使用你的`secretKey`生成签名字符串`$srcStr`，格式为`GET faceid.tencentcloudapi.com?`，确保参数正确拼接，避免因请求方法错误导致的签名问题。此外，还需关注API的其他参数要求，确保请求的完整性和安全性。 ... [详细]

蜡笔小新 2024-11-08 21:58:28
http
利用Python高效抓取微博文本与动态网页图像数据

本文介绍了使用 Python 编程语言高效抓取微博文本和动态网页图像数据的方法。通过详细的示例代码，展示了如何利用爬虫技术获取微博内容和动态图片，为数据采集和分析提供了实用的技术支持。对于对网络数据抓取感兴趣的读者，本文具有较高的参考价值。 ... [详细]

蜡笔小新 2024-10-31 14:48:38
正则
【Python爬虫实操】不创作小说，专精网站内容迁移，超高效！（含源代码）

本文详细介绍了如何利用Python爬虫技术实现高效网站内容迁移，涵盖前端、后端及Android相关知识点。通过具体实例和源代码，展示了如何精准抓取并迁移网站内容，适合对Python爬虫实战感兴趣的开发者参考。 ... [详细]

蜡笔小新 2024-10-28 20:00:28
http
利用Requests库深入解析POST请求的发送方法与实践技巧

在前一篇文章中，我们介绍了如何使用Requests库发送GET请求。本文将深入探讨如何通过Requests库发送POST请求，包括参数格式、请求封装等关键技巧，并通过“历史上的今天”API实例进行详细说明。 ... [详细]

蜡笔小新 2024-10-27 15:02:24
php
深入解析 JavaScript 中的引用类型：Function 类型详解

定义Function类型：1functionsum(num1,num2){return num1+num2;}2varsumfunction(num1,num2){returnn ... [详细]

蜡笔小新 2024-10-23 18:32:08
php
CSS3边框样式与圆角处理技巧

1.CSS3圆角border-radius属性一个最多可指定四个border-*-radius属性的复合属性，这个属性允许你为元素添加圆角边框！语法：border-radius:1 ... [详细]

蜡笔小新 2024-10-23 14:08:09
http
Firefox必备的24款web开发插件[转]

开发工具WebDeveloper1.1.8https:addons.mozilla.orgen-USfirefoxaddon60以工具栏的形式对网页的(X)HTML、脚本、多媒体、 ... [详细]

蜡笔小新 2024-10-21 22:03:56

vbppn65853

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章