Small Make-css+html Carousel

Source: Internet
Author: User

Source:

<! DOCTYPE html>
<title></title>
<meta charset= "Utf-8" >
<style type= "Text/css" >
body{
transform-style:preserve-3d;
Background-image:radial-gradient (Yellow,pink)

}
. outer{
width:200px;
height:300px;
/* border:1px Solid green;*/
position:relative;
margin:100px Auto;
Transform:rotatey (10deg) Rotatex (30deg);
transform-style:preserve-3d;
/*transform:rotatex ( -38deg) Rotatey ( -35DEG); * *
Animation:mofang 7s linear Infinite;
}
@keyframes mofang{
from{
Transform:rotatex (0deg) Rotatey (10deg);

}
to{
Transform:rotatey (360deg) Rotatex (10DEG);
}
}
. inner{
width:200px;
height:300px;
BORDER:2PX solid red;
Position:absolute;
}
. Inner:nth-child (1) {
Transform:translatez (308PX);
}
. Inner:nth-child (2) {
Transform:translatez ( -308px);
}
. Inner:nth-child (3) {
Transform:rotatey (36deg) Translatez (310PX);
}
. Inner:nth-child (4) {
Transform:rotatey (36deg) Translatez ( -310px);
}
. Inner:nth-child (5) {
Transform:rotatey (72deg) Translatez (310PX);
}
. Inner:nth-child (6) {
Transform:rotatey (72deg) Translatez ( -310px);
}
. Inner:nth-child (7) {
Transform:rotatey (108deg) Translatez (310PX);
}
. Inner:nth-child (8) {
Transform:rotatey (108deg) Translatez ( -310px);
}
. Inner:nth-child (9) {
Transform:rotatey (144deg) Translatez (310PX);
}
. Inner:nth-child (10) {
Transform:rotatey (144deg) Translatez ( -308px);
}
h2{
Color:orange;
}
</style>
<body>
<marquee scrollamount= "5" >
"How Lucky"
Word: Liu Jiaze

Qu: Sheng Yu

Singing: Han Anxu

Meet in the hundreds of millions

Have the same tacit understanding

It's not easy.

You know my stubbornness.

I know your temper.

Two hearts are near

Can't wait to explain my mood

Afraid to miss the time of falling in love with you

Romance is ready.

A new journey

How lucky.

At the most beautiful age.

Met you

No regrets, no pity.

Hold you tight.

Use all your strength.

Don't let happiness escape

How lucky.

Love You This thing

Become me

The most right decision in this life

I believe

You are the only one

Willing to accompany you in the end

How lucky I met you.

How lucky I am to fall in love with you

How lucky you are to be together.

How lucky I met you.

How lucky I am to fall in love with you

How lucky you are to be together.

Meet in the hundreds of millions

Have the same tacit understanding

It's not easy.

You know my stubbornness.

I know your temper.

Two hearts are near

Can't wait to explain my mood

Afraid to miss the time of falling in love with you

Romance is ready.

A new journey

How lucky.

At the most beautiful age.

Met you

No regrets, no pity.

Hold you tight.

Use all your strength.

Don't let happiness escape

How lucky.

Love You This thing

Become me

The most right decision in this life

I believe

You are the only one

Willing to accompany you in the end

How lucky I met you.

How lucky I am to fall in love with you

How lucky you are to be together.

How lucky I met you.

How lucky I am to fall in love with you

How lucky you are to be together.

How lucky.

At the most beautiful age.

Met you

No regrets, no pity.

Hold you tight.

Use all your strength.

Don't let happiness escape

How lucky.

Love You This thing

Become me

The most right decision in this life

I believe

You are the only one

Willing to accompany you in the end <audio src= "Http://wl.baidu190.com/1465095357/fbef26cbf77c7072a34ba1dd074e889b.mp3" AutoPlay loop= "loop" > </audio>
<div class= "outer" >
<div class= "inner" ></div>
<div class= "inner" ></div>
<div class= "inner" ></div>
<div class= "inner" ></div>
<div class= "inner" ></div>
<div class= "inner" ></div>
<div class= "inner" ></div>
<div class= "inner" ></div>
<div class= "inner" ></div>
<div class= "inner" ></div>

</div>

</body>

Static "Want to add pictures on the side, put the prepared picture into the source code corresponding location is OK":

Small Make-css+html Carousel

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.