Loading [MathJax]/jax/output/CommonHTML/config.js
文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >CSS: safari动画问题

问CSS: safari动画问题
EN

Stack Overflow用户
提问于 2020-08-29 02:43:42
回答 1查看 189关注 0票数 3

在发帖之前，我读到：

好的，我正在构建一个css按钮，一些问题只发生在Safari中。

  • 如果在Chrome中运行代码段，它的工作方式与我所期望的完全相同。

  • 如果您在Safari中运行此操作，span效应将不能很好地工作。

​

代码语言：javascript
运行
AI代码解释
复制
body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}

a{
  position: relative;
  padding: 25px 50px;
  text-decoration: none;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: 0 5px 5px rgba(0,0,0,.2);
}

a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,.1);
}

a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition: 0.5s;
}

a:hover::after{
  left: 100%;
}

a span{
  position: absolute;
  display: block;
  transition: 0.5s ease;
}

a span:nth-child(1){
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(1){
  width: 100%;
  transform: translateX(100%);
}

a span:nth-child(3){
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(3){
  width: 100%;
  transform: translateX(-100%);
}
代码语言：javascript
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a href='#'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>

</body>
</html>

​

我尝试添加浏览器支持，例如：

代码语言：javascript
运行
AI代码解释
复制
    -webkit-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -moz-transform: translateX(-100%);

但还是没用。有人能给我一些建议吗，我想让Safari给出和chrome一样的结果。

更新

这必须是优先考虑的问题，因为我尝试过：

​

代码语言：javascript
运行
AI代码解释
复制
body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}

a{
  position: relative;
  padding: 25px 50px;
  text-decoration: none;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: 0 5px 5px rgba(0,0,0,.2);
}

a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,.1);
}

a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  -webkit-transition: 2s;
}

a:hover::after{
  left: 100%;
}

a span{
  position: absolute;
  display: block;
  -webkit-transition: 2s ease;
}

a span:nth-child(1){
  position: relative;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(1){
  width: 100%;
  -webkit-transform: translateX(100%);
}
代码语言：javascript
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a href='#'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>

</body>
</html>

​

button
webkit
transform
css
广告

TDSQL-CMySQL免费体验

云原生数据库TDSQL-C MySQL 2核4G 免费体验15天
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-22 07:19:05

按您为阴影所做的(在::after中)，使用left或right

代码语言：javascript
运行
AI代码解释
复制
a:hover span:nth-child(1){
  width: 100%;
  /*-webkit-transform: translateX(100%);*/
  left:100%;
}

a:hover span:nth-child(3){
  width: 100%;
  /*transform: translateX(-100%);*/
  right: 100%;
}

演示(1)：

​

代码语言：javascript
运行
AI代码解释
复制
body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}

a{
  position: relative;
  padding: 25px 50px;
  text-decoration: none;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: 0 5px 5px rgba(0,0,0,.2);
}

a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,.1);
}

a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  transition: 0.5s;
}

a:hover::after{
  left: 100%;
}

a span{
  position: absolute;
  display: block;
  transition: 0.5s ease;
}

a span:nth-child(1){
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(1){
  width: 100%;
  /*transform: translateX(100%);*/
  left: 100%;
}

a span:nth-child(3){
  bottom: 0;
  right: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(3){
  width: 100%;
  /*transform: translateX(-100%);*/
  right: 100%;
}
代码语言：javascript
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a href='#'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>

</body>
</html>

​

演示(更新)：

​

代码语言：javascript
运行
AI代码解释
复制
body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(-30deg,#1ec4e9 0%,#673ab7 50%,#262626 50%,#607d8b 100%);
}

a{
  position: relative;
  padding: 25px 50px;
  text-decoration: none;
  color: #fff;
  font-size: 2em;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 4px;
  overflow: hidden;
  background: rgba(255,255,255,.1);
  box-shadow: 0 5px 5px rgba(0,0,0,.2);
}

a::before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: rgba(255,255,255,.1);
}

a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);
  -webkit-transition: 2s;
}

a:hover::after{
  left: 100%;
}

a span{
  position: absolute;
  display: block;
  -webkit-transition: 2s ease;
}

a span:nth-child(1){
  position: relative;
  top: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: #fff;
}

a:hover span:nth-child(1){
  width: 100%;
  /*-webkit-transform: translateX(100%);*/
  left:100%;
}
代码语言：javascript
运行
AI代码解释
复制
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
  <a href='#'>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    Button
  </a>

</body>
</html>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/63646077

复制
相关文章
46.高级图表类型与应用
数据图表
树形图 多应用于数据量大、分类层级多的图表 桑葚图 应用于数据复杂的图表 热力图 特殊时间数据 关系图 例如微博大V关注 箱线图 标靶图 词云图 地理图
hankleo
2020/09/16
4070
46.高级图表类型与应用
怎样插入图表？用图表功能可以插入不同的图表。
图表
1、点击[插入] 2、点击[图表] 3、点击[折线图] 4、点击[确定]
裴来凡
2022/05/28
1.6K0
怎样插入图表？用图表功能可以插入不同的图表。
高级可视化 | Banber图表联动交互
excel图表拖拽
实现筛选联动，首先要从数据中摘出我们所需要的图表数据，如何摘出所需要的图表数据，就需要设置条件参数，按条件参数筛选数据，而筛选组件用来控制筛选的切换展现，最终生成所需要的图表。
Banber可视化云平台
2021/05/27
2K0
Excel图表学习45： 裁剪图表
excel图表
这是在chandoo.org学到的技巧。如下图1所示，在使用柱形图制作图表时，如果有些柱形表示的数字很大，可以截断该柱形，使图表看起来更美观。
fanjy
2019/07/19
2.6K0
Excel小技巧65：在单元格区域中精确放置图表
eachexcelnextselect图表
在Excel中绘制嵌入的图表时，Excel会将图表放置在合适的地方，如下图1所示。
fanjy
2020/11/06
2.3K0
Excel图表技巧07：创建滑动显示的图表
编程算法
下图1是我在chandoo.org上看到的一个图表技巧。很有趣的图表显示方式，你能想到吗？
fanjy
2021/01/20
1.5K0
Excel图表技巧07：创建滑动显示的图表
图表搬家
excel年终总结图表
来这里找志同道合的小伙伴！ 今天给大家聊一聊Excel图表的输出！ 我们日常所做的图表，如果不是专门用做Excel报表的话，大部分还是要以图片的形式导出。 通常导出到PPT的情况比较多，主要用于课堂演示、商务汇报、年终总结、产品发布会等场合! 可能大家会觉得小魔方小题大做，不就是把图表从Excel转移到PPT中嘛，我也会呀。qq截图（CTRL+ALT+A）保存然后导入PPT就OK了；或者，更简单粗暴一点的，直接将图表复制黏贴（CTRL+C/CTRL+V)到PPT里也可以哦！！！ 确实没错，这样的确可以满
数据小磨坊
2018/04/10
2.3K0
图表搬家
Excel图表技巧12：为图表精确配色
excelpowerpoint图表
有时候，我们想要在自己的图表中使用与参照图表完全一样的颜色，但参照图表是以图片形式保存的，这就需要我们得到其准确的RGB值。然而，Excel的主要功能集中于数据处理，其检测对象颜色的能力有所欠缺。此时，PowerPoint就派上用场了，它非常擅长计算对象的确切颜色，因为它有一种称为“取色器”的功能。
fanjy
2021/07/12
2.8K0
Excel图表技巧12：为图表精确配色
Excel最强图表插件EasyShu: 类别型图表
编程算法https网络安全数据可视化github
历时365天，【Excel催化剂】与【EasyShu】联手升级的Excel图表插件EasyCharts 2.0版本-EasyShu，即将面世。接下来我们会陆陆续续介绍插件的各种功能，同时内测，等内测结束就发布。我们先从与表格完美融合的类别型图表开始讲解。
数据小磨坊
2020/03/30
2.9K0
Excel最强图表插件EasyShu: 类别型图表
Excel图表技巧10：快速调整图表数据
excel技巧图表
Excel应该可以说是“智能化”的前辈，有很多的操作都可以自动“记住”，下次同样的操作就可以直接应用，非常便捷，这也是Excel强大的地方之一。我们今天介绍的技巧是通过鼠标可以快速调整图表数据，而图表自身也会作出相应的调整。
fanjy
2021/07/12
2.8K0
Excel图表技巧10：快速调整图表数据
IBCS全套图表模板无条件赠送，给图表爱好者的送上的图表盛宴
excel图表
在开发EasyShu之前，Excel催化剂插件里也有数据可视化功能，并且是完全免费的。
Excel催化剂
2022/03/31
9340
IBCS全套图表模板无条件赠送，给图表爱好者的送上的图表盛宴
Excel图表技巧03：另类组合图表
图表
通常，我们指的组合图表是在一个图表中放置不同类型的图表，例如常见的柱形图/折线图组合，如下图1所示，是由一个柱形系列和一个折线系列组成的。
fanjy
2021/01/06
1.3K0
高级可视化 | Banber图表弹窗联动交互
图表拖拽
在利用数据简报/大屏进行图表演示时，操作者有可能要与图表进行交互联动。上一期（Banber图表联动交互）我们讲解了，如何设置下图所示，通过单击左边条形图区域，就可以交互联动右侧图表，查看事业部下属的部门具体销售情况。
Banber可视化云平台
2021/07/06
1.6K0
高级可视化 | Banber图表弹窗联动交互
图表案例——简约却不简单的图表制作技巧
数据结构
我们通常看到的小而美的图表，一般都是经过图表制作者深层次加工过的成品。 而要想了解一个规范的商务图表制作过程，对图表的拆解与还原就显得非常重要。 今天的案例是关于三家电子消费业巨头：三星、苹果、华为的
数据小磨坊
2018/04/11
1.3K0
图表案例——简约却不简单的图表制作技巧
用一行Python代码创建高级财务图表
api编程算法https网络安全matlab
今天带大家一起学习一个小众，但很厉害的可视化库mplfinance，一起掌握最灵活的python库来创建漂亮的金融可视化。
数据STUDIO
2021/12/15
1.4K0
用一行Python代码创建高级财务图表
Excel图表技巧02：绘制动态图表
dataexceloffset图表
当图表数据区域中的单元格数据增加或减少时，图表会自动相应变化，这就是我们所说的动态图表。本文介绍Excel中两种基本的制作动态图表的方法。
fanjy
2021/01/06
1.4K0
用一行Python代码创建高级财务图表
api编程算法matlabnumpy
今天带大家一起学习一个小众，但很厉害的可视化库mplfinance，一起掌握最灵活的python库来创建漂亮的金融可视化。
程序员小二
2021/12/25
1.3K0
用一行Python代码创建高级财务图表
Excel图表技巧14：创建专业图表——基础
unicodecomexceltext图表
引言：本文整理自exceluser.com，讲解在Excel中如何创建华尔街日报的专业图表。
fanjy
2021/07/30
3.7K0
Excel图表技巧05：自由选择想要查看的图表
excel图表
有时候，我们想通过选择来控制想要显示的图表。例如下图1所示，在单元格下拉列表中选取某项后，显示对应的图表。
fanjy
2021/01/20
1.5K0
Excel图表技巧05：自由选择想要查看的图表
图表3 散点图
编程算法
var data = [{ "gender": "female", "height": 161.2, "weight": 51.6 }, { "gender": "female", "height": 167.5, "weight": 59 }, { "gender": "female", "height": 159.5, "weight": 49.2 }, { "gender": "female", "height": 157, "weight": 63 }, { "gender": "female", "height": 155.8, "weight": 53.6 }, { "gender": "female", "height": 170, "weight": 59 }, { "gender": "female", "height": 159.1, "weight": 47.6 }, { "gender": "female", "height": 166, "weight": 69.8 }, { "gender": "female", "height": 176.2, "weight": 66.8 }, { "gender": "female", "height": 160.2, "weight": 75.2 }, { "gender": "female", "height": 172.5, "weight": 55.2 }, { "gender": "female", "height": 170.9, "weight": 54.2 }, { "gender": "female", "height": 172.9, "weight": 62.5 }, { "gender": "female", "height": 153.4, "weight": 42 }, { "gender": "female", "height": 160, "weight": 50 }, { "gender": "female", "height": 147.2, "weight": 49.8 },...此处省略...]
Qwe7
2022/06/15
1.1K0

相似问题

Pandoc LaTex PDF头和页脚

13

显示和隐藏页脚和页脚消息

31

上传PDF页眉和页脚

15

飞碟飞头和页脚

14

胶乳图像头和页脚

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档