-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
过渡属性示例
- Loading branch information
Showing
2 changed files
with
75 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| /*body{ | ||
| background: pink; | ||
| }*/ | ||
|
|
||
| div{ | ||
| /* background-color: pink; */ | ||
| background-image: linear-gradient(to top left,blue,pink); | ||
| width:200px; | ||
| height: 300px; | ||
| position: absolute; | ||
| top: 200px; | ||
| left: 200px; | ||
| perspective: 2000px; | ||
| /*1必须*/ | ||
| -webkit-transform-style: preserve-3d; | ||
| transform-style: preserve-3d; | ||
| /*2必须*/ | ||
|
|
||
| transform: rotateY(-85deg); | ||
| /*3效果*/ | ||
| /*transform: scaleX(1.5);*/ | ||
| /*perspective-origin: 0% 100%;*/ | ||
| /*4可选，旋转中心点*/ | ||
| transition-property: all; | ||
| /*1必须*/ | ||
| transition-delay: 1s; | ||
| /*2必须，可以写很多时间，表示每一个属性的延迟时间*/ | ||
| transition-duration: 1s; | ||
| /*完成过渡所需时间，平滑过渡*/ | ||
| } | ||
| div:hover{ | ||
| /* background-color: rgb(247, 247, 247); */ | ||
| transform: translate3d(100px,0,0); | ||
| transform: rotateY(85deg); | ||
| } | ||
| a{ | ||
| display: block; | ||
| height: 50px; | ||
| width: 100%; | ||
| /* background-color: rgba(255,255,255,0.2); */ | ||
| text-decoration: none; | ||
| text-align: center; | ||
| border-bottom: solid 1px rgba(0,0,0,0.3); | ||
| } | ||
| b{ | ||
| vertical-align: middle; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!DOCTYPE html> | ||
| <!-- 文档类型声明 --> | ||
| <html> | ||
| <head> | ||
| <meta charset="utf-8"> | ||
| <!-- 声明字符编码 --> | ||
| <title>标签</title> | ||
| <link rel="stylesheet" type="text/css" href="01.css"> | ||
| <!-- 链接到外部样式文件 | ||
| rel必需。定义当前文档与被链接文档之间的关系。 | ||
| type规定被链接文档的 MIME 类型。 --> | ||
|
|
||
| </head> | ||
| <body> | ||
| <div> | ||
| <a href="#"><b>button1</b></a> | ||
| <a href="#">button2</a> | ||
| <a href="#">button3</a> | ||
| <a href="#">button4</a> | ||
| </div> | ||
|
|
||
|
|
||
| </body> | ||
| </html> |