طريقة عمل خلفية للمدونة على شكل Slidshow

/* CBSlide-BY-Ayoub.Etmaiti



----------------------------------------------- */



.CBS-Ayoub-Etmaiti,



.CBS-Ayoub-Etmaiti:after {



position: fixed;



width: 100%;



height: 100%;



top: 0px;



left: 0px;



z-index: 0;



}



.CBS-Ayoub-Etmaiti:after {



content: '';



background: transparent
url(http://1.bp.blogspot.com/-oIUwg-kYYww/TwHcFJNdpbI/AAAAAAAASUM/Xajrx6UuZ4A/s1600/pattern.png)
 repeat top left;



}



.CBS-Ayoub-Etmaiti li span {



width: 100%;



height: 100%;



position: absolute;



top: 0px;



left: 0px;



color: transparent;



background-size: cover;



background-position: 50% 50%;



background-repeat: none;



opacity: 0;



z-index: 0;



-webkit-backface-visibility: hidden;



-webkit-animation: imageAnimation 36s linear infinite 0s;



-moz-animation: imageAnimation 36s linear infinite 0s;



-o-animation: imageAnimation 36s linear infinite 0s;



-ms-animation: imageAnimation 36s linear infinite 0s;



animation: imageAnimation 36s linear infinite 0s;



}



.CBS-Ayoub-Etmaiti li div {



z-index: 1000;



position: absolute;



bottom: 10px;



left: 0px;



width: 100%;



text-align: right;



opacity: 0;



-webkit-animation: titleAnimation 36s linear infinite 0s;



-moz-animation: titleAnimation 36s linear infinite 0s;



-o-animation: titleAnimation 36s linear infinite 0s;



-ms-animation: titleAnimation 36s linear infinite 0s;



animation: titleAnimation 36s linear infinite 0s;



}



.CBS-Ayoub-Etmaiti li div h3 {



font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;



font-size: 160px;



padding: 0 30px;



line-height: 120px;



color: rgba(169,3,41, 0.8);



}



.CBS-Ayoub-Etmaiti li:nth-child(1) span { background-image: url([color=red]https://lh5.googleusercontent.com/-umn39TSVmKs/TpNVbgZ7MkI/AAAAAAAAAjs/4xH5GaiBMDs/s903/SANY0048.JPG[/color]) }



.CBS-Ayoub-Etmaiti li:nth-child(2) span {



background-image: url([color=red]https://lh3.googleusercontent.com/-pg71qoEK8L4/TpNVxNFXG6I/AAAAAAAAAjw/8iu8IK6Uc3g/s903/SANY0050.JPG[/color]);



-webkit-animation-delay: 6s;



-moz-animation-delay: 6s;



-o-animation-delay: 6s;



-ms-animation-delay: 6s;



animation-delay: 6s;



}



.CBS-Ayoub-Etmaiti li:nth-child(3) span {



background-image: url([color=red]https://lh5.googleusercontent.com/-AaZ8gHb6azQ/TpNXOBMRJII/AAAAAAAAAkI/wzm9Mve5BDY/s903/SANY0059.JPG[/color]);



-webkit-animation-delay: 12s;



-moz-animation-delay: 12s;



-o-animation-delay: 12s;



-ms-animation-delay: 12s;



animation-delay: 12s;



}



.CBS-Ayoub-Etmaiti li:nth-child(4) span {



background-image: url([color=red]https://lh5.googleusercontent.com/-SgrYJrjxal8/TpNXqx3i5WI/AAAAAAAAAkQ/HjmiV0CB0xQ/s903/SANY0061.JPG[/color]);



-webkit-animation-delay: 18s;



-moz-animation-delay: 18s;



-o-animation-delay: 18s;



-ms-animation-delay: 18s;



animation-delay: 18s;



}



.CBS-Ayoub-Etmaiti li:nth-child(5) span {



background-image: url([color=red]https://lh5.googleusercontent.com/-aagk-eWQIUE/TpNX_xJmGXI/AAAAAAAAAkU/PE3wickISzk/s903/SANY0063.JPG[/color]);



-webkit-animation-delay: 24s;



-moz-animation-delay: 24s;



-o-animation-delay: 24s;



-ms-animation-delay: 24s;



animation-delay: 24s;



}



.CBS-Ayoub-Etmaiti li:nth-child(6) span {



background-image: url([color=red]https://lh4.googleusercontent.com/-KCFmHUUD1K4/TpNZDRJTP_I/AAAAAAAAAko/sjyOU0ahBfA/s903/SANY0069.JPG[/color]);



-webkit-animation-delay: 30s;



-moz-animation-delay: 30s;



-o-animation-delay: 30s;



-ms-animation-delay: 30s;



animation-delay: 30s;



}



.CBS-Ayoub-Etmaiti li:nth-child(2) div {



-webkit-animation-delay: 6s;



-moz-animation-delay: 6s;



-o-animation-delay: 6s;



-ms-animation-delay: 6s;



animation-delay: 6s;



}



.CBS-Ayoub-Etmaiti li:nth-child(3) div {



-webkit-animation-delay: 12s;



-moz-animation-delay: 12s;



-o-animation-delay: 12s;



-ms-animation-delay: 12s;



animation-delay: 12s;



}



.CBS-Ayoub-Etmaiti li:nth-child(4) div {



-webkit-animation-delay: 18s;



-moz-animation-delay: 18s;



-o-animation-delay: 18s;



-ms-animation-delay: 18s;



animation-delay: 18s;



}



.CBS-Ayoub-Etmaiti li:nth-child(5) div {



-webkit-animation-delay: 24s;



-moz-animation-delay: 24s;



-o-animation-delay: 24s;



-ms-animation-delay: 24s;



animation-delay: 24s;



}



.CBS-Ayoub-Etmaiti li:nth-child(6) div {



-webkit-animation-delay: 30s;



-moz-animation-delay: 30s;



-o-animation-delay: 30s;



-ms-animation-delay: 30s;



animation-delay: 30s;



}



@-webkit-keyframes imageAnimation {



0% {



   opacity: 0;



   -webkit-animation-timing-function: ease-in;



}



8% {



   opacity: 1;



   -webkit-transform: scale(1.05);



   -webkit-animation-timing-function: ease-out;



}



17% {



   opacity: 1;



   -webkit-transform: scale(1.1) rotate(3deg);



}



25% {



   opacity: 0;



   -webkit-transform: scale(1.1) rotate(3deg);



}



100% { opacity: 0 }



}



@-moz-keyframes imageAnimation {



0% {



   opacity: 0;



   -moz-animation-timing-function: ease-in;



}



8% {



   opacity: 1;



   -moz-transform: scale(1.05);



   -moz-animation-timing-function: ease-out;



}



17% {



   opacity: 1;



   -moz-transform: scale(1.1) rotate(3deg);



}



25% {



   opacity: 0;



   -moz-transform: scale(1.1) rotate(3deg);



}



100% { opacity: 0 }



}



@-o-keyframes imageAnimation {



0% {



   opacity: 0;



   -o-animation-timing-function: ease-in;



}



8% {



   opacity: 1;



   -o-transform: scale(1.05);



   -o-animation-timing-function: ease-out;



}



17% {



   opacity: 1;



   -o-transform: scale(1.1) rotate(3deg);



}



25% {



   opacity: 0;



   -o-transform: scale(1.1) rotate(3deg);



}



100% { opacity: 0 }



}



@-ms-keyframes imageAnimation {



0% {



   opacity: 0;



   -ms-animation-timing-function: ease-in;



}



8% {



   opacity: 1;



   -ms-transform: scale(1.05);



   -ms-animation-timing-function: ease-out;



}



17% {



   opacity: 1;



   -ms-transform: scale(1.1) rotate(3deg);



}



25% {



   opacity: 0;



   -ms-transform: scale(1.1) rotate(3deg);



}



100% { opacity: 0 }



}



@keyframes imageAnimation {



0% {



   opacity: 0;



   animation-timing-function: ease-in;



}



8% {



   opacity: 1;



   transform: scale(1.05);



   animation-timing-function: ease-out;



}



17% {



   opacity: 1;



   transform: scale(1.1) rotate(3deg);



}



25% {



   opacity: 0;



   transform: scale(1.1) rotate(3deg);



}



100% { opacity: 0 }



}



@-webkit-keyframes titleAnimation {



0% {



   opacity: 0;



   -webkit-transform: translateX(200px);



}



8% {



   opacity: 1;



   -webkit-transform: translateX(0px);



}



17% {



   opacity: 1;



   -webkit-transform: translateX(0px);



}



19% {



   opacity: 0;



   -webkit-transform: translateX(-400px);



}



25% { opacity: 0 }



100% { opacity: 0 }



}



@-moz-keyframes titleAnimation {



0% {



   opacity: 0;



   -moz-transform: translateX(200px);



}



8% {



   opacity: 1;



   -moz-transform: translateX(0px);



}



17% {



   opacity: 1;



   -moz-transform: translateX(0px);



}



19% {



   opacity: 0;



   -moz-transform: translateX(-400px);



}



25% { opacity: 0 }



100% { opacity: 0 }



}



@-o-keyframes titleAnimation {



0% {



   opacity: 0;



   -o-transform: translateX(200px);



}



8% {



   opacity: 1;



   -o-transform: translateX(0px);



}



17% {



   opacity: 1;



   -o-transform: translateX(0px);



}



19% {



   opacity: 0;



   -o-transform: translateX(-400px);



}



25% { opacity: 0 }



100% { opacity: 0 }



}



@-ms-keyframes titleAnimation {



0% {



   opacity: 0;



   -ms-transform: translateX(200px);



}



8% {



   opacity: 1;



   -ms-transform: translateX(0px);



}



17% {



   opacity: 1;



   -ms-transform: translateX(0px);



}



19% {



   opacity: 0;



   -ms-transform: translateX(-400px);



}



25% { opacity: 0 }



100% { opacity: 0 }



}



@keyframes titleAnimation {



0% {



   opacity: 0;



   transform: translateX(200px);



}



8% {



   opacity: 1;



   transform: translateX(0px);



}



17% {



   opacity: 1;



   transform: translateX(0px);



}



19% {



   opacity: 0;



   transform: translateX(-400px);



}



25% { opacity: 0 }



100% { opacity: 0 }



}



/* Show at least something when animations not supported */



.no-cssanimations .CBS-Ayoub-Etmaiti li span{



opacity: 1;



}



@media screen and (max-width: 1140px) {



.CBS-Ayoub-Etmaiti li div h3 { font-size: 100px }



}



@media screen and (max-width: 600px) {



.CBS-Ayoub-Etmaiti li div h3 { font-size: 50px }



}