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制作圆环形进度条的实例教程 首先,当有人说你能不能 ...
随机推荐
- Vue.js实战 5.5章 购物车
<!DOCTYPE html> <html lang="en"> <head> <title>购物车示例</title> ...
- js数值型遇0开始自动转换为8进制
如题,今天在项目更新时发现了js的这个自动转换问题,代码如下: var num = 0110; render:function(num){ var html="<a hre ...
- E2017E0605-hm
carbon copy 抄送, 抄写与送达 blind carbon copy 密送 blind adj. 失明的; 盲目的,轻率的; contact n. 接触; 触点 v 联系,接触; ...
- bzoj 1621: [Usaco2008 Open]Roads Around The Farm分岔路口【dfs】
模拟就行--讲道理这个时间复杂度为啥是对的??? #include<iostream> #include<cstdio> using namespace std; int k, ...
- bzoj题目大体分类
http://m.blog.csdn.net/article/details?id=51387623
- Akka源码分析-Cluster-ClusterClient
ClusterClient可以与某个集群通信,而本身节点不必是集群的一部分.它只需要知道一个或多个节点的位置作为联系节点.它会跟ClusterReceptionist 建立连接,来跟集群中的特定节点发 ...
- Hdu 4612 Warm up (双连通分支+树的直径)
题目链接: Hdu 4612 Warm up 题目描述: 给一个无向连通图,问加上一条边后,桥的数目最少会有几个? 解题思路: 题目描述很清楚,题目也很裸,就是一眼看穿怎么做的,先求出来双连通分量,然 ...
- 如何手工搭建本地Yum仓库
如何手工搭建本地Yum仓库(重点推荐) https://www.linuxidc.com/Linux/2016-09/135480.htm CentOS7.2 创建本地YUM源和局域网YUM源: h ...
- 仿ofo单车做一个轮播效果
github地址 首先我是利用swiper.js做的,因为这个很强大,哈哈~~,上代码 html很简单 <body> <div class="swiper-containe ...
- http请求和响应头部
说一说常见的请求头和响应头都有什么呢? 1)请求(客户端->服务端[request]) GET(请求的方式) /newcoder/hello.html(请求的目标资源) HTTP/1.1 ...