CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);

@-webkit-keyframes flip-top {

from {

-webkit-transform: rotate(50deg) translateY(100vh);

transform: rotate(50deg) translateY(100vh);

}

}

@keyframes flip-top {

from {

-webkit-transform: rotate(50deg) translateY(100vh);

transform: rotate(50deg) translateY(100vh);

}

}

@-webkit-keyframes flip-bottom {

from {

-webkit-transform: rotate(-50deg) translateY(100vh);

transform: rotate(-50deg) translateY(100vh);

}

}

@keyframes flip-bottom {

from {

-webkit-transform: rotate(-50deg) translateY(100vh);

transform: rotate(-50deg) translateY(100vh);

}

}

body {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

height: 100vh;

overflow: hidden;

background: #111;

-webkit-animation: glow 8s both;

animation: glow 8s both;

}

span {

font: 900 15vw Raleway;

position: relative;

display: inline-block;

-webkit-perspective: 500px;

perspective: 500px;

}

span:nth-child(odd):before {

-webkit-animation-name: flip-top;

animation-name: flip-top;

}

span:nth-child(odd):after {

-webkit-animation-name: flip-bottom;

animation-name: flip-bottom;

}

span:nth-child(even):before {

-webkit-animation-name: flip-bottom;

animation-name: flip-bottom;

}

span:nth-child(even):after {

-webkit-animation-name: flip-top;

animation-name: flip-top;

}

span:nth-child(1n + 0):before {

color: #4ec0b6;

}

span:nth-child(1n + 0):after {

color: #4ea4c0;

}

span:nth-child(2n + 1):before {

color: #3967cb;

}

span:nth-child(2n + 1):after {

color: #3c39cb;

}

span:nth-child(3n + 2):before {

color: #fdcd2f;

}

span:nth-child(3n + 2):after {

color: #e8fd2f;

}

span:nth-child(4n + 3):before {

color: #e23942;

}

span:nth-child(4n + 3):after {

color: #e26839;

}

span:nth-child(1):before {

-webkit-animation-delay: 0.88706s;

animation-delay: 0.88706s;

}

span:nth-child(1):after {

-webkit-animation-delay: 1.32717s;

animation-delay: 1.32717s;

}

span:nth-child(2):before {

-webkit-animation-delay: 1.76318s;

animation-delay: 1.76318s;

}

span:nth-child(2):after {

-webkit-animation-delay: 2.19375s;

animation-delay: 2.19375s;

}

span:nth-child(3):before {

-webkit-animation-delay: 2.61756s;

animation-delay: 2.61756s;

}

span:nth-child(3):after {

-webkit-animation-delay: 3.03328s;

animation-delay: 3.03328s;

}

span:nth-child(4):before {

-webkit-animation-delay: 3.43965s;

animation-delay: 3.43965s;

}

span:nth-child(4):after {

-webkit-animation-delay: 3.8354s;

animation-delay: 3.8354s;

}

span:nth-child(5):before {

-webkit-animation-delay: 4.21932s;

animation-delay: 4.21932s;

}

span:nth-child(5):after {

-webkit-animation-delay: 4.59022s;

animation-delay: 4.59022s;

}

span:nth-child(6):before {

-webkit-animation-delay: 4.94696s;

animation-delay: 4.94696s;

}

span:nth-child(6):after {

-webkit-animation-delay: 5.28843s;

animation-delay: 5.28843s;

}

span:nth-child(7):before {

-webkit-animation-delay: 5.61358s;

animation-delay: 5.61358s;

}

span:nth-child(7):after {

-webkit-animation-delay: 5.92141s;

animation-delay: 5.92141s;

}

span:nth-child(8):before {

-webkit-animation-delay: 6.21098s;

animation-delay: 6.21098s;

}

span:nth-child(8):after {

-webkit-animation-delay: 6.48137s;

animation-delay: 6.48137s;

}

span:nth-child(9):before {

-webkit-animation-delay: 6.73177s;

animation-delay: 6.73177s;

}

span:nth-child(9):after {

-webkit-animation-delay: 6.96139s;

animation-delay: 6.96139s;

}

span:before,

span:after {

display: block;

content: attr(data-text);

-webkit-animation: 0.88889s ease-out both;

animation: 0.88889s ease-out both;

-webkit-animation-name: inherit;

animation-name: inherit;

text-shadow: 0 0 1em;

}

span:before {

-webkit-clip-path: polygon(0 0 100% 0, 100% 100%);

clip-path: polygon(0 0 100% 0, 100% 100%);

position: absolute;

-webkit-transform-origin: left center;

-ms-transform-origin: left center;

transform-origin: left center;

color: #4ec0b6;

}

span:after {

-webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);

clip-path: polygon(0 0, 100% 100%, 0 100%);

color: #3967cb;

}

css3之 谜灯卡片_CSS3 迷幻光影文本特效相关推荐

  1. css3之 谜灯卡片_9种纯CSS3人物信息卡片UI设计效果

    插件描述:每种效果在鼠标滑过卡片时,通过CSS3使图片和HTML元素变形生成 非常漂亮的鼠标滑过动画特效. 这是一组纯CSS3人物信息卡片UI设计效果.这组人物信息卡片共9种效果,每种效果在鼠标滑过卡 ...

  2. css3之 谜灯卡片_纯css3灯泡开关特效代码

    纯CSS3和SVG鼠标滑过灯泡发光特效 相关css代码 .wrap .bulb { position: absolute; top: 50%; left: 50%; transform: transl ...

  3. html5+css3圆角图文展示卡片层叠滑动切换js特效

    下载地址 html5+css3圆角图文展示卡片层叠滑动切换特效,支持鼠标拖动或手指触屏滑过卡片切换到下一张卡片信息. dd:

  4. html5团队特效,CSS3团队成员介绍卡片特效

    这是一款CSS3团队成员介绍卡片特效.该卡片特效用于介绍某个团队的成员,卡片上带有人物的头像,简单的描述信息.当鼠标hover卡片时,会出现该成员人物的社交联系方式图标. 使用方法 在页面中引入boo ...

  5. Cool！15个超炫的 CSS3 文本特效【上篇】

    每一个网页设计师都希望创建出让用户能够赏识的网站.当然,这是不可能满足每个人的口味的.幸运的是,我们有最强大的工具和资源.实际上,我们非常多的网站模板,框架,内容管理系统,先进的工具和其他的资源可以使 ...

  6. 新年快乐轮播特效html,基于owl-carousel的卡片水平轮播展示特效

    这是一款基于owl-carousel的卡片水平轮播展示特效.该卡片轮播展示特效可以通过前后导航按钮来切换卡片,它是响应式设计,在手机等小屏幕设备上,会自动调节为只展示一个卡片. 使用方法 在页面中引入 ...

  7. CSS3实践之路(四):文本特效

    之前工作忙,这篇博文来的有点晚,向大家说声抱歉! 1 文本特效 CSS3给文字加了很多特效,http://www.w3schools.com/css3/css3_text_effects.asp 在这 ...

  8. html搜索栏热搜效果,CSS3实战开发：百度新闻热搜词特效实战开发_html/css_WEB-ITnose...

    各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效.在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程.今天讲这个案例, ...

  9. js+css3简易实现2023新年快乐全屏满天星动画特效

    目录 ⭐ 前言 一.效果图 二.代码实现 2.1 html 2.2 CSS 2.3. JS ⭐ 预览 ⭐ 前言 js+css3全屏星星闪烁背景2023新年快乐动画特效,文字还有3D立体效果.其中,利用 ...

最新文章

  1. 三维空间平面拟合MATLAB
  2. 海南大学植物保护学院刘铜教授课题组招聘简介
  3. 【机器视觉】 set_fuzzy_measure_norm_pair算子
  4. Java基础查漏补缺（2）
  5. Java 的面向接口编程
  6. java调用wvsc.exe_c语言 函数的调用方法
  7. Python 内置模块之 asyncio（异步iO）
  8. php获取数组中的全部可以吗,php获取数组中所有值的方法
  9. php之前代码,PHP语法检查源代码前控制
  10. layui 可以商用吗_layui框架的优缺点是什么
  11. java 重定向到某个页面并弹出消息_前端面试100问之浏览器从输入URL到页面展示发生了什么...
  12. 实话实说？基金公司“存量时代”的创新
  13. HTML文档的基本结构
  14. svm+特征提取做分类
  15. python中从键盘输入五个单词输出以元音字母开头的单词_Python程序设计入门——第五周作业...
  16. 灾备系统与备用服务器区别,云灾备与云备份区别在哪？云灾备五大特点
  17. tbook10s换linux,【台电Tbook10s使用测试】硬件配置|驱动适配|续航_摘要频道_什么值得买...
  18. inet_addr函数
  19. react的SSR(2)
  20. 在linux系统，用FTP工具下载文件

热门文章

  1. originPro导出图像的关键设置
  2. Origin与OriginPro 版本一览图
  3. iOS制作framework
  4. Mac JER10.7.3安装
  5. API接口安全加密，防止接口被黑客攻击
  6. 信息论中用c语言进行算术编码,信息论与编码之算术编码
  7. linux能修改用户的权限,linux怎样修改用户权限
  8. 计算机桌面显示变小,电脑屏幕变小怎么还原回来
  9. AI时代，数据工程师必备知识总结
  10. 动态时间规整算法——DTW