那些不错的 [ Html5 + CSS3 + Canvas ] 效果！

apng制作工具：http://isparta.github.io/how.html

apng制作文章：http://isux.tencent.com/introduction-of-apng.html   GIF 和 Apng ,apng-canvas

 

Css3  模拟支付宝AA收款动画 [摘抄]

demo地址：http://www.imengwang.net/css3d/css3-wave.html

 

 1 
 2 
 3     
 4     
54 
55 
56   
class="circle">
57      
class="circle1"> 
58      
class="circle2"> 
59      
class="circle3"> 
60      
class="center">AA
61   
62 
63 

View Code

 

模糊，毛玻璃效果 （Css3 Filter）:

地址：http://www.w3cplus.com/css3/ten-effects-with-css3-filter

#player {-webkit-filter: blur(3px);-moz-filter: blur(3px);-ms-filter: blur(3px);-o-filter: blur(3px);}

 

图片自动360旋转效果：

.img { animation: 10s linear 0s normal none infinite rotate; animation-play-state: running; }　　

 

 

图片,平滑的转动360度效果：

img:hover
{
    transform: rotate(360deg);
    transition: all 0.5s ease 0s;
}

　　

CSS3倒计时效果：

   
  "utf-8" />
  "author" content="" />
  "keywords" content="" />
  "description" content="" />
  
  
 
 
  

    0
  
  
 

View Code

 

闪闪的效果：

.blood {
  position: absolute;
  height: 300px;
  width: 15px;
  right: 10px;
  top: 20px;
  border-radius: 5px;
  overflow: hidden;
  background: -webkit-gradient(linear, 0% 100%, 0% 0%, from(red), color-stop(0.5, yellow), to(green));
  box-shadow: 0 0 4px #2AC3FF;
 -webkit-animation: glow2 1s infinite alternate ease-in-out;
}


     

　　

文字描边效果：

 精彩游戏

　　

Canvas 立方体 Cube 效果：

demo 地址：http://www.imengwang.net/css3d/css3-cube.html

"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
"http://www.w3.org/1999/xhtml" xml:lang="en">

    "Content-Type" content="text/html;charset=UTF-8">
    
    


    "cas" width="400" height="400">您的浏览器不支持canvas
    

View Code

 

CSS3 制作Drop-Shadows效果:

地址：http://www.cnblogs.com/Li-Cheng/p/3853227.html

"utf-8">





    
class="box">LICHENG

View Code

 

text-fill-color 文字遮罩动画效果实例:

 地址： http://www.zhangxinxu.com/study/201006/text-fill-color-mask-text-demo.html

 

 文字折叠，翻转的效果！

demo: http://xg.qq.com/xg 腾讯云推送效果

	
	
	
	  
	


	
	Hello Wolrd Cordova!
  

 

Css3 按钮效果：

class="login-submit">开始

View Code

 

 

飞的效果

    
    "utf-8">
    


    class="fa fa-paper-plane">
  

View Code

 

Css3 

 

body{
    background-color:#000;
    font-size:12px;
}
.texts {
    position:absolute;
    -webkit-animation:demo-an 2.5s ease-out infinite;
    border-radius:.4em;
    color:#eee;
    font:bold 4em/normal \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;
    text-align:center;
    margin-left:48px;
    width:12em;
    zoom:1
}
.demo{
    -webkit-animation:demo-an 2.5s ease-out infinite;
    border-radius:.4em;
    color:#fff;
    font:bold 4em/normal \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;
    margin:1em;
    -webkit-mask:-webkit-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 20%) -500px 0 no-repeat content;
    text-align:center;
    text-shadow:1px 1px 0 #ccc;
    width:12em;
}
@-webkit-keyframes demo-an{
    to{ -webkit-mask-position:500px 0; }
}

class="texts">测试效果
class="demo">测试效果

 

2:

body{
    background-color:#000;
    font-size:12px;
}

.demo{
    -webkit-animation:demo-an 2.5s ease-out infinite;
    border-radius:.4em;
    color:#fff;
    font:bold 4em/normal \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;
    margin:1em;
    -webkit-mask:-webkit-linear-gradient(left,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,0) 20%) -500px 0 no-repeat content;
    text-align:center;
    text-shadow:1px 1px 0 #ccc;
    width:12em;
}
@-webkit-keyframes demo-an{
    to{ -webkit-mask-position:500px 0; }
}

 
class="demo">原来我的真身是一把名刀

 

http://ued.ctrip.com/blog/wp-content/webkitcss/index.html

http://www.w3cplus.com/sites/default/files/blogs/2013/1311/CubeInformation/index.html

http://ecd.tencent.com/css3/html/animation/transform-style.html#

http://www.html5tricks.com/demo/html5-circle-music-player/index.html#seek

 

卡片式翻转效果：

http://www.webhek.com/css-flip/

超链接特效：

http://www.webhek.com/misc/link-style/

图片展台3D效果：

http://www.webhek.com/misc/3d-album/

 

携程UED:

http://ued.ctrip.com/blog/wp-content/webkitcss/prop/flex.html

转载于:https://www.cnblogs.com/Kummy/p/3584324.html