远方的海
远方的海,WordPress,免费
2014 Sep 27 23 : 10

非常酷炫的CSS3动画特效代码

您当前的位置: 首页 > 建站资源 > 前端 > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

没想到这么厉害的功能可以仅仅通过CSS完成,我是昨天无意间找到这个网站的,于是在远方的海首页加上了一些简单的动画效果。也是看脸的时代,除了内容也要点特效!

CSS3特效集合

首先打开这个页面,Tympanus自己可以慢慢欣赏,实在是太厉害了,以后有时间我也来琢磨琢磨这个。

这些效果不必全盘扒下来:

比如我只需要某个效果里面图形的变化,我们就可以查看imgimg:hover的特效。

不多说了,快去看看吧!

几个简单的效果

这里也给大家展示几个简单的效果的CSS代码:

  • 鼠标移入,360°自旋转
  • 鼠标移入振动

首先是第一个,鼠标移入旋转:

如果你需要让这个元素变成圆形的,转起来好看点,就加上,不需要就可以不加2-7行;下面代码设置动画时间:

  1. #id .class element{
  2.     border-radius: 50%;/*设置圆角效果*/
  3.     -webkit-border-radius: 50%;/*圆角效果:兼容webkit浏览器*/
  4.     -moz-border-radius:50%;
  5.     box-shadow: inset 0 –1px 0 #3333sf;/*设置图像阴影效果*/
  6.     -webkit-box-shadow: inset 0 –1px 0 #3333sf;
  7.     -webkit-transition: 0.4s;        //变化时间设置为0.4秒
  8.     -webkit-transition: -webkit-transform 0.4s ease-out;
  9.     transition: transform 0.4s ease-out;
  10.     -moz-transition: -moz-transform 0.4s ease-out;
  11. }

鼠标移入自然是:hover属性:加上以下就可以选择了!

  1. #id .class element:hover{
  2.     box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  3.     -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1);
  4.     transform: rotateZ(360deg);/*图像旋转360度*/
  5.     -webkit-transform: rotateZ(360deg);
  6.     -moz-transform: rotateZ(360deg);
  7. }

 第二个特效,移动振动:

DEMO如本站首页的二维码。直接上代码,不多做说明了:

  1. #id .class element{
  2. -webkit-transform:translateZ(0);
  3. -ms-transform:translateZ(0);
  4. transform:translateZ(0);
  5. box-shadow:0 0 1px rgba(0, 0, 0, 0);
  6. }
  1. #id .class element:hover{
  2. -webkit-animation-name:buzz;
  3. animation-name:buzz;
  4. -webkit-animation-duration:.15s;
  5. animation-duration:.15s;
  6. -webkit-animation-timing-function:linear;
  7. animation-timing-function:linear;
  8. -webkit-animation-iteration-count:infinite;
  9. animation-iteration-count:infinite;
  10. }
  11. @-webkit-keyframes buzz
  12. {50%{
  13. -webkit-transform:translateX(3px)
  14. rotate(2deg);transform:translateX(3px)
  15. rotate(2deg);
  16. }
  17. 100% {
  18. -webkit-transform:translateX(-3px)
  19. rotate(-2deg);
  20. transform:translateX(-3px)
  21. rotate(-2deg);}
  22. }
  23. @keyframes buzz {50%
  24. {–ms-transform:translateX(3px)
  25. rotate(2deg);
  26. }
  27. 100% {
  28. -webkit-transform:translateX(-3px) rotate(-2deg);
  29. -ms-transform:translateX(-3px) rotate(-2deg);
  30. transform:translateX(-3px) rotate(-2deg);}
  31. }

以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:前端 建站资源

您可能也会喜欢

发表回复

Post Comment


  1. 屌丝日记 :

    不错 用代码做个特效

    2014-10-9
  2. 超級efly :

    前來支持一下~效果挺不錯的!

    2014-10-2