Question

我正在进行悬停效果，可以提高图像亮度并在悬停状态下缩放图像。由于某些原因，使用CSS过滤器变换似乎不稳定。知道为什么这会使变换波动吗？似乎在Safari和Firefox上运行平稳。

基本上我这样做：

.parent
  width 300px
  height 300px
  overflow hidden
  img
    transition: all 1s ease-out
    transform: translate(0px, 0);
    filter: brightness(80%)
    &:hover
      transform: scale(1.1)

请在此处查看完整演示：http://codepen.io/tzzo/pen/MmKeVm

感谢。

Answer 1

只是看看Chrome 56上的codepen，它对我来说非常顺利。但是，如果要在悬停时增加图像亮度，则还需要将过滤器添加到悬停：

  static void Main()
        {
            EventLog alog = new EventLog();
            alog.Log = "Application";
            alog.MachineName = ".";
            /*  ALSO: USE the USING Statement as another member suggested
            using (SqlConnection connection1 = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=syslog2;Integrated Security=True")
            {

                using (SqlCommand comm = new SqlCommand("INSERT INTO Application VALUES (@EventLog, @TimeGenerated, @EventType, @SourceName, @ComputerName, @InstanceId, @Message) ", connection1))
                {
                    // add the code in here
                    // AND REMEMBER: connection1.Open();

                }
            }*/
            SqlConnection connection1 = new SqlConnection(@"Data Source=.\sqlexpress;Initial Catalog=syslog2;Integrated Security=True");
            SqlDataAdapter cmd = new SqlDataAdapter();
            // Do it one line
            cmd.InsertCommand = new SqlCommand("INSERT INTO Application VALUES (@EventLog, @TimeGenerated, @EventType, @SourceName, @ComputerName, @InstanceId, @Message) ", connection1);
            // OR YOU CAN DO IN SEPARATE LINE :
            // cmd.InsertCommand.Connection = connection1;
            connection1.Open();

            // CREATE YOUR SQLCONNECTION ETC OUTSIDE YOUR FOREACH LOOP
            foreach (EventLogEntry entry in alog.Entries)
            {
                cmd.InsertCommand.Parameters.Add("@EventLog", SqlDbType.VarChar).Value = alog.Log;
                cmd.InsertCommand.Parameters.Add("@TimeGenerated", SqlDbType.DateTime).Value = entry.TimeGenerated;
                cmd.InsertCommand.Parameters.Add("@EventType", SqlDbType.VarChar).Value = entry.EntryType;
                cmd.InsertCommand.Parameters.Add("@SourceName", SqlDbType.VarChar).Value = entry.Source;
                cmd.InsertCommand.Parameters.Add("@ComputerName", SqlDbType.VarChar).Value = entry.MachineName;
                cmd.InsertCommand.Parameters.Add("@InstanceId", SqlDbType.VarChar).Value = entry.InstanceId;
                cmd.InsertCommand.Parameters.Add("@Message", SqlDbType.VarChar).Value = entry.Message;
                int rowsAffected = cmd.InsertCommand.ExecuteNonQuery();
            }
            connection1.Close(); // AND CLOSE IT ONCE, AFTER THE LOOP
        }

Answer 2

在悬停行为中使用此代码 -

.parent img:hover {-webkit-transform: scale(1.1);  -moz-transform: scale(1.1);  -o-transform: scale(1.1);  -ms-transform: scale(1.1);  transform: scale(1.1);  opacity: 1.0;  filter: brightness(150%);}

Answer 3

我在我的机器上看不到问题，但其他时候我遇到过这个问题

您可以尝试通过添加transform3d

来触发元素上的硬件加速

.parent
  width 300px
  height 300px
  overflow hidden
  img
    transition: all 1s ease-out
    transform: translate3d(0,0,0)
    filter: brightness(80%)
    &:hover
      transform: scale(1.1) translate3d(0,0,0)

请注意，在悬停规则

中更改转换时需要重新应用转换

Answer 4

我提出了一个轻量级且受到良好支持的实现。

我抛弃了CSS过滤器并决定使用opacity代替。如果图像的背景不能很好地处理，则必须单独设置。

img
  background-color: black
  opacity: 0.8
  transition: all 3s ease-in-out
  &:hover
     opacity: 1
     transform: scale(1.1)

为我的笔添加了工作解决方案：http://codepen.io/tzzo/pen/MmKeVm

在Chrome

4 个答案: