[wordpress插件] CSS3 TransitionsCSS3过渡

wordpress 插件 文章 2020-04-06 06:10 552 0 全屏看文

AI助手支持GPT4.0

评分
80
描述

This plugin automatically adds CSS3 transitions to your website/blog and the WordPress admin.

此插件会自动将CSS3过渡添加到您的网站/博客和WordPress管理员。

Links, etc. get animated transitions between their normal and hover states.

链接等会在其正常状态和悬停状态之间获得动画过渡。

CSS3 Transitions are supported by the most recent version of every major browser (Chrome, Internet Explorer 10, Firefox, Opera, Safari);

每个主要浏览器(Chrome,Internet Explorer 10,Firefox,Opera,Safari)的最新版本均支持CSS3 Transitions;

browsers without support will continue to render everything as they had before.

没有支持的浏览器将继续呈现以前的所有内容。

This plugin adds the transitions (eye candy) to all (link),

  • (list item, usually used in navigation menus), <

    此插件向所有 (链接),

  • (列表项,通常在导航菜单中使用), <

    img> (image), and (form field and button) tags that have a hover or focus state defined (for example, if links change color when the mouse hovers over them

    img> (图像)和 (表单域和按钮)标签,它们定义了悬停或焦点状态(例如,当鼠标悬停在链接上时链接是否改变颜色)

    ).

    )。

    Other “buttons”, form elements, and WordPress-specific selectors are also targeted.

    其他“按钮”,表单元素和WordPress特定的选择器也都是目标。

    Transitions are between .2 and .3 seconds in duration, so they shouldn’t cross the line between nice and distracting;

    过渡时间介于.2到.3秒之间,因此它们不应越过美好和分心的界限;

    however, depending on the colors used in your theme, the transitions may not be noticeable.

    但是,根据主题中使用的颜色,过渡可能并不明显。

    Also, please note that image sprites simply don’t work well with blanket css3 transitions.

    另外,请注意,图像精灵根本无法与全面的CSS3过渡配合使用。

    If you see wierd animations where images scroll between their normal and hover states, they’re using sprites.

    如果您看到奇怪的动画,其中图像在正常状态和悬停状态之间滚动,则说明它们使用的是精灵。

    Depending on where the sprites are used, there are various ways to prevent the behavior on those elements, while retaining transitions where desired.

    根据使用精灵的位置,有多种方法可以防止这些元素上的行为,同时在需要的地方保留过渡。

    One method is to add an inline style attribute to those elements: style="transition: none; -webkit-transition: none;".

    一种方法是向这些元素添加内联样式属性: style =“ transition:none; -webkit-transition:none;”

    Adding the css to your theme will override the plugin’s css as long as you target the elements using sprites by class or id.

    只要您通过class或id使用sprites定位元素,将css添加到主题中就会覆盖插件的css。

    Please feel free to offer any feature suggestions you might have and I will consider them for future releases.

    请随时提供您可能具有的功能建议,我将在以后的版本中考虑它们。

    CSS3 Transitions UX Theory

    CSS3过渡UX理论

    Because of the way our brains process images, in simple terms, instant/sudden changes are generally not as well perceived as more gradual ones.

    由于我们的大脑处理图像的方式,简单来说,即时/突然的变化通常不如渐进的变化那么明显。

    In the physical space, we never see instant changes, like slides changing with no animation in a PowerPoint, but with digital technology this is a very common practice.

    在物理空间中,我们永远不会看到即时变化,就像幻灯片在PowerPoint中没有动画的情况下变化一样,但是在数字技术中,这是非常普遍的做法。

    When websites make use of hover states, for example, if a link changes color when the mouse hovers over it, they exhibit small, but instant visual changes.

    例如,当网站使用悬停状态时,如果链接在鼠标悬停在其上时颜色改变,则它们会显示出细微但即时的视觉变化。

    Adding the css3 transitions makes these changes more gradual, and therefore easier on the eye.

    添加css3过渡使这些更改更加渐进,因此更容易看。

    For this same reason, operating systems now tend to make use of a lot of animations.

    出于同样的原因,操作系统现在倾向于使用大量动画。

    There’s a lot of neuroscience behind these concepts, but I’m not well versed in that.

    这些概念背后有很多神经科学,但我对此并不精通。

    Basically, slight animations generally look better than instant changes.

    基本上,轻微动画通常看起来比即时更改要好。

    Some people will argue that things aren’t as “snappy” or seem slugish with transitions, but if that’s the case, it’s only a matter of adjusting the animation timing function and duration.

    某些人会辩称,事情并不是因为过渡而变得“笨拙”或显得迟钝,但如果是这种情况,则只需要调整动画定时功能和持续时间即可。

  • 安装步骤

      1. Take the easy route and install through the WordPress plugin adder OR
      2. 采用简单的方法并通过WordPress插件添加程序进行安装或

      3. Download the .zip file and upload the unzipped folder to the /wp-content/plugins/ directory
      4. 下载.zip文件,然后将解压缩的文件夹上载到 / wp-content / plugins / 目录

      5. Activate the plugin through the ‘Plugins’ menu in WordPress
      6. 通过WordPress中的“插件”菜单激活插件

      7. CSS3 transitions should automatically be added to your site and WordPress, as long as your theme has the action hook
      8. 只要您的主题具有 <?php wp_head()?> 操作挂钩,就应该自动将

      9. CSS3过渡添加到您的网站和WordPress中

    下载地址
    https://downloads.wordpress.org/plugin/css3-transitions.1.3.zip
    -EOF-

    AI助手支持GPT4.0