Сегодня я приготовил что-то интересное для вас. Это демонстрация нескольких оптических иллюзий в CSS3 (без использования каких-либо изображений или JavaScript). Наслаждайтесь результатами.
Вот образцы и загружаемый пакет:
Live Demo
скачать в упаковке
Хорошо, загрузите файлы примеров и давайте начнем кодировать!
Шаг 1. HTML
Как обычно, мы начнем с HTML. Вот полный HTML-код всех 6 демонстраций.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>CSS3 Optical Illusions | Script Tutorials</title> <link href="css/layout.css" type="text/css" rel="stylesheet"> <link href="css/illusions.css" type="text/css" rel="stylesheet"> </head> <body> <header> <h2>CSS3 Optical Illusions</h2> <a href="http://www.script-tutorials.com/css3-optical-illusions/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </header> <div class="container"> <span id="page1"></span> <span id="page2"></span> <span id="page3"></span> <span id="page4"></span> <span id="page5"></span> <span id="page6"></span> <a class="contr" href="#page1" title="Are these lines parallel? Yes, of course">1</a> <a class="contr" href="#page2" title="The circles rotate?">2</a> <a class="contr" href="#page3" title="The upper half of each figure is same as lower half, is not it? Lets turn them, The difference becomes much bigger">3</a> <a class="contr" href="#page4" title="At the intersections of white lines, except for the intersection, where you keep your sight at the moment, we can see small gray spots.">4</a> <a class="contr" href="#page5" title="See inside for some time. They saw the green stains? But nothing green is not here.">5</a> <a class="contr" href="#page6" title="Another one move effect">6</a> <div class="demos"> <div id="i1"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div id="i2"> <div class="cir1"> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> <div class="cir2"> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> <div class="cir3"> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> <div class="cir4"> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> <div class="cir5"> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> <div class="cir6"> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> <div class="cir7"> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> <div class="cir8"> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> <div class="cir9"> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> </div> <div id="i3"> <div class="pos">38</div> <div class="rev">38</div> </div> <div id="i4"> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> <div class="row"></div> </div> <div id="i5"> <div> <div id="o1"></div><div id="o2"></div><div id="o3"></div> <div id="o4"></div><div id="o5"></div><div id="o6"></div> <div id="o7"></div><div id="o8"></div><div id="o9"></div> <div id="o10"></div><div id="o11"></div><div id="o12"></div> </div> </div> <div id="i6"> <div> <div class="yellow r1"> <div class="pink r2"> <div class="yellow r3"> <div class="pink r4"></div> </div> </div> </div> </div> <div> <div class="yellow r1"> <div class="pink r2"> <div class="yellow r3"> <div class="pink r4"></div> </div> </div> </div> </div> <div> <div class="yellow r1"> <div class="pink r2"> <div class="yellow r3"> <div class="pink r4"></div> </div> </div> </div> </div> <div> <div class="yellow r1"> <div class="pink r2"> <div class="yellow r3"> <div class="pink r4"></div> </div> </div> </div> </div> </div> </div> </div> </body> </html>
Шаг 2. CSS
Вот стили CSS. Возможно, вы заметили, что в нашем html у меня есть два CSS-файла: layout.css и illusions.css. Первый файл (layout.css) содержит стили нашей тестовой страницы. Мы не будем публиковать эти стили в этой статье, но если вы хотите — вы можете найти эти стили в нашем пакете.
CSS / illusions.css
span { display: none; } .contr { color: #000000; cursor: pointer; float: left; font-size: 16px; font-weight: bold; height: 30px; line-height: 30px; margin: 10px; text-align: center; text-decoration: none; width: 60px; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; -o-border-radius:10px; border-radius:10px; background-color:#e3e3ff; background: -moz-linear-gradient(#ffffff, #eee); background: -ms-linear-gradient(#ffffff, #eee); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #eee)); background: -webkit-linear-gradient(#ffffff, #eee); background: -o-linear-gradient(#ffffff, #eee); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee'); -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee')"; background: linear-gradient(#ffffff, #eee); } .contr:hover{ background-color:#e3e3ff; box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); -moz-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); -webkit-box-shadow:0px 0px 4px rgba(0,0,0,0.5) inset, 0px 0px 0px 4px rgba(51,51,204,0.5); } .demos { background-color: #b2b2b2; display: block; height: 640px; margin-top: 55px; overflow: hidden; position: relative; } .demos > div { display: none; } #page1:target ~ .demos #i1 { display: block; } #page2:target ~ .demos #i2 { display: block; } #page3:target ~ .demos #i3 { display: block; } #page4:target ~ .demos #i4 { display: block; } #page5:target ~ .demos #i5 { display: block; } #page6:target ~ .demos #i6 { display: block; } /* illusion 1 */ #i1 { width: 900px; } #i1 .row { background-color: #fff; border-bottom: 2px solid #888; height: 90px; -webkit-background-size: 140px 70px; -moz-background-size: 140px 70px; -ms-background-size: 140px 70px; -o-background-size: 140px 70px; background-size: 140px 70px; background-position: 0 50%; background-image: -webkit-linear-gradient(0deg, #000 50%, transparent 50%, transparent); background-image: -moz-linear-gradient(0deg, #000 50%, transparent 50%, transparent); background-image: -ms-linear-gradient(0deg, #000 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, #000 50%, transparent 50%, transparent); background-image: linear-gradient(0deg, #000 50%, transparent 50%, transparent); } #i1 .row:nth-child(3n+3) { background-position: 60px 50%; } #i1 .row:nth-child(2n+2) { background-position: 30px 50%; } /* illusion 2 */ #i2 { background-color: #98CB00; height: 640px; margin: 0 auto; overflow: hidden; padding: 0 150px; position: relative; width: 600px; } #i2 > div { float: left; height: 105px; padding-left: 90px; padding-top: 90px; position: relative; width: 105px; } #i2 div div { border: 1px outset #fff; height: 20px; position: absolute; width: 30px; -webkit-border-radius: 100px / 50px; -moz-border-radius: 100px / 50px; -ms-border-radius: 100px / 50px; -o-border-radius: 100px / 50px; border-radius: 100px / 50px; background: -webkit-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402); background: -moz-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402); background: -ms-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402); background: -o-linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402); background: linear-gradient(top, #580402, #a63b17, #580402, #a63b17, #580402); } #i2 #o1 { -webkit-transform: rotate(-30deg) translatex(70px); -moz-transform: rotate(-30deg) translatex(70px); -ms-transform: rotate(-30deg) translatex(70px); -o-transform: rotate(-30deg) translatex(70px); transform: rotate(-30deg) translatex(70px); } #i2 #o2 { -webkit-transform: rotate(-60deg) translatex(70px); -moz-transform: rotate(-60deg) translatex(70px); -ms-transform: rotate(-60deg) translatex(70px); -o-transform: rotate(-60deg) translatex(70px); transform: rotate(-60deg) translatex(70px); } #i2 #o3 { -webkit-transform: rotate(-90deg) translatex(70px); -moz-transform: rotate(-90deg) translatex(70px); -ms-transform: rotate(-90deg) translatex(70px); -o-transform: rotate(-90deg) translatex(70px); transform: rotate(-90deg) translatex(70px); } #i2 #o4 { -webkit-transform: rotate(-120deg) translatex(70px); -moz-transform: rotate(-120deg) translatex(70px); -ms-transform: rotate(-120deg) translatex(70px); -o-transform: rotate(-120deg) translatex(70px); transform: rotate(-120deg) translatex(70px); } #i2 #o5 { -webkit-transform: rotate(-150deg) translatex(70px); -moz-transform: rotate(-150deg) translatex(70px); -ms-transform: rotate(-150deg) translatex(70px); -o-transform: rotate(-150deg) translatex(70px); transform: rotate(-150deg) translatex(70px); } #i2 #o6 { -webkit-transform: rotate(-180deg) translatex(70px); -moz-transform: rotate(-180deg) translatex(70px); -ms-transform: rotate(-180deg) translatex(70px); -o-transform: rotate(-180deg) translatex(70px); transform: rotate(-180deg) translatex(70px); } #i2 #o7 { -webkit-transform: rotate(-210deg) translatex(70px); -moz-transform: rotate(-210deg) translatex(70px); -ms-transform: rotate(-210deg) translatex(70px); -o-transform: rotate(-210deg) translatex(70px); transform: rotate(-210deg) translatex(70px); } #i2 #o8 { -webkit-transform: rotate(-240deg) translatex(70px); -moz-transform: rotate(-240deg) translatex(70px); -ms-transform: rotate(-240deg) translatex(70px); -o-transform: rotate(-240deg) translatex(70px); transform: rotate(-240deg) translatex(70px); } #i2 #o9 { -webkit-transform: rotate(-270deg) translatex(70px); -moz-transform: rotate(-270deg) translatex(70px); -ms-transform: rotate(-270deg) translatex(70px); -o-transform: rotate(-270deg) translatex(70px); transform: rotate(-270deg) translatex(70px); } #i2 #o10 { -webkit-transform: rotate(-300deg) translatex(70px); -moz-transform: rotate(-300deg) translatex(70px); -ms-transform: rotate(-300deg) translatex(70px); -o-transform: rotate(-300deg) translatex(70px); transform: rotate(-300deg) translatex(70px); } #i2 #o11 { -webkit-transform: rotate(-330deg) translatex(70px); -moz-transform: rotate(-330deg) translatex(70px); -ms-transform: rotate(-330deg) translatex(70px); -o-transform: rotate(-330deg) translatex(70px); transform: rotate(-330deg) translatex(70px); } #i2 #o12 { -webkit-transform: rotate(0deg) translatex(70px); -moz-transform: rotate(0deg) translatex(70px); -ms-transform: rotate(0deg) translatex(70px); -o-transform: rotate(0deg) translatex(70px); transform: rotate(0deg) translatex(70px); } /* illusion 3 */ #i3 { color: #000000; font-family: Times New Roman; font-size: 250px; padding-left: 300px; } #i3 .rev { text-align: right; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); } /* illusion 4 */ #i4 .row { background-color: #fff; border-bottom: 5px solid #fff; height: 50px; -webkit-background-size: 60px 50px; -moz-background-size: 60px 50px; -ms-background-size: 60px 50px; -o-background-size: 60px 50px; background-size: 60px 50px; background-position: 0 50%; background-image: -webkit-linear-gradient(0deg, #000 90%, transparent 10%, transparent); background-image: -moz-linear-gradient(0deg, #000 90%, transparent 10%, transparent); background-image: -ms-linear-gradient(0deg, #000 50%, transparent 50%, transparent); background-image: -o-linear-gradient(0deg, #000 50%, transparent 50%, transparent); background-image: linear-gradient(0deg, #000 50%, transparent 50%, transparent); } /* illusion 5 */ @-webkit-keyframes custom_effect { 0% {opacity: 0;} 33% {opacity: 1;} 100% {opacity: 1;} } @-moz-keyframes custom_effect { 0% {opacity: 0;} 33% {opacity: 1;} 100% {opacity: 1;} } #i5 { background-color: #b2b2b2; height: 600px; margin: 0 auto; overflow: hidden; position: relative; width: 600px; } #i5 > div { float: left; height: 200px; padding-left: 200px; padding-top: 200px; position: relative; width: 200px; } #i5 div div { height: 50px; position: absolute; width: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; background-color: #b2b2b2; background-image: -webkit-radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%); background-image: -moz-radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%); background-image: -o-radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%); background-image: radial-gradient(50% 50%, circle, #FD19FD, #b2b2b2 70%); -moz-animation-name: custom_effect; -moz-animation-duration: 1.2s; -moz-animation-timing-function: linear; -moz-animation-iteration-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: forwards; -webkit-animation-name: custom_effect; -webkit-animation-duration: 1.2s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; } #i5 #o1 { -moz-transform: rotate(30deg) translatex(150px); -moz-animation-delay: 0.1s; -webkit-transform: rotate(30deg) translatex(150px); -webkit-animation-delay: 0.1s; } #i5 #o2 { -moz-transform: rotate(60deg) translatex(150px); -moz-animation-delay: 0.2s; -webkit-transform: rotate(60deg) translatex(150px); -webkit-animation-delay: 0.2s; } #i5 #o3 { -moz-transform: rotate(90deg) translatex(150px); -moz-animation-delay: 0.3s; -webkit-transform: rotate(90deg) translatex(150px); -webkit-animation-delay: 0.3s; } #i5 #o4 { -moz-transform: rotate(120deg) translatex(150px); -moz-animation-delay: 0.4s; -webkit-transform: rotate(120deg) translatex(150px); -webkit-animation-delay: 0.4s; } #i5 #o5 { -moz-transform: rotate(150deg) translatex(150px); -moz-animation-delay: 0.5s; -webkit-transform: rotate(150deg) translatex(150px); -webkit-animation-delay: 0.5s; } #i5 #o6 { -moz-transform: rotate(180deg) translatex(150px); -moz-animation-delay: 0.6s; -webkit-transform: rotate(180deg) translatex(150px); -webkit-animation-delay: 0.6s; } #i5 #o7 { -moz-transform: rotate(210deg) translatex(150px); -moz-animation-delay: 0.7s; -webkit-transform: rotate(210deg) translatex(150px); -webkit-animation-delay: 0.7s; } #i5 #o8 { -moz-transform: rotate(240deg) translatex(150px); -moz-animation-delay: 0.8s; -webkit-transform: rotate(240deg) translatex(150px); -webkit-animation-delay: 0.8s; } #i5 #o9 { -moz-transform: rotate(270deg) translatex(150px); -moz-animation-delay: 0.9s; -webkit-transform: rotate(270deg) translatex(150px); -webkit-animation-delay: 0.9s; } #i5 #o10 { -moz-transform: rotate(300deg) translatex(150px); -moz-animation-delay: 1.0s; -webkit-transform: rotate(300deg) translatex(150px); -webkit-animation-delay: 1.0s; } #i5 #o11 { -moz-transform: rotate(330deg) translatex(150px); -moz-animation-delay: 1.1s; -webkit-transform: rotate(330deg) translatex(150px); -webkit-animation-delay: 1.1s; } #i5 #o12 { -moz-transform: rotate(0deg) translatex(150px); -moz-animation-delay: 1.2s; -webkit-transform: rotate(0deg) translatex(150px); -webkit-animation-delay: 1.2s; } /* illusion 5 */ #i6 { background-color: #3f023e; height: 640px; margin: 0 auto; overflow: hidden; padding-left: 120px; position: relative; width: 900px; } #i6 .yellow { background-color: #b9bd04; background-image: -webkit-radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%); background-image: -moz-radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%); background-image: -o-radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%); background-image: radial-gradient(50% 50%, circle, #fff531 40%, #b9bd04 80%); } #i6 .pink { background-color: #f101e8; background-image: -webkit-radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%); background-image: -moz-radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%); background-image: -o-radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%); background-image: radial-gradient(50% 50%, circle, #0e0403 40%, #f101e8 80%); } #i6 > div { float: left; height: 320px; position: relative; width: 320px; } #i6 .r1 { height: 320px; position: absolute; width: 320px; -webkit-border-radius: 320px; -moz-border-radius: 320px; -ms-border-radius: 320px; -o-border-radius: 320px; border-radius: 320px; } #i6 .r2 { height: 240px; left: 40px; position: absolute; top: 40px; width: 240px; -webkit-border-radius: 240px; -moz-border-radius: 240px; -ms-border-radius: 240px; -o-border-radius: 240px; border-radius: 240px; } #i6 .r3 { height: 160px; left: 40px; position: absolute; top: 40px; width: 160px; -webkit-border-radius: 160px; -moz-border-radius: 160px; -ms-border-radius: 160px; -o-border-radius: 160px; border-radius: 160px; } #i6 .r4 { height: 80px; left: 40px; position: absolute; top: 40px; width: 80px; -webkit-border-radius: 80px; -moz-border-radius: 80px; -ms-border-radius: 80px; -o-border-radius: 80px; border-radius: 80px; }
Это очень большой пакет стилей, но я надеюсь, что это нормально. Я использовал несколько разных техник CSS3: и анимацию ключевых кадров, и вращение с преобразованием, а иногда — градиенты.
Live Demo
скачать в упаковке
Вывод
Надеюсь, вам понравилось новое демо. Не забудьте поблагодарить и оставить комментарий Удачи!
Источник: http://www.script-tutorials.com/css3-optical-illusions/