文本的3D效果
HTML
<div class="g-box">
<h1>CSS的世界很美</h1>
</div>
CSS
.g-box {
width: 100%;
height: 100%;
background-color: #40E495;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
} .g-box h1 {
font-size: 100px;
color: white;
font-family: "华文楷体";
transition: 1s;
} .g-box h1:hover {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #ccc,
0 3px 0 #ccc,
0 4px 0 #ccc,
0 5px 0 #ccc,
0 6px 0 #ccc,
0 7px 0 #ccc,
0 8px 0 #ccc,
0 9px 0 #ccc,
0 10px 0 #ccc,
0 11px 0 #ccc,
0 12px 0 #ccc,
0 20px 30px rgba(0, 0, 0, 0.5);
}
文本的3D效果的更多相关文章
- 如何让IOS中的文本实现3D效果
本转载至 http://bbs.aliyun.com/read/181991.html?spm=5176.7114037.1996646101.25.p0So7c&pos=9 zh ...
- CSS3 文本3D效果
代码如下: <!DOCTYPE html> <html> <head> <style> h1 { color: #3D3D3D; font-size: ...
- 60.自己定义View练习(五)高仿小米时钟 - 使用Camera和Matrix实现3D效果
*本篇文章已授权微信公众号 guolin_blog (郭霖)独家公布 本文出自:猴菇先生的博客 http://blog.csdn.net/qq_31715429/article/details/546 ...
- 3d效果的图片轮播
CSS3的3d变换 CSS3给我们提供了一个新的功能,那就是3d变换.3d变换和2d变换的基本API函数类似,只不过多了些在Z轴上的操作,不难使用. 但是,为了让元素拥有3d变换的功能,我们需要给他的 ...
- jQuery旋转木马仿3D效果的图片切换特效代码
用jQuery实现的一款仿3D效果的图片切换特效代码,类似旋转木马一样,幻灯图片以三维视觉上下滑动切换,效果很酷炫,兼容IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜 ...
- CSS3打造3D效果——perspective transform的深度剖析
声明:此篇博文虽是自己手写,但大量资源取自 张鑫旭 的博文.想看更详细 更专业的剖析请看张鑫旭的博文. 昨天对css3的transform做了初步的分析和认识,突然看到perspective属性,调了 ...
- css3 3d效果及动画学习
css参考手册: http://www.phpstudy.net/css3/ http://www.css88.com/book/css/ 呈现3d效果:-webkit-transform-style ...
- 网页3D效果库Three.js初窥
网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...
- 视频特效制作:如何给视频添加边框、水印、动画以及3D效果
2014-12-08 09:47 编辑: suiling 分类:iOS开发 来源:叶孤城的blog 招聘信息: iOS手机软件开发工程师 iOS工程师 Web后端高级开发工程师 iOS软件工程师 ja ...
随机推荐
- 推荐一个超牛的SpringCloud微服务项目,开发脚手架
前言 Cloud-Platform是国内首个基于Spring Cloud微服务化开发平台,具有统一授权.认证后台管理系统,其中包含具备用户管理.资源权限管理.网关API 管理等多个模块,支持多业务系统 ...
- MySQL-Atlas--读写分离架构
一.Atlas简介 Atlas是由 Qihoo 360公司Web平台部基础架构团队开发维护的一个基于MySQL协议的数据中间层项目.它在MySQL官方推出的MySQL-Proxy 0.8.2版本的基础 ...
- 国际化的实现i18n--错误码国际化以及在springboot项目中使用
国际化 ,英文叫 internationalization 单词太长 ,又被简称为 i18n(取头取尾中间有18个字母); 主要涉及3个类: Locale用来设置定制的语言和国家代码 Resource ...
- sqli-labs第二关 详解
学会了第一关,时隔多天来到了第二关,怎么说了没有看wp就给做出来了. 首先,我是自己先判断了下,这个是什么注入 ?id=1' 不行 ?id=1' or '1'='1--+ 也不行 然后又尝试了下 ?i ...
- Win10系统中文显示乱码怎么解决
来源:https://jingyan.baidu.com/article/d8072ac4ba20cfec94cefd48.html 简单的说是: 全部设置改为中国而且一定要重启系统,无论时间还是区域 ...
- 如何选择JVM垃圾回收器?
明确垃圾回收器组合 -XX:+UseSerialGC 年轻代和老年代都用串行收集器 -XX:+UseParNewGC 年轻代使用ParNew,老年代使用 Serial Old -XX:+UsePara ...
- 加快ASP。NET Core WEB API应用程序。第2部分
下载source from GitHub 使用各种方法来增加ASP.NET Core WEB API应用程序的生产力 介绍 第1部分.创建测试RESTful WEB API应用程序第2部分.增加了AS ...
- Codeforces Global Round 11 个人题解(B题)
Codeforces Global Round 11 1427A. Avoiding Zero 题目链接:click here 待补 1427B. Chess Cheater 题目链接:click h ...
- python软件安装-Windows
开发语言: 高级语言:Java.C.PHP.Go.ruby.c++ #字节码 低级语言:C.汇编 #机器码 语 ...
- shell-逻辑操作符讲解与文件条件测试多范例多生产案例
1. 逻辑操作符 在书写测试表达式时,可以使用表1.1中的逻辑操作符实现复杂的条件测试 表1.1逻辑连接符 提示: ! 中文意思是反:与一个逻辑值相反的逻辑值 -a 中文意思是与(and & ...