Обьектийн
хүрээ, өнгө, хэлбэр, байрлал, уусалтын шилжилт хөдөлгөөн.
HTML код
<body>
<div
class="box"><div class="one"> Хүрээ, дэвсгэр өнгө,
хэлбэр </div></div> <br>
<div
class="box"><div class="two"> Хэлбэр, дэвсгэр өнгө,
эргэлт
</div></div> <br>
<div
class="box"><div class="three">Гадна хүрээ
</div></div> <br>
<div
class="box"><div class="four"> Хэмжээ </div></div>
<br>
<div
class="box"><div class="five"> Байрлал
</div></div> <br>
<div
class="box"><div> Зургийн уусалт </div> <img
src="car.jpeg"> </div> <br>
<div
class="box"><div class="six"> Дэвсгэр зургийн
байрлал </div></div> <br>
</body>
CSS код
<style>
body { font-family: arial; margin: 0; text-align: center } /*
хуудасны үндсэн хэлбэр тодорхойлох */
div, img { /*
хуудасны бүх муж болон зурагт шилжилт оруулах */
transition: 1s
ease-in-out; } /* шилжилт 1 секундэд, жигд хийгдэх */
.one, .two, .three { /*
3 классын хэлбэр тодорхойлох */
border: 5px solid
transparent; /*
мужийн хүрээ тодорхойлох */
width: 200px; /*
мужийн өргөн тодорхойлох */
height: 100px; /*
мужийн өндөр тодорхойлох */
margin: 0 auto; /* 4 захаас
авах зай */
padding: 10px; } /*
дотор зай */
.one { /*
класс тодорхойлох */
background-color:
#B0CBC4; } /* дэвсгэр өнгө тодорхойлох */
.one:hover { /*
хулгана байрлах үеийн хэлбэр тодорхойлох */
border: #0000FF; /* хүрээний өнгө
тодорхойлох */
background-color:
#FF0000; /* дэвсгэр өнгө
тодорхойлох */
border-radius:50%; } /* хүрээний
өнцөг тодорхойлох */
.two {
background-color:
#9F908F; }
.two:hover {
border: 5px inset
#9F908F; /* дотор хүрээ
тодорхойлох */
background-color:
#E0CABB;
transform:
rotateZ(-30deg); } /* мужийн эргэлтийн хэмийг
тодорхойлох */
.three {
background-color:
#FBE2A9;
border: 5px solid
#FFD18F;
outline: 5px
solid transparent; }
.three:hover {
outline: 5px
solid #9E8463; /* мужийн гадна хүрээний өргөн, өнгө тодорхойлох*/
outline-offset:
5px; }
.four {
width: 200px;
height: 100px;
background-color:
#95A1B1;
margin: 0 auto; }
.four:hover {
width: 250px;
height: 80px; }
.five {
width: 100px;
height: 100px;
background-color:
#E0CABB;
margin: 0 auto;
position:
relative; /*
мужийн байрлал тодорхойлох (харьцангуй) */
left: 50px; }
.five:hover {
left: -50px; } /*
зүүн талруу шилжих зай тодорхойлох */
img:hover {opacity: 0.5;}
.six {
width: 200px;
height: 200px;
margin: 0 auto;
background:
url("ball.png"); /*
дэвсгэр зураг тодорхойлох */
background-repeat: no-repeat; /*
дэвсгэр зурагт давталт хийхгүй */
background-position: bottom center;
} /* дэвсгэр зургийн
байрлал тодорхойлох (доод) */
.six:hover {
background-position: top center; } /* дэвсгэр зургийн байрлал тодорхойлох (дээд) */
</style>
