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

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

发表于 11-24 15:56 显示全部楼层 5 35

本帖最后由 蓝明周老师 于 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

        

回复 使用道具
举报
焯纽潼悟

发表于 12-04 00:43 显示全部楼层

不限流量不限网速,山区、农村、城镇高速免费上网不花钱!最新9500WG接收信号高达19公里,无论您身在地球任何一个角落,都能搜到信号实现免费上网,最新软件全自动智能管理,信号强,网速快,优先自动连接上网,免去您任何手动繁琐作,保证让您高速上网免费不花钱就是这么简单! 朋友们,您还在为家里装修要拉网线烦恼吗?还在忧愁每年交昂贵网费吗?还在苦恼出差无法上网吗?还在傻傻节省4G流量每月还要高达几十元流量费吗?还在敢怒不敢言的公司、学校、宿舍限制上网吗?还在苦逼每天站在阳台高举手机为了搜一个wifi吗?世界上最遥远的距离是明明有wifi,却用不了是多么痛苦的事!玩一会王者荣耀没了几个G的流量,看了一会视频,没了几个G的流量,壕!?还是无奈!?明明很节省,没用少则几十元多则上百元的流量费,如此高昂的费用是不是让您皱眉呢?没关系,用最新9500WG永久免费上网吧!只要238元让您永久免费上网不花钱,无需电脑,无需布线,只需插电,电脑、手机、平板免费上网就是这么任性,wifi信号覆盖高达19公里,无需站阳台,无需放窗外,想在哪里就在哪里!信号强,网速快,免费上网,能免则免,免费到底! 免费热线:188-2652-1502 客服QQ:1094201567 官网 www.ccyxf.com 9500WG
回复 支持 反对 使用道具
举报
烟雨过客

发表于 11-30 12:34 显示全部楼层

回复 支持 反对 使用道具
举报
欧水萍

发表于 11-24 17:53 显示全部楼层

很不错的效果~~

回复 支持 反对 使用道具
举报
yo丶zz

发表于 11-24 16:02 显示全部楼层

拿不到沙发了~~~不过这效果炫炫的~

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

发表于 11-24 16:00 显示全部楼层

给楼主32个赞!!!!!

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

发表新文章
蓝明周老师

小码哥名师团队

0

学分

2320

学币

2511

积分

小码哥名师团队

Rank: 5Rank: 5

积分
2511

小码哥一周年勋章

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

精彩推荐

  • 关注小码哥教育