Code hiệu ứng rung ảnh, xoay ảnh và phóng to ảnh mỗi khi rê chuột vào

1. Code css hiệu ứng ảnh rung động khi rê chuột vào. Chỉ bằng việc sử dụng css3 với các thuộc tính 3D Transforms và Transitions là chúng ta có thể tạo được một mã css cực hay. CSS viết:

<style type="text/css">

@-webkit-keyframes spaceboots {

0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }

10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }

20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }

30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }

40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }

50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }

60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }

70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }

80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }

90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }

100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }

}

img{-webkit-filter:grayscale(0);display:inline-block;-webkit-transition:all .7s ease-in-out;-moz-transition:all .7s ease-in-out;-o-transition:all .7s ease-in-out;-ms-transition:all .7s ease-in-out;transition:all .7s ease-in-out;}img:hover{-webkit-filter:grayscale(0);}img:hover,img:focus{-webkit-animation-name:spaceboots;-webkit-animation-duration:.8s;-webkit-transform-origin:50% 50%;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;}

</style>

HTML viết:

<div class="img" align="center"><img src="/phannhan/photo/demo.jpg" alt="Demo" width="360" height="240"/></div>

2. Code hiệu ứng phóng to hình ảnh x1.1 ảnh gốc, có bo tròn góc và độ bóng.

<style type="text/css">.photo img{ border-radius: 10px; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; opacity: 0.7; } .photo img:hover{ -webkit-transform:scale(1.1); -moz-transform:scale(1.1); -o-transform:scale(1.1); box-shadow:0px 0px 30px gray; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; border-radius: 8px; opacity: 1; }</style>

Dùng cập thẻ này đặt ở nơi muốn hiển thị.

<div class="photo" align="center"><img src="/phannhan/photo/demo.jpg" alt="Demo" width="360" height="240"/>

3. Code hiệu ứng phóng to hình ảnh lên 500px, có bo tròn góc và độ bóng.

<style type="text/css">.zoom img{ border-radius: 10px; width: 300px; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; opacity: 0.7; margin: 0 10px 5px 0; } .zoom img:hover{ box-shadow:0px 0px 30px gray; width: 500px; -webkit-box-shadow:0px 0px 30px gray; -moz-box-shadow:0px 0px 30px gray; border-radius: 8px; opacity: 1; }</style>

Dùng cập thẻ này đặt ở nơi muốn hiển thị.

<div class="zoom" align="center"><img src="/phannhan/photo/demo.jpg" alt="Demo" width="360" height="240"/>

4. Code hiệu ứng xoay hình ảnh nhưng không thay đổi kích thước, có bo tròn góc và độ bóng.

<style type="text/css">#rotate { border-radius: 10px; transition: all 5s ease; -webkit-transition: all 5s ease; -moz-transition: all 5s ease; transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); width: 300px; } #rotate:hover { box-shadow: 0px 0px 30px gray; -moz-box-shadow: 0px 0px 30px gray; -webkit-box-shadow: 0px 0px 30px gray; border-radius: 8px; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); position: relative; width: 300px; }</style>

Dùng cập thẻ này đặt ở nơi muốn hiển thị.

<img id="rotate" src="/phannhan/photo/demo.jpg" alt="Demo" width="360" height="240"/></div>

5. Code hiệu ứng xoay và phóng to hình ảnh lên 500px, có bo tròn góc và độ bóng.

<style type="text/css">#rotatezoom { border-radius: 10px; transition: all 5s ease; -webkit-transition: all 5s ease; -moz-transition: all 5s ease; transition-delay: 1s; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); width: 300px; } #rotatezoom:hover { box-shadow: 0px 0px 30px gray; -moz-box-shadow: 0px 0px 30px gray; -webkit-box-shadow: 0px 0px 30px gray; border-radius: 8px; transition: all 1s ease; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); position: relative; width: 500px; }</style>

Dùng cập thẻ này đặt ở nơi muốn hiển thị.

<img id="rotatezoom" src="/phannhan/photo/demo.jpg" alt="Demo" width="360" height="240"/></div>