Home
Hiệu ứng

Hiệu ứng lật ảnh và tạo ảnh động từ css3 cho blogspot

CSS là chữ viết tắt của Cascading Style Sheets, nó chỉ đơn thuần là một dạng file text với phần tên mở rộng là .css.

Trong Style Sheet này chứa những câu lệnh CSS. Mỗi một lệnh của CSS sẽ định dạng một phần nhất định của HTML ví dụ như: font của chữ, đường viền, màu nền, căn chỉnh hình ảnh v.v..

Javascript là một ngôn ngữ lập trình được tạo ra vào năm 1995 bởi Brendan Eich tại Netscape.

Mục đích ban đầu để nâng cao khả năng tương tác của trang web với người sử dụng. Thông thường mã javascript (gọi tắt là js) được nhúng vào trong trang web, và được thực thi bởi trình duyệt.

Thường thì ta thấy những hiệu ứng thông minh hay những chuyển động phức tạp của hình ảnh như ảnh động hay các slideshow thường được điều khiển bởi các mã javascript.

Chúng ta cũng thừa nhận javascript vô cùng quan trọng và cần thiết trong thiết kế blog/web nhưng trong một số trường hợp không phải chỉ có javascript mới làm được những việc đó mà css cũng có thể phát huy thế mạnh tương tự.

Hiệu ứng lật ảnh và tạo ảnh động từ css3 cho blogspot
Với những người sử dụng chia sẻ template có sẵn trên mạng thì điều này không cần quan tâm lắm, với người có sở thích tự chỉnh sửa từ template simple thì cũng có chút hữu ích.

Ưu điểm từ các hiệu ứng sử dụng css mang lại là tốc độ load. Một trang blog/web sử dụng nhiều javascript nhất là dẫn link từ các host khác có tốc độ load kém hơn nhiều so với trang web/blog hạn chế sử dụng javascript mà thay thế vào đó là các tiện ích viết từ css3.

Dưới đây là một số hiệu ứng hover lật ảnh hay tạo ảnh động từ css3

Lật ảnh ngang
DEMO 
<style type="text/css">
body{background:#fff;}
.area {margin: auto;position:relative;width: 270px;     height: 270px;    perspective: 600px;}
.area .rotate{width: 100%;    height: 100%;
transform-style: preserve-3d; transition: all 0.5s ease-in-out 0s;
-webkit-transition:preserve-3d; transition: all 0.5s ease-in-out 0s;
-o-transition:preserve-3d;  transition: all 0.5s ease-in-out 0s;
-moz-transition:preserve-3d; transition: all 0.5s ease-in-out 0s;
}
.area .rotate .truoc,.area .rotate .sau{position:absolute;backface-visibility: hidden;}
.rotate.x .sau{   transform: rotateX(180deg);   -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
.area:hover  .rotate.x{ transform: rotateX(180deg);   -webkit-transform: rotateX(180deg); -o-transform: rotateX(180deg); -moz-transform: rotateX(180deg); }
</style>
<div class="area">
<div class="rotate x">
<div class="truoc">
<img border="0" src="http://3.bp.blogspot.com/-3JMC24bkOwc/VXb_mUxITCI/AAAAAAAACLw/Fr9mI4QrEnw/s1600/001.jpg" /></div>
<div class="sau">
<img border="0" src="http://2.bp.blogspot.com/-WwUa1D6s7hA/VXb_mLUf4JI/AAAAAAAACLs/PLYnP31lcW0/s1600/002.jpg" />
</div>
</div>
</div>
Lật ảnh dọc
DEMO 
<div style='margin-left:350px'>
<style type='text/css'>
.flip-container:hover .flipper, .flip-container.hover .flipper {
transform : rotateY(180deg);
}
.flip-container, .front, .back {
width : 268px;
height : 377px;
}
.flipper {
transition : 0.6s;
transform-style : preserve-3d;
position : relative;
}
.front, .back {
backface-visibility : hidden;
position : absolute;
top : 0;
left : 0;
}
.front {
z-index : 2;
transform : rotateY(0deg);
}
.back {
transform : rotateY(180deg);
}
</style>
<div class="flip-container">
<div class="flipper">
<div class="front">
<img alt="gif" src="http://2.bp.blogspot.com/-sQtPUJm_rWw/VXWohGeihFI/AAAAAAAAsio/6MQPJ2K9rEo/s1600/03.png"/></div>
<div class="back">
<img alt="gif" src="http://3.bp.blogspot.com/-PPx_QQNa0AQ/VXWohC9tS6I/AAAAAAAAsik/SjjHm8fh37A/s1600/04.JPG"/></div>
</div>
</div>
</div>
Lật nhiều ảnh
DEMO 
<style type='text/css'>
body{background:#fff;}
.flip3D{ width:270px; height:270px; margin:10px; float:left; }
.flip3D > .front{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
    background:#FC0; width:270px; height:270px;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s; transition: transform .5s linear 0s;
}
  .flip3D > .back{
    position:absolute;
    -webkit-transform: perspective( 600px ) rotateY( 180deg );
    transform: perspective( 600px ) rotateY( 180deg );
    background: #80BFFF;
    width:270px;
    height:270px;
    border-radius: 7px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: -webkit-transform .5s linear 0s;
    transition: transform .5s linear 0s;
}
  .flip3D:hover > .front{
    -webkit-transform: perspective( 600px ) rotateY( -180deg );
    transform: perspective( 600px ) rotateY( -180deg );
}
  .flip3D:hover > .back{
    -webkit-transform: perspective( 600px ) rotateY( 0deg );
    transform: perspective( 600px ) rotateY( 0deg );
}
</style>
<div class="flip3D">
<div class="back">
<img border="0" src="http://3.bp.blogspot.com/-3JMC24bkOwc/VXb_mUxITCI/AAAAAAAACLw/Fr9mI4QrEnw/s1600/001.jpg" /></div>
<div class="front">
<img border="0" src="http://2.bp.blogspot.com/-WwUa1D6s7hA/VXb_mLUf4JI/AAAAAAAACLs/PLYnP31lcW0/s1600/002.jpg" /></div>
</div>
<div class="flip3D">
<div class="back">
<img border="0" src="http://3.bp.blogspot.com/-3JMC24bkOwc/VXb_mUxITCI/AAAAAAAACLw/Fr9mI4QrEnw/s1600/001.jpg" /></div>
<div class="front">
<img border="0" src="http://2.bp.blogspot.com/-WwUa1D6s7hA/VXb_mLUf4JI/AAAAAAAACLs/PLYnP31lcW0/s1600/002.jpg" /></div>
</div>
<div class="flip3D">
<div class="back">
<img border="0" src="http://3.bp.blogspot.com/-3JMC24bkOwc/VXb_mUxITCI/AAAAAAAACLw/Fr9mI4QrEnw/s1600/001.jpg" /></div>
<div class="front">
<img border="0" src="http://2.bp.blogspot.com/-WwUa1D6s7hA/VXb_mLUf4JI/AAAAAAAACLs/PLYnP31lcW0/s1600/002.jpg" /></div>
</div>
Tạo ảnh động
DEMO 
<style>
.element {
  height: 338px;
  width: 465px;
  margin:0 auto;
  background-color: red;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}

@keyframes stretch {
  0% {
    transform: scale(.3);
    background-color: red;
    border-radius: 100%;
  }
  50% {
    background-color: orange;
  }
  100% {
    transform: scale(1.5);
    background-color: yellow;
  }
}

body,
html {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<div class="element">
<img src="http://2.bp.blogspot.com/-NGQMBkrx6Iw/VXn_rpQSRBI/AAAAAAAACMI/IthlSiHL3G4/s1600/b-996233-1429008676.jpg"/></div>
Tạo hoạt hình
DEMO 
<style type='text/css'>
@-webkit-keyframes allmoves {
  0%, 100% {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate(0, -1000px);
    -ms-transform: translate(0, -1000px);
    transform: translate(0, -1000px);
  }
  5% {
    -webkit-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  4%, 53%, 95%, 96% {
    -webkit-transform: translate(0, -18px);
    -ms-transform: translate(0, -18px);
    transform: translate(0, -18px);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  98% {
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
  6%, 12% {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  9%, 15% {
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  18%, 24% {
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  21%, 27%, 57% {
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  30%, 36%, 60% {
    -webkit-transform: rotate(0.7deg);
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  33%, 39%, 63% {
    -webkit-transform: rotate(-0.7deg);
    -ms-transform: rotate(-0.7deg);
    transform: rotate(-0.7deg);
  }
  42%, 48%, 66%, 72% {
    -webkit-transform: rotate(0.2deg);
    -ms-transform: rotate(0.2deg);
    transform: rotate(0.2deg);
  }
  45%, 51%, 69% {
    -webkit-transform: rotate(-0.2deg);
    -ms-transform: rotate(-0.2deg);
    transform: rotate(-0.2deg);
  }
  52%, 75% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
@-webkit-keyframes flip-front {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  54% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  58% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-webkit-keyframes flip-back {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  54% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  58% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-moz-keyframes allmoves {
  0%, 100% {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate(0, -1000px);
    -ms-transform: translate(0, -1000px);
    transform: translate(0, -1000px);
  }
  5% {
    -webkit-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  4%, 53%, 95%, 96% {
    -webkit-transform: translate(0, -18px);
    -ms-transform: translate(0, -18px);
    transform: translate(0, -18px);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  98% {
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
  6%, 12% {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  9%, 15% {
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  18%, 24% {
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  21%, 27%, 57% {
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  30%, 36%, 60% {
    -webkit-transform: rotate(0.7deg);
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  33%, 39%, 63% {
    -webkit-transform: rotate(-0.7deg);
    -ms-transform: rotate(-0.7deg);
    transform: rotate(-0.7deg);
  }
  42%, 48%, 66%, 72% {
    -webkit-transform: rotate(0.2deg);
    -ms-transform: rotate(0.2deg);
    transform: rotate(0.2deg);
  }
  45%, 51%, 69% {
    -webkit-transform: rotate(-0.2deg);
    -ms-transform: rotate(-0.2deg);
    transform: rotate(-0.2deg);
  }
  52%, 75% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
@-moz-keyframes flip-front {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  54% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  58% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-moz-keyframes flip-back {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  54% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  58% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@-ms-keyframes allmoves {
  0%, 100% {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate(0, -1000px);
    -ms-transform: translate(0, -1000px);
    transform: translate(0, -1000px);
  }
  5% {
    -webkit-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  4%, 53%, 95%, 96% {
    -webkit-transform: translate(0, -18px);
    -ms-transform: translate(0, -18px);
    transform: translate(0, -18px);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  98% {
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
  6%, 12% {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  9%, 15% {
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  18%, 24% {
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  21%, 27%, 57% {
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  30%, 36%, 60% {
    -webkit-transform: rotate(0.7deg);
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  33%, 39%, 63% {
    -webkit-transform: rotate(-0.7deg);
    -ms-transform: rotate(-0.7deg);
    transform: rotate(-0.7deg);
  }
  42%, 48%, 66%, 72% {
    -webkit-transform: rotate(0.2deg);
    -ms-transform: rotate(0.2deg);
    transform: rotate(0.2deg);
  }
  45%, 51%, 69% {
    -webkit-transform: rotate(-0.2deg);
    -ms-transform: rotate(-0.2deg);
    transform: rotate(-0.2deg);
  }
  52%, 75% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
@-ms-keyframes flip-front {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  54% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  58% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@-ms-keyframes flip-back {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  54% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  58% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}
@keyframes allmoves {
  0%, 100% {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transform: translate(0, -1000px);
    -ms-transform: translate(0, -1000px);
    transform: translate(0, -1000px);
  }
  5% {
    -webkit-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  4%, 53%, 95%, 96% {
    -webkit-transform: translate(0, -18px);
    -ms-transform: translate(0, -18px);
    transform: translate(0, -18px);
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
  98% {
    -webkit-transform: translate(0, 20px);
    -ms-transform: translate(0, 20px);
    transform: translate(0, 20px);
  }
  6%, 12% {
    -webkit-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    transform: rotate(3deg);
  }
  9%, 15% {
    -webkit-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
  }
  18%, 24% {
    -webkit-transform: rotate(2deg);
    -ms-transform: rotate(2deg);
    transform: rotate(2deg);
  }
  21%, 27%, 57% {
    -webkit-transform: rotate(-2deg);
    -ms-transform: rotate(-2deg);
    transform: rotate(-2deg);
  }
  30%, 36%, 60% {
    -webkit-transform: rotate(0.7deg);
    -ms-transform: rotate(0.7deg);
    transform: rotate(0.7deg);
  }
  33%, 39%, 63% {
    -webkit-transform: rotate(-0.7deg);
    -ms-transform: rotate(-0.7deg);
    transform: rotate(-0.7deg);
  }
  42%, 48%, 66%, 72% {
    -webkit-transform: rotate(0.2deg);
    -ms-transform: rotate(0.2deg);
    transform: rotate(0.2deg);
  }
  45%, 51%, 69% {
    -webkit-transform: rotate(-0.2deg);
    -ms-transform: rotate(-0.2deg);
    transform: rotate(-0.2deg);
  }
  52%, 75% {
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    transform: rotate(0);
  }
}
@keyframes flip-front {
  0% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  54% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  58% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
}
@keyframes flip-back {
  0% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  54% {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  58% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(0);
    transform: rotateY(0);
  }
}

/* entire container, keeps perspective */
.flip-container {
  zoom: 1;
  filter: alpha(opacity=0);
  opacity: 0;
  margin-top: -30px;
  margin-right: auto;
  margin-left: auto;
  -webkit-perspective: 1000;
  -moz-transform: perspective(1000px);
  perspective: 1000;
  -moz-transform-style: preserve-3d;
  -webkit-animation: allmoves 10s ease-in-out 5s infinite normal;
  -moz-animation: allmoves 10s ease-in-out 5s infinite normal;
  -ms-animation: allmoves 10s ease-in-out 5s infinite normal;
  -o-animation: allmoves 10s ease-in-out 5s infinite normal;
  animation: allmoves 10s ease-in-out 5s infinite normal;
  -webkit-transform-origin: 50% -80px 0;
  -ms-transform-origin: 50% -80px 0;
  transform-origin: 50% -80px 0;
}

.flip-container .flipper .front, .flip-container.hover .flipper .front {
  -webkit-animation: flip-front 10s ease-in-out 5s infinite normal;
  -moz-animation: flip-front 10s ease-in-out 5s infinite normal;
  -ms-animation: flip-front 10s ease-in-out 5s infinite normal;
  -o-animation: flip-front 10s ease-in-out 5s infinite normal;
  animation: flip-front 10s ease-in-out 5s infinite normal;
}

.flip-container .flipper .back, .flip-container.hover .flipper .back {
  -webkit-animation: flip-back 10s ease-in-out 5s infinite normal;
  -moz-animation: flip-back 10s ease-in-out 5s infinite normal;
  -ms-animation: flip-back 10s ease-in-out 5s infinite normal;
  -o-animation: flip-back 10s ease-in-out 5s infinite normal;
  animation: flip-back 10s ease-in-out 5s infinite normal;
}

.flip-container, .front, .back {
  width: 250px;/*Chiều rộng của ảnh*/
  height: 450px;/*Chiều cao của ảnh*/
}

/* flip speed goes here */
.flipper {
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
}

/* hide back of pane during swap */
.front, .back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

/* front pane, placed above back */
.front {
  z-index: 2;
}

/* back, initially hidden pane */
.back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.shadowed {
  -webkit-filter: drop-shadow(6px 9px 4px rgba(0, 0, 0, 0.5));
  filter: url(#drop-shadow);
  -ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=9, Color='rgba(0, 0, 0, 0.5)')";
  filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=9, Color='rgba(0, 0, 0, 0.5)')";
}
</style>
<div class="flip-container">
<div class="flipper">
<div class="front">
<img class="shadowed" src="http://4.bp.blogspot.com/-JCpOItkOJe0/VXRR3hLNaZI/AAAAAAAACKs/RErtNM-s-qI/s1600/animation-1.png" alt="gif" />
</div>
<div class="back">
<img class="shadowed" src="http://1.bp.blogspot.com/-42WvIJkcubE/VXRR3EnuQ1I/AAAAAAAACKo/TOakkuGe06k/s1600/animation-2.png" alt="gif" />
</div>
</div>
</div>
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji