<template>
  <div>
    <p>
    <span>C</span>
    <span>S</span>
    <span>S</span>
    <span>3</span>
    <span>D</span>
    <span>E</span>
    <span>F</span>
    <span>F</span>
    <span>E</span>
    <span>C</span>
    <span>T</span>
</p>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Lobster&display=swap');
$count: 12;
body, html {
    width: 100%;
    height: 100%;
    display: flex;
    font-family: 'Lobster', cursive;
    perspective: 160vmin;
    overflow: hidden;
}
p {
    margin: auto;
    font-size: 24vmin;
    white-space: nowrap;
    transform-style: preserve-3d;
    animation: rotate 10s infinite ease-in-out;
   
    span {
        text-shadow:
            1px 1px 0 rgba(0, 0, 0, .9),
            2px 2px 0 rgba(0, 0, 0, .7),
            3px 3px 0 rgba(0, 0, 0, .5),
            4px 4px 0 rgba(0, 0, 0, .3),
            5px 5px 0 rgba(0, 0, 0, .1);
       
        &:nth-child(-n+5) {
            animation-delay: -5s;
        }
    }
}
@for $i from 1 to 7 {
    span:nth-child(#{$i}),
    span:nth-last-child(#{$i}) {
        animation: filterBlur-#{$i} 10s infinite ease-in-out;
    }
    @keyframes filterBlur-#{$i} {
        0% {
            filter: blur(0px) contrast(5);
        }
        50% {
            filter: blur(#{7 - $i}px) contrast(1);
        }
        100% {
            filter: blur(0px) contrast(5);
        }
    }
}
@keyframes rotate {
    0% {
        transform: rotateY(-45deg);
    }
    50% {
        transform: rotateY(45deg);
    }
    100% {
        transform: rotateY(-45deg);
    }
}
</style>

vue - 文字3d展示的更多相关文章

  1. js动画 无缝轮播 进度条 文字页面展示 div弹窗遮罩效果

    1.无缝轮播 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.a ...

  2. 基于css3的文字3D翻转特效

    一款基于css3的文字3D翻转特效.这款特效当鼠标经过文字的时候3D翻转显示阴影.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="compo ...

  3. CSS环绕球体的旋转文字-3D效果

    代码地址如下:http://www.demodashi.com/demo/12482.html 项目文件结构截图 只需要一个html文件既可: 项目截图: 代码实现原理: 该示例的实现过程很简单,主要 ...

  4. 多比Web 3D展示(3D机房/3D监控)中间件多比Web 3D展示(3D机房/3D监控)中间件免费下载购买地址

    多比3D是实现3D场景搭建的软件开发包,可以创建广泛的3D应用,适用于高端制造.能源.国防军工.教育科研.城市规划及建筑环艺.生物医学等领域的虚拟仿真,应用于虚拟展示.虚拟设计.方案评审.虚拟装配.虚 ...

  5. HTML5 CSS3 专题 :诱人的实例 3D展示商品信息

    强化下perspective和transform:translateZ的用法.传统的商品展示或许并不能很好的吸引用户的注意力,但是如果在展示中添加适当的3D元素,~说不定效果不错哈~ 效果图: 说明一 ...

  6. vue文字跑马灯效果

    https://cdn.bootcss.com/jQuery.Marquee/1.5.0/jquery.marquee.js 兼容vue $("#demo4").marquee({ ...

  7. 基于 HTML5 + WebGL 的太阳系 3D 展示系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  8. 基于 HTML5 + WebGL 的宇宙 3D 展示系统

    前言 近年来随着引力波的发现.黑洞照片的拍摄.火星上存在水的证据发现等科学上的突破,以及文学影视作品中诸如<三体>.<流浪地球>.<星际穿越>等的传播普及,宇宙空间 ...

  9. Vue ----------- 了解, 展示json 数据

    Vue.js  是一套构建用户界面的渐进式框架. 优点: 与大型框架不同的是采用自底向上的增量开发的设计, 只聚焦于视图层,不仅易于上手,还便于与第三方库或既有项目整合 当与现代化工具链以及各种类库结 ...

随机推荐

  1. GE PACSystems RX3i 输入验证漏洞

    受影响系统:General Electric CPE100 < R9.85General Electric CPE115 < R9.85General Electric CPE302 &l ...

  2. FreeBSD 利用IPFW实现限制局域网使用QQ

    QQ服务器分为三类: 1.UDP 8000端口类7个:速度最快,服务器最多.QQ上线会向这7个服务器发送UDP数据包,选择回复速度最快的一个作为连接服务器.这7个服务器名字均以sz-sz7开头,域后缀 ...

  3. linux内存(三)内核与用户空间交互

    来自网址http://www.kerneltravel.net/jiaoliu/005.htm 用户程序和内核的信息交换是双向的,也就是说既可以主动从用户空间向内核空间发送信息,也可以从内核空间向用户 ...

  4. [XMAN筛选赛](web)ctf用户登录

    0x00 题目概述 就只写了几道web题,有些考察点比较明显,所以个人感觉来说web总体不难. 一航的writeup写得差不多,我这写个他没写的wirteup. 看题: 链接点进去是一个登录页面,习惯 ...

  5. request的自动urlencode问题解决

    今天写盲注脚本的时候,由于题目对空格进行了过滤,所以必须要用%09进行代替,然而当我在脚本中,将payload的空格替换成%09的时候,抓包发现进行了两次编码,导致脚本一直跑不通. 自己在网上也没有找 ...

  6. mybatis是如何分页的,分页插件的原理是什么

    mybatis是如何分页的,分页插件的原理是什么 代码之尖关注 12018.12.28 17:11:12字数 529阅读 19,877 1. SQL 分页 <select id="qu ...

  7. kafka 分布式(不是单机)的情况下,如何保证消息的顺序消费?

    Kafka 分布式的单位是 partition,同一个 partition 用一个 write ahead log 组织, 所以可以保证 FIFO 的顺序.不同 partition 之间不能保证顺序. ...

  8. 使用SpringDataJdbc的@Query注解实现自动映射结果集 ----- RowMapper接口

    使用@Query注解的时候,常常需要写sql来映射非域类的实例,通常的做法就是 实现 RowMapper接口,然后new实例一个一个的设置值进去...为此.出世了自动映射工具类 注意事项:此抽象类只是 ...

  9. 哪一个 bash 内置命令能够进行数学运算?

    bash shell 的内置命令 let 可以进行整型数的数学运算. #! /bin/bash - - let c=a+b - -

  10. 列举 IoC 的一些好处?

    IoC 的一些好处是:它将最小化应用程序中的代码量.它将使您的应用程序易于测试,因为它不需要单元测试用例中的任何单例 或 JNDI 查找机制.它以最小的影响和最少的侵入机制促进松耦合.它支持即时的实例 ...