CSS3 пайдалану арқылы анимация жасау 3

Programming Solutions /
HTML коды

<html>
    <head>
        <title>CSS3 example</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
		<link type="text/css" rel="stylesheet" href="style/style.css"/>
</head>
<body id="stars">
<div class="page" data-slide="3">
                    <ul id="lists" >
                        <li>
                            <img src="style/images/a.jpg"/>
                            <div class="info">
                                <h3>Web application</h3>
                                <p>Web application,Web applicationWeb applicationWeb applicationWeb applicationWeb applicationWeb applicationWeb applicationWeb applicationWeb applicationWeb application</p>
                            </div>
                        </li>
                        <li>
                            <img src="style/images/Android-wallpapers.jpg"/>
                            <div class="info">
                                <h3>Smart phone application</h3>
                                <p>Smart phone applicationSmart phone applicationSmart phone applicationSmart phone applicationSmart phone applicationSmart phone applicationSmart phone application</p>
                            </div>
                        </li>
                        <li>
                            <img src="style/images/Eye_software.jpg" />
                            <div class="info">
                                <h3>Desktop application</h3>
                                <p>Desktop applicationDesktop applicationDesktop applicationDesktop applicationDesktop applicationDesktop application</p>
                            </div>
                        </li>
                    </ul>
                </div>
				</body>


Осында пайдаланған кодпен суреттерді толығымен мына жерден жүктей аласыздар

CSS коды



body {
    margin:-1px 0px; padding:0px;
    width: 100%;
    background-attachment: fixed;
    overflow-x: hidden; 
}

html{
    text-align:center;
    background: fixed  #0b1318;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
     background-size: cover;
}

#lists { list-style:none; margin:80px 0; height:550px;width: 1050px;left: 187px;position: relative }
#lists li { display:inline; float:left;
                   margin-right: 20px;
                   -webkit-perspective: 500; 
                   -webkit-transform-style: preserve-3d;
                   -webkit-transition-property: perspective;
                   -webkit-transition-duration: 0.5s;
                   
}
#lists li:hover { -webkit-perspective: 5000; }

#lists li img { border:10px solid rgba(20,20,20,0.5); -webkit-transform: rotateY(30deg);
                       -moz-box-shadow:0 1px 10px grey; -webkit-box-shadow:0 1px 10px grey;
                       -webkit-transition-property: transform; -webkit-transition-duration: 0.5s; }
.info { 
    padding:20px;padding-top: 0px; width:200px; height:220px; background-color:#deddcd; margin:-195px 0 0 55px; position:absolute;
    -moz-box-shadow:0 20px 40px #888; -webkit-box-shadow:0 20px 40px #888;
    -webkit-transform: translateZ(30px) rotateY(30deg);
    -webkit-transition-property: transform, box-shadow, margin; -webkit-transition-duration: 0.5s;
    background:rgba(50,50,50,0.7) !important;
    border:#333 solid 1px;
    -moz-box-shadow: 0 0 1px 1px #333333;
    -webkit-box-shadow: 0 0 1px 1px #333333;
    box-shadow: 0 0 5px 1px #333333; 
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;}

0 пікір

Тек тіркелген қолданушылар ғана пікір қалдыра алады.