CSS3制作404立体字体
CSS3制作404立体字体页面效果
.demo p:first-child span:hover {
text-shadow:0px0px2px#686868,
0px1px1px#fff,
0px2px1px#fff,
0px3px1px#fff,
0px4px1px#fff,
0px5px1px#fff,
0px6px1px#fff,
0px7px1px#777,
0px8px3px#fff,
0px9px5px#fff,
0px10px7px#fff,
0px11px9px#fff,
0px12px11px#fff,
0px13px15px#fff;
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>CSS3制作404立体字体页面效果</title>
<link rel="stylesheet" type="text/css" href="css/my.css">
</head>
<body>
<h1 class="keTitle">CSS3制作404立体字体页面效果</h1>
<!--效果html开始-->
<div class="demo">
<p align="center"><span>4</span><span>0</span><span>4</span></p>
<p align="center">该页面不存在(´・ω・`)</p>
</div>
<!--效果html结束-->
</body>
</html>
@charset"utf-8";
body {
background-color:#ECECEC;
font-family:'Open Sans', sans-serif;
font-size:14px;
color:#3c3c3c;
}
.demo p:first-child {
text-align: center;
font-family: cursive;
font-size:150px;
font-weight: bold;
line-height:100px;
letter-spacing:5px;
color:#fff;
}
.demo p:first-child span {
cursor: pointer;
text-shadow:0px0px2px#686868,
0px1px1px#ddd,
0px2px1px#d6d6d6,
0px3px1px#ccc,
0px4px1px#c5c5c5,
0px5px1px#c1c1c1,
0px6px1px#bbb,
0px7px1px#777,
0px8px3px rgba(100,100,100,0.4),
0px9px5px rgba(100,100,100,0.1),
0px10px7px rgba(100,100,100,0.15),
0px11px9px rgba(100,100,100,0.2),
0px12px11px rgba(100,100,100,0.25),
0px13px15px rgba(100,100,100,0.3);
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.demo p:first-child span:hover {
text-shadow:0px0px2px#686868,
0px1px1px#fff,
0px2px1px#fff,
0px3px1px#fff,
0px4px1px#fff,
0px5px1px#fff,
0px6px1px#fff,
0px7px1px#777,
0px8px3px#fff,
0px9px5px#fff,
0px10px7px#fff,
0px11px9px#fff,
0px12px11px#fff,
0px13px15px#fff;
-webkit-transition: all .1s linear;
transition: all .1s linear;
}
.demo p:not(:first-child){
text-align: center;
color:#666;
font-family: cursive;
font-size:20px;
text-shadow:01px0#fff;
letter-spacing:1px;
line-height:2em;
margin-top:-50px;
}
CSS3制作404立体字体的更多相关文章
- CSS3制作旋转导航
慕课网学习CSS3时,遇到个习题,觉得有必要总结学习下:CSS3制作旋转导航 慕课网习题地址:http://www.imooc.com/code/1883 示例及源码地址:http://codepen ...
- 使用 CSS3 制作一组超时尚的动画按钮效果
通过 CSS3 的新特性,我们创作出好的交互和效果的可能性大大增加.这篇文章中,我想与大家分享一些 CSS3 动画按钮效果.我们的想法是创建一个具有不同风格的一些动画链接元素,鼠标悬停时有动画效果和活 ...
- 学习使用 CSS3 制作网站面包屑导航效果
作为最重要的导航展示形式之一,面包屑导航能够让用户更清楚的知道他们所在页面的层次结构,让他们可以方便的导航到上一层页面.在本教程中,您将学习如何使用 CSS3 技术创建自己的面包屑导航效果. 效果演示 ...
- CSS3制作下拉菜单
导航菜单其实是没有什么可说的,制作方法到处可见,今天这个案例本来不只是一个导 航,还有一个搜索表单的,可是为了偷懒,把搜索表单部分去掉了,就变成了一个CSS3 制作的下拉菜单.在这个导航中主要两点,一 ...
- CSS3制作日历
目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...
- CSS3制作
目标是制作如下面DEMO显示的一个日历效果: HTML Markup 先来看看其结构: <div class="calendar"> <span class=&q ...
- css3制作导航栏
<!doctype html><html lang="en"><head> <meta charset="UTF-8&qu ...
- 8个纯CSS3制作的动画应用及源码
对于一个复杂的图形或者动画来说,之前我们的处理方式是图片叠加或者利用CSS+JavaScript的方法,然而随着CSS3标准的不断成熟,我们甚至完全可以利用CSS3来绘制一些图片和制作丰富的动画特效. ...
- 图解CSS3制作圆环形进度条的实例教程
圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
随机推荐
- easyui图标对照
转自:https://blog.csdn.net/qq_34545192/article/details/78250816 原作者文章地址: http://www.cnblogs.com/timeme ...
- java运行jdk连接mysql出现了:Establishing SSL connection without server's identity verification is not recommended
注意:出现这类提示也不会影响对数据库的增删改查操作,所以不用紧张.. 在运行练习时出现下面的错误信息提示: Establishing SSL connection without server's i ...
- SVG Path标签 A 参数
A rx ry x-axis-rotation large-arc-flag sweep-flag x yrx:x轴半径ry:y轴半径x-axis-rotation:指椭圆的X轴与水平方向顺时针方向夹 ...
- bzoj 3733: [Pa2013]Iloczyn【dfs】
参考:http://www.cnblogs.com/clrs97/p/5125976.html 瞎搞约数失败...滚去搜索 dfs(x,y,z) 表示当前可选第x到第m个约数,还要选y个约数,已有z的 ...
- P1128 [HNOI2001]求正整数
传送门 rqy是我们的红太阳没有它我们就会死 可以考虑dp,设\(dp[i][j]\)表示只包含前\(j\)个质数的数中,因子个数为\(i\)的数的最小值是多少,那么有转移方程 \[f[i][j]=m ...
- SpringBoot整合SpringSecurity简单案例
在我们开发项目的过程中经常会用到一些权限管理框架,Java领域里边经常用的可能就是shiro了,与之对应的还有SpringSecurity,SpringSecurity可以说是非常强大,与Spring ...
- 最大流增广路(KM算法) HDOJ 2255 奔小康赚大钱
题目传送门 /* KM:裸题第一道,好像就是hungary的升级版,不好理解,写点注释 KM算法用来解决最大权匹配问题: 在一个二分图内,左顶点为X,右顶点为Y,现对于每组左右连接Xi,Yj有权w(i ...
- Storm编程入门API系列之Storm的可靠性的ACK消息确认机制
概念,见博客 Storm概念学习系列之storm的可靠性 什么业务场景需要storm可靠性的ACK确认机制? 答:想要保住数据不丢,或者保住数据总是被处理.即若没被处理的,得让我们知道. publi ...
- layer父页获取弹出层输入框里面的值
主要是因为修改功能,原来页面填写数据如图 改为 其中点击填写明细弹出框 填写完毕后点击确认返回,同事这里因为她是存的多表,所以点击确认就直接保存数据了,改的这个功能原本保存是整体保存,我就不想改原来的 ...
- P1823 音乐会的等待
题目描述 N个人正在排队进入一个音乐会.人们等得很无聊,于是他们开始转来转去,想在队伍里寻找自己的熟人.队列中任意两个人A和B,如果他们是相邻或他们之间没有人比A或B高,那么他们是可以互相看得见的. ...