CSS3 - Hiệu ứng biểu tượng quay tròn khi rê chuột vào bằng css3

11:37

csscss stylecss3

Với CSS3 website của bạn sẽ trở lên lung linh, sinh động mà không cần đến sự trợ giúp của code javascript có thể làm website thêm chậm chạm khi phải load file javascript. Đoạn css đơn giản ở dưới sẽ giúp cho các biểu tượng như facebook, twitter, google plus... trên website của bạn trở lên thú vị khi rê chuột vào các biểu tượng đó

Code style css css3:

01

<style>

02	.share-icon{

03

}

04	.share-icon a{

05	background:url(../images/share-icon.png) no-repeat;

06	display:inline-block;

07	height:32px;

08	width:32px;

09	margin-left:13px;

10

}

11	.share-icon a.facebook{

12	background-position:0 0;

13	margin-left:0;

14

}

15	.share-icon a.twitter{

16	background-position:-50px 0;

17

}

18	.share-icon a.google{

19	background-position:-100px 0;

20

}

21	.share-icon a:hover{

22	-webkit-animation: spinX 0.5s;

23	-moz-animation: spinX 0.5s;

24	animation: spinX 0.5s;

25

}

26	@-moz-keyframes spinX{ 0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);} 100% { -moz-transform: rotate(360deg); } }

27	@-webkit-keyframes spinX{ 0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg); } }

28	@keyframes spinX{ 0% {transform: rotate(0deg);-webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

29

</style>

Code html:

view sourceprint?

1	<div class="share-icon">

2	<a href="link_facebook" class="facebook"></a>

3	<a href="link_twitter" class="twitter"></a>

4	<a href="link_googleplus" class="google"></a>

5

</div>

Bạn đang đọc bài viết CSS3 - Hiệu ứng biểu tượng quay tròn khi rê chuột vào bằng css3 tại Website: Học Lập Trình

• Tweet
• Share
• Share
• Share
• Share