数码控科技猎奇Iphone动漫星座游戏电竞lolcosplay王者荣耀攻略allcnewsBLOGNEWSBLOGASKBLOGBLOGZSK全部技术问答问答技术问答it问答代码软件新闻开发博客电脑/网络手机/数码笔记本电脑互联网操作系统软件硬件编程开发360产品资源分享电脑知识文档中心IT全部全部分类全部分类技术牛文全部分类教程最新网页制作cms教程平面设计媒体动画操作系统网站运营网络安全服务器教程数据库工具网络安全软件教学vbscript正则表达式javascript批处理更多»编程更新教程更新游戏更新allitnewsJava新闻网络医疗信息化安全创业站长电商科技访谈域名会议专栏创业动态融资创投创业学院 / 产品经理创业公司人物访谈营销开发数据库服务器系统虚拟化云计算嵌入式移动开发作业作业1常见软件all电脑网络手机数码生活游戏体育运动明星影音休闲爱好文化艺术社会民生教育科学医疗健康金融管理情感社交地区其他电脑互联网软件硬件编程开发360相关产品手机平板其他电子产品摄影器材360硬件通讯智能设备购物时尚生活常识美容塑身服装服饰出行旅游交通汽车购房置业家居装修美食烹饪单机电脑游戏网页游戏电视游戏桌游棋牌游戏手机游戏小游戏掌机游戏客户端游戏集体游戏其他游戏体育赛事篮球足球其他运动球类运动赛车健身运动运动用品影视娱乐人物音乐动漫摄影摄像收藏宠物幽默搞笑起名花鸟鱼虫茶艺彩票星座占卜书画美术舞蹈小说图书器乐声乐小品相声戏剧戏曲手工艺品历史话题时事政治就业职场军事国防节日风俗法律法规宗教礼仪礼节自然灾害360维权社会人物升学入学人文社科外语资格考试公务员留学出国家庭教育学习方法语文物理生物工程学农业数学化学健康知识心理健康孕育早教内科外科妇产科儿科皮肤科五官科男科整形中医药品传染科其他疾病医院两性肿瘤科创业投资企业管理财务税务银行股票金融理财基金债券保险贸易商务文书国民经济爱情婚姻家庭烦恼北京上海重庆天津黑龙江吉林辽宁河北内蒙古山西陕西宁夏甘肃青海新疆西藏四川贵州云南河南湖北湖南山东江苏浙江安徽江西福建广东广西海南香港澳门台湾海外地区

排列5复式投注计算器:利用CSS3实现文字折纸效果实例代码

来源:脚本之家  责任编辑:小易  

河北20选五开奖结果 www.vhmyd.cn 前言

本文主要跟大家分享了一个利用CSS3实现文字折纸效果的实例,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧

效果图:

示例代码:

代码如下,复制即可使用:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html {
  height: 100%;
}

body {
  background: -webkit-linear-gradient(45deg, #e6e2df 80%, #c2c1bd 100%);
  background: linear-gradient(45deg, #e6e2df 80%, #c2c1bd 100%);
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrapper {
  width: 100%;
  font-family: 'Source Code Pro', monospace;
  margin: 0 auto;
  height: 100%;
}
.wrapper h1 {
  text-transform: uppercase;
  -webkit-transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
          transform: translate(-50%, -50%) skew(10deg) rotate(-10deg);
  font-size: 20vw;
  top: 50%;
  left: 50%;
  margin: 0;
  position: absolute;
  text-rendering: optimizeLegibility;
  font-weight: 900;
  color: rgba(255, 158, 177, 0.5);
  text-shadow: 1px 4px 6px #e6e2df, 0 0 0 #66303a, 1px 4px 6px #e6e2df;
}
.wrapper h1:before {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  top: -4.8%;
  overflow: hidden;
  width: 100%;
  height: 50%;
  color: #fbf7f4;
  -webkit-transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
          transform: translate(1.6vw, 0) skew(-13deg) scale(1, 1.2);
  z-index: 2;
  text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.2);
}
.wrapper h1:after {
  content: attr(data-heading);
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: 1;
  color: #d3cfcc;
  -webkit-transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
          transform: translate(0vw, 0) skew(13deg) scale(1, 0.8);
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
          clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  text-shadow: 2px -1px 6px rgba(0, 0, 0, 0.3);
}

    </style>
</head>
<body>
    <div class="wrapper">
        <h1 data-heading="jQuery">jQuery</h1>
    </div>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。


  • 本文相关:
  • 纯css3实现的3d折叠翻转文字动画特效源码
  • 纯css3实现使用立方体几何模型构建3d文字动画效果源码
  • css3下的渐变文字效果实现示例
  • css3实现文字扫光渐变动画效果的示例
  • 18种css3炫酷文字动画效果库mimic.css
  • css3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
  • css3鼠标hover图片遮罩层文字动画特效
  • 利用纯css3实现文字向右循环闪过效果实例(可用于移动端)
  • css3实现文字波浪线效果示例代码
  • css3利用text-shadow属性实现多种效果的文字样式展现方法
  • 免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 河北20选五开奖结果 - 频道导航
    Copyright © 2017 河北20选五开奖结果 www.vhmyd.cn All Rights Reserved
  • “网络党课”第二课 杨禹《为美好生活而奋斗》 2018-12-14
  • DJ音乐绽放江西之巅 萍乡武功山帐篷节成功举办 2018-12-14
  • 巫山县大峡村:深度贫困村的脱贫之变 2018-12-13
  • 【上海天气】最新上海今天天气,实时提供上海气温、空气质量、24小时天气预报、生活指数查询 2018-12-13
  • VRAR从热转凉 追风上市公司“跌落神坛”追风上市公司“跌落神坛”-手机行情 2018-12-13
  • 招聘启事丨西部网诚聘新媒体编辑记者、实习编辑等人员 2018-12-12
  • 开奖时刻 5箱可乐免费送出 今日活动持续进行开奖时刻-等级 2018-12-12
  • 阜阳五中成功举办第四届社团文化艺术节文艺汇演 2018-12-12
  • 和谐号动车将开放企业冠名 沪铁路485个车次开始招商 2018-12-11
  • 好战的北约应该负责打扫战场,包括难民安置、战后重建…… 2018-12-10
  • 很容易让人联想到是这个女人的错,而杨杨忽视其背后有很复杂的原因。 2018-12-10
  • 广东金林村:农民爱写诗 2018-12-10
  • 世界最大纸飞机亮相美国 长达19.5米气势十足 2018-12-09
  • 2017年全国“创新社会治理典型案例”征集活动专家评审结果 2018-12-09
  • 关于向社会公开征集广州日报报业集团卫生所西药采购供应商的公告 2018-12-09
  • 802| 948| 296| 736| 985| 772| 942| 276| 590| 454|