更新第41个小实例
This commit is contained in:
parent
f29d0491ff
commit
7ee2e5435d
|
@ -44,4 +44,5 @@
|
|||
37. HTML5+CSS3小实例之JS+CSS实现日月交替效果
|
||||
38. HTML5+CSS3小实例之3D分层按钮的悬停效果
|
||||
39. HTML5+CSS3小实例之手机充电特效(二)
|
||||
40. HTML5+CSS3小实例之抽屉式相册
|
||||
40. HTML5+CSS3小实例之抽屉式相册
|
||||
41. HTML5+CSS3小实例之发光文字悬停特效
|
|
@ -0,0 +1,46 @@
|
|||
*{
|
||||
/* 初始化 取消内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
/* 设置的边框和内边距的值是包含在总宽高内的 */
|
||||
box-sizing: border-box;
|
||||
}
|
||||
body{
|
||||
/* 弹性布局 水平垂直居中 */
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
background-color: #000;
|
||||
}
|
||||
h2{
|
||||
font-size: 96px;
|
||||
color: #222;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 5px;
|
||||
cursor: pointer;
|
||||
}
|
||||
h2 span{
|
||||
/* 动画过渡 */
|
||||
transition: 0.5s;
|
||||
}
|
||||
h2:hover span:nth-child(1){
|
||||
margin-right: 10px;
|
||||
}
|
||||
h2:hover span:nth-child(1)::after{
|
||||
content: "'";
|
||||
}
|
||||
h2:hover span:nth-child(2){
|
||||
margin-left: 40px;
|
||||
}
|
||||
h2:hover span{
|
||||
color: #fff;
|
||||
/* 文字阴影 */
|
||||
text-shadow: 0 0 10px #fff,
|
||||
0 0 20px #fff,
|
||||
0 0 40px #fff,
|
||||
0 0 80px #fff,
|
||||
0 0 120px #fff,
|
||||
0 0 160px #fff;
|
||||
}
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>发光文字的悬停特效</title>
|
||||
<link rel="stylesheet" href="../css/41.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h2>
|
||||
<span>i</span>m<span>coming</span>
|
||||
</h2>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in New Issue