CSS文字交错滑动效果-001

frolc 发布于2019-08-30 15:56 / 2713人阅读

摘要：项目展示技术难点引用解释是中引用的元素的属性名称。实例输出初始样式基本每个人都会忽略第一步通过的属性移动文字，样式如下第二步通过的属性引用的元素的属性名称脱离文档流第三步鼠标经过，修改属性就行项目源码了解更多，个人博客

项目展示

技术难点：

引用MDN解释：content: attr(data-text);是CSS中引用的HTML元素的属性名称。

实例： HTML

p data-foo="hello">world

CSS

[data-foo]::before {
  content: attr(data-foo) " ";
}

输出 //hello world

初始样式：基本每个人都会（忽略）

第一步：通过CSS3 的transform属性移动文字，样式如下

        .box span:nth-child(odd) {
            transform: translateY(-100%);
        }

        .box span:nth-child(even) {
            transform: translateY(100%);
        }

第二步：通过content 的arr属性引用的HTML元素的属性名称

        N      //html
        .box span::before {
        content: attr(data-text);
        position: absolute;     // 脱离文档流
        color: red;
    }
        .box span:nth-child(odd)::before {
        transform: translateY(100%);
    }

    .box span:nth-child(even)::before {
        transform: translateY(-100%);
    }

第三步：鼠标经过，修改transform属性就行

    .box:hover span {
        transform: translateY(0);
    }

项目源码 了解更多，个人博客

超融合服务器云服务器滑动效果 css滑动 IOS滑动抽屉效果文字效果

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117493.html

CSS文字交错滑动效果-001

摘要：项目展示技术难点引用解释是中引用的元素的属性名称。实例输出初始样式基本每个人都会忽略第一步通过的属性移动文字，样式如下第二步通过的属性引用的元素的属性名称脱离文档流第三步鼠标经过，修改属性就行项目源码了解更多，个人博客项目展示 showImg(https://segmentfault.com/img/remote/1460000018450816?w=517&h=120); 技术难点...

aisuhua 2019-08-02 14:28 评论0 收藏0
前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。源代码下载请从下载。 showImg(https://segmentfault.com/img/bVbfmCW?w=400&h=301); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepe...

Eric 2019-08-29 15:08 评论0 收藏0
前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。源代码下载请从下载。 showImg(https://segmentfault.com/img/bVbfmCW?w=400&h=301); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepe...

geekidentity 2019-08-05 13:40 评论0 收藏0
前端每日实战：1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效

摘要：效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。可交互视频教程此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。源代码下载请从下载。 showImg(https://segmentfault.com/img/bVbfmCW?w=400&h=301); 效果预览按下右侧的点击预览按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepe...

时飞 2019-08-02 10:15 评论0 收藏0
使用Angular4动画为页面添彩

摘要：使用组件将根据视口放置，并滑过页面。这意味着我们不能使用状态来对路由组件进行样式，因为这样可以将样式应用于父结点我们的示例中的主元素，而不是路由组件。原文：Angular — Supercharge your Router transitions using new animation features (v4.3+) 首先我们看一下效果展示的demo Basic Variation...

jay_tian 2019-08-20 18:24 评论0 收藏0