7 hiệu ứng CSS3 có thể thay thế javascript-effect | CodeWebDao.Com

Với các tính năng hỗ trợ các hiệu ứng chuyển động trong CSS3, giờ đây bạn có thể tự tạo các hiệu ứng chuyển động vô cùng đẹp mắt và chuyên nghiệp mà không cần dùng tới sự trợ giúp của Javascript hay jQuery vì nó là nguyên nhân ảnh hưởng đến tốc độ tải trang. Dưới đây là một số ví dụ hoàn toàn được sử dụng bằng CSS3 tạo ra những hiệu ứng rất là thú vị. 

HTML

   <h3>Effect 1: Fade Block</h3>
	<div id="fade" class="block">Vui Lòng Di Chuyển Chuột vào Để Trải Nghiệm Hiệu Hứng!</div>

	<br><br>

	<h3>Effect 2: Pulsate Block</h3>
	<div id="pulsate" class="block">Vui Lòng Di Chuyển Chuột vào Để Trải Nghiệm Hiệu Hứng!</div>

	<br><br>

	<h3>Effect 3: Nudge</h3>
	<div id="nudge" class="block">Đặt chuột vào tôi văn bản sẽ thay đổi</div>

	<br><br>

	<h3>Effect 4: Expand Block</h3>
	<div id="expand" class="block">Đặt chuột lên tôi đường viền sẽ mở rộng</div>

	<br><br>

	<h3>Effect 5: Bounce Block</h3>
	<div id="bounce" class="block">Đặt chuột lên tôi tôi sẽ nảy!</div>

	<br><br>

	<h3>Effect 6: Spin Block</h3>
	<div id="spin" class="block">Đặt chuột lên tôi tôi sẽ quay</div>

	<br><br>

	<h3>Effect 7: Accordion</h3>
	<div id="accordion" class="accordion">
		<a href="#first">Click on Tab 1</a>
		<div id="first">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
				magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. </p>
		</div>
		<a href="#second">Click on Tab 2</a>
		<div id="second">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
				magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. </p>
		</div>
		<a href="#third">Click on Tab 3</a>
		<div id="third">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
				magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
				consequat. </p>
		</div>
	</div>

CSS

    #bounce {
			width: 200px;
		}

		#pulsate {
			width: 200px;
			height: 100px;
		}

		.clear {
			clear: both;
		}

		#fade {
			opacity: 1;
			-webkit-transition: opacity 1s linear;
		}

		#fade:hover {
			opacity: 0;
		}
        
        #pulsate:hover {
			-webkit-animation-name: pulsate;
			-webkit-animation-duration: 20s;
			-webkit-animation-timing-function: ease-in-out;
		}
        
        #nudge {
			-webkit-transition-property: color, background-color, padding-left;
			-webkit-transition-duration: 500ms, 500ms, 500ms
		}

		#nudge:hover {
			background-color: #efefef;
			color: #333;
			padding-left: 50px
		}

		#expand {
			background-color: #eee;
			-webkit-transition: all 500ms linear;
			border: 10px solid black
		}

		#expand:hover {
			border: 30px solid #800
		}

		#bounce:hover {
			-webkit-animation-name: bounce;
			-webkit-animation-duration: 1s;
			-webkit-animation-iteration-count: 2;
			-webkit-animation-direction: alternate
		}
        #spin {
			-webkit-transition: -webkit-transform 3s ease-in;
		}

		#spin:hover {
			-webkit-transform: rotate(360deg)
		}

		#accordion div {
			height: 0;
			overflow: hidden;
			-webkit-transition: height 600ms ease
		}

		#accordion div:target {
			height: 110px
		}
        	@-webkit-keyframes pulsate {
			0% {
				width: 140px;
			}

			5% {
				width: 190px;
				left: -25px;
			}

			10% {
				width: 140px;
				left: 0px;
			}

			15% {
				width: 190px;
				left: -25px;
			}

			20% {
				width: 140px;
				left: 0px;
			}

			40% {
				width: 140px;
			}

			45% {
				width: 190px;
				left: -25px;
			}

			50% {
				width: 140px;
				left: 0px;
			}

			55% {
				width: 190px;
				left: -25px;
			}

			60% {
				width: 140px;
				left: 0px;
			}

			80% {
				width: 140px;
			}

			100% {
				width: 140px;
			}
		}

Demo Sản Phẩm Tham Khảo