请选择 进入手机版 | 继续访问电脑版

利用CSS3的attr函数快速制作文字投影动画效果

发表于 2017-11-24 15:56 显示全部楼层 17 247

本帖最后由 蓝明周老师 于 2017-11-24 15:58 编辑

这两天看到很多同学在做个人站,设计惊艳,动效酷炫,甚是666!


有同学在做文字长投影的效果,当鼠标移上去会有多个图层动画效果,国际惯例,都是采用伪元素来制作了。其中有个麻烦一点的地方就是,每个字都不一样,这样在写content的时候,需要指定多次,这样增加了代码量,所以可以采用一个CSS3中的属性函数,获取到标签的属性值。


具体请看下面内容:


先上案例效果:

shadow.gif

    


基础代码:


        这一步主要是书写文字的样式,创建三个文字层,底层是灰色长投影,中间是蓝色文字,上层是旋转白色文字;

        其中值得注意的是在写伪元素所用到的attr() 函数,它是属于css3中新增用于获取标签属性值的一个函数;因为按照惯例,伪元素添加内容就需要单独设置content属性,如果内容太多,则需要分开单独书写,代码量会增加,通过attr()函数,可以节省代码,只需在标签身上定义标签属性即可,所以每个span上带有data-text自定义属性;


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>通过css3的attr函数快速制作文字投影动画效果-小码哥网页UI学院</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .wrap{
            width: 800px;
            height: 400px;
            border: 1px solid #000;
            margin: 50px auto;
            background: #f7fcfe;
        }

        .wrap li{
            float: left;
            width: 250px;
            height: 200px;
            text-align: center;
            line-height: 200px;
        }

        .wrap li span{
            font-size: 100px;
            font-family: Microsoft Yahei;
            font-weight: bold;
            color: #467cd4;
            position: relative;
            display: inline-block;
            z-index: 1;
            cursor: pointer;
        }

        .wrap li span::before,.wrap li span::after{
            content: attr(data-text); /* 获取span标签的值 */
            color: #fff;
            position: absolute;
            left: 0;
            top: 0;
            transform-origin: left top;
            transition: .4s;
        }

        .wrap li span::before{
            z-index: 2;
            text-shadow: 1px 1px 1px rgba(0, 0, 0, .6);
        }

        .wrap li span::after{
            color: rgba(0, 0, 0, .1);
            z-index: -1;
        }

    </style>
</head>
<body>
    <ul>
        <li><span data-text="网">网</span></li>
        <li><span data-text="页">页</span></li>
        <li><span data-text="U">U</span></li>
        <li><span data-text="I">I</span></li>
        <li><span data-text="学">学</span></li>
        <li><span data-text="院">院</span></li>
    </ul>
</body>
</html>


鼠标悬停代码:

        这一步其实就比较简单了,通过转换属性添加悬停动画效果,需要在原标签上加上过渡属性;

        需要注意的是:鼠标悬停控制伪元素并不是通过后代选择器的属性格式选择,而是连着书写;


.wrap li span:hover::before{
      transform: rotateY(40deg);

}

.wrap li span:hover::after{
      transform:  skew(0deg, 30deg);

}

    

        对于attr()函数,本帖子只做抛砖引玉之举,如果想了解更多,可自行查找资料,同时欢迎在论坛进行发表文章交流。


        学设计,到小码哥网页UI学院


        附件为案例demo,欢迎下载;

        利用CSS3的attr函数快速制作文字投影动画效果.zip

        

回复 使用道具
举报
青果杰杰

发表于 06-06 12:16 显示全部楼层

  ╭══╮ ┌══════┐

  ╭╯让路║═‖ 酱油专用车 ‖

  ╰⊙═⊙╯ └══⊙═⊙═~. 作为一个资深的酱油党,我们需要做的不仅仅是路过,在路过的同时 还要关心楼主,鼓励楼主,在这个冷漠的时代,给予楼主温暖。酱油党莅临的地方,不仅仅是挽尊,不仅仅是消灭零回复,酱油

回复 支持 反对 使用道具
举报
PPAP

发表于 05-26 15:26 显示全部楼层

每一个成功者都有一个开始。成功的路,始于回复。

回复 支持 反对 使用道具
举报
ttplayboy

发表于 05-14 09:52 显示全部楼层

祝愿小码哥越来越红火!!红红火火恍恍惚惚!

回复 支持 反对 使用道具
举报
任天翔

发表于 04-28 08:23 显示全部楼层

  ╭══╮ ┌══════┐

  ╭╯让路║═‖ 酱油专用车 ‖

  ╰⊙═⊙╯ └══⊙═⊙═~. 作为一个资深的酱油党,我们需要做的不仅仅是路过,在路过的同时 还要关心楼主,鼓励楼主,在这个冷漠的时代,给予楼主温暖。酱油党莅临的地方,不仅仅是挽尊,不仅仅是消灭零回复,酱油

回复 支持 反对 使用道具
举报
仰光的阳光

发表于 04-17 13:52 显示全部楼层

回复 支持 反对 使用道具
举报
ttplayboy

发表于 04-08 19:42 显示全部楼层

为了学币每天必水一下,望见谅

回复 支持 反对 使用道具
举报
Viper

发表于 04-04 19:22 显示全部楼层

每一个成功者都有一个开始。成功的路,始于回复。

回复 支持 反对 使用道具
举报
任嘉行

发表于 04-02 16:46 显示全部楼层

提示: 作者被禁止或删除 内容自动屏蔽
回复 支持 反对 使用道具
举报
大少女

发表于 03-23 13:22 显示全部楼层

观后纵想法再多,也不如一句回复实在!

回复 支持 反对 使用道具
举报
12下一页

发表新文章
蓝明周老师

小码哥名师团队

0

学分

2436

学币

2632

积分

小码哥名师团队

Rank: 5Rank: 5

积分
2632

小码哥一周年勋章

Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育