生活随笔
收集整理的這篇文章主要介紹了
html实现3D立体动态像册源代码
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、將多張女朋友圖片合成一張gif圖片，可百度查找合成GIF工具，并將GIF圖片命令為美女.gif。
二、將下面的源代碼復制粘貼到txt文件中，然后修改后綴為.html。
三、將美女.gif與html文件放在同一目錄，雙擊運行html即可。
<!doctype html
>
<html
>
<head
>
<meta charset
="utf-8">
<meta name
="author" content
="JiuMeilove"/>
<title
>親愛的寶貝
</title
>
<style
>* {margin
: 0;padding
: 0;}body
{min-height
: 100vh
;height
: 100vh
;min-width
: 100%;background
-color
: height
: 100%;width
: 100%;display
: flex
;justify
-content
: center
;align
-items
: center
;}body
>section
>div
:first
-of
-type {width
: 100%;position
: absolute
;left
: 0;top
: 8%;}body
>section
>div
:first
-of
-type>p
{text
-align
: center
;font
-size
: 7em
;margin
: 0 auto
;text
-decoration
: none
;-webkit
-transition
: all 0.5s
;-moz
-transition
: all 0.5s
;transition
: all 0.5s
;color
: font
-family
: 華文行楷
;}body
>section
:hover p
{-webkit
-animation
: neon1
1.5s ease
-in-out infinite alternate
;-moz
-animation
: neon1
1.5s ease
-in-out infinite alternate
;animation
: neon1
1.5s ease
-in-out infinite alternate
;}@
-webkit
-keyframes neon1
{from {text
-shadow
: 0 0 10px
}to
{text
-shadow
: 0 0 5px
}}li
{list-style
: none
;}body
>section
>div
:last
-of
-type {width
: 200px
;height
: 200px
;transform
-style
: preserve
-3d;transform
: rotateX
(13deg
);animation
: move 30s linear infinite
;}body
>section
>div
:last
-of
-type>ul
{width
: 200px
;height
: 200px
;position
: absolute
;left
: 50px
;top
: 30px
;transform
-style
: preserve
-3d;}body
>section
>div
:last
-of
-type>ul
>li
{width
: 100px
;height
: 100px
;position
: absolute
;left
: 0;top
: 0;transition
: all 2s ease
;background
: url
("美女.gif") no
-repeat center center
;<!
-- 此處插入女朋友照片，照片與html文件置于同一目錄
-->}body
>section
>div
:last
-of
-type>ul
>li
:nth
-child
(1) {transform
: rotateX
(0deg
) translateZ
(50px
);}body
>section
>div
:last
-of
-type>ul
>li
:nth
-child
(2) {transform
: rotateY
(180deg
) translateZ
(50px
);}body
>section
>div
:last
-of
-type>ul
>li
:nth
-child
(3) {transform
: rotateX
(-90deg
) translateZ
(50px
);}body
>section
>div
:last
-of
-type>ul
>li
:nth
-child
(4) {transform
: rotateX
(90deg
) translateZ
(50px
);}body
>section
>div
:last
-of
-type>ul
>li
:nth
-child
(5) {transform
: rotateY
(-90deg
) translateZ
(50px
);}body
>section
>div
:last
-of
-type>ul
>li
:nth
-child
(6) {transform
: rotateY
(90deg
) translateZ
(50px
);}body
>section
>div
:last
-of
-type>ol
{width
: 800px
;height
: 400px
;position
: absolute
;left
: 0;top
: -20px
;transform
-style
: preserve
-3d;}body
>section
>div
:last
-of
-type>ol
>li
{width
: 200px
;height
: 200px
;background
: position
: absolute
;left
: 0;top
: 0;opacity
: 0.3;transition
: all 3s ease
;}body
>section
>div
:last
-of
-type>ol
>li
{background
: url
("images/SDGIF_Rusult_1.gif") no
-repeat center center
;}body
>section
>div
:last
-of
-type>ol
>li
:nth
-child
(1) {transform
: rotateX
(0deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type>ol
>li
:nth
-child
(2) {transform
: rotateY
(180deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type>ol
>li
:nth
-child
(3) {transform
: rotateX
(-90deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type>ol
>li
:nth
-child
(4) {transform
: rotateX
(90deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type>ol
>li
:nth
-child
(5) {transform
: rotateY
(-90deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type>ol
>li
:nth
-child
(6) {transform
: rotateY
(90deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type:hover
>ul
>li
{transform
: translateZ
(100px
);width
: 200px
;height
: 200px
;opacity
: 0.8;left
: -50px
;top
: -50px
;}body
>section
>div
:last
-of
-type:hover ul li
:nth
-child
(2) {transform
: rotateY
(180deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type:hover ul li
:nth
-child
(3) {transform
: rotateX
(-90deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type:hover ul li
:nth
-child
(4) {transform
: rotateX
(90deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type:hover ul li
:nth
-child
(5) {transform
: rotateY
(-90deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type:hover ul li
:nth
-child
(6) {transform
: rotateY
(90deg
) translateZ
(100px
);}body
>section
>div
:last
-of
-type:hover
>ol
>li
{transform
: translateZ
(300px
);width
: 400px
;height
: 400px
;opacity
: 0.8;left
: -100px
;top
: -100px
;}body
>section
>div
:last
-of
-type:hover ol li
:nth
-child
(2) {transform
: rotateY
(180deg
) translateZ
(300px
);}body
>section
>div
:last
-of
-type:hover ol li
:nth
-child
(3) {transform
: rotateX
(-90deg
) translateZ
(300px
);}body
>section
>div
:last
-of
-type:hover ol li
:nth
-child
(4) {transform
: rotateX
(90deg
) translateZ
(300px
);}body
>section
>div
:last
-of
-type:hover ol li
:nth
-child
(5) {transform
: rotateY
(-90deg
) translateZ
(300px
);}body
>section
>div
:last
-of
-type:hover ol li
:nth
-child
(6) {transform
: rotateY
(90deg
) translateZ
(300px
);}@keyframes move
{from {transform
: rotateX
(13deg
) rotateY
(360deg
) rotateZ
(0deg
);}to
{transform
: rotateX
(13deg
) rotateY
(0deg
) rotateZ
(0deg
);}
}
</style
>
</head
>
<body
>
<section
><div
><p
>親愛的寶貝
</p
></div
><div
class="box"><ul
class="minbox"><li
></li
><li
></li
><li
></li
><li
></li
><li
></li
><li
></li
></ul
><ol
class="maxbox"><li
></li
><li
></li
><li
></li
><li
></li
><li
></li
><li
></li
></ol
></div
>
</section
>
</body
>
</html
>
更多Python源代碼請關注公眾號:Python代碼大全，
總結
以上是生活随笔為你收集整理的html实现3D立体动态像册源代码的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
