css3 transition 实例及分析 图片hover出现文字 sidebar平滑过渡(动画系列3)

一、
 


    CSS3 transition-property属性
    


    

 


    CSS3 transition-property属性
    


    


这两者的区别是一个transition写在了div里,一个写在了div:hover里,这两者的区别是,第1个是鼠标移上去,移开都有过渡效果;第2个只有鼠标移上去有过渡效果,鼠标移开时没有过渡,而是直接变化,所以一般transition是写在元素中,而不是元素的伪类里。二、

"http://www.w3.org/1999/xhtml" >
     CSS</code> <code class="css value" style="border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; min-height:auto!important; color:blue!important; background:none!important">3</code> <code class="css plain" style="border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; min-height:auto!important; color:black!important; background:none!important">实现鼠标移上去显示全部内容
    
    
"container" >这里事实上height元素的高并没有过渡,而是直接变化,应该是div里并没有设置高度,事实上在div里加了height后,height也平滑过渡了

这里事实上height元素的高并没有过渡,而是直接变化,应该是div里并没有设置高度,事实上在div里加了height后,height也平滑过渡了

 
  

三、

"http://www.w3.org/1999/xhtml" >
     CSS</code> <code class="css value" style="border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; min-height:auto!important; color:blue!important; background:none!important">3</code> <code class="css plain" style="border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; min-height:auto!important; color:black!important; background:none!important">过渡
    
    

这个例子是把方形渐变成了圆形,当鼠标移动到div元素上面时,div元素圆角半径在0.5秒内从0过渡到50px

四、

"http://www.w3.org/1999/xhtml" >
     CSS</code> <code class="css value" style="border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; min-height:auto!important; color:blue!important; background:none!important">3</code> <code class="css plain" style="border:0px!important; bottom:auto!important; float:none!important; height:auto!important; left:auto!important; line-height:1.1em!important; margin:0px!important; outline:0px!important; overflow:visible!important; padding:0px!important; position:static!important; right:auto!important; top:auto!important; vertical-align:baseline!important; width:auto!important; font-family:Consolas,'Bitstream Vera Sans Mono','Courier New',Courier,monospace!important; font-size:1em!important; min-height:auto!important; color:black!important; background:none!important">实现图片文字介绍滑动展示效果
    
    
"info" >
        
"wrap" >
             "#" alt= "" >
            

                 Red Eye Frog
                 昨夜一梦,你经过这里,情境忽明忽暗,我从你的怀抱里挣脱,没有抽出一点点丝来。我向桑叶靠拢,把一片春光拢在怀里,滚圆的身躯,坐卧在春天的一个角落,待阳光慢慢靠近,在一段柔波里,细细地浣纱。梦里,我唤你亲,一层一层地剥开,一片一片地浸润,感知你内心的独白
            

        
        
"wrap" >
             "#" alt= "" >
            

                 Emperor Penguin
                 你未曾给过我抵达你心底的机会,即使我再奋不顾身的追逐,也无法跃进你的世界。不是蝴蝶飞不过沧海,而是沧海的那端,从未有过等待。我在凌氏基层实习初次遇见凌玺御,他当时身着浅蓝牛仔裤纯白T恤神色淡然的从我身边擦肩而过时,我那么清晰的感受到了
            

        
        
"wrap" >
             "#" alt= "" >
            

                 Pelicans
                 阳光斑驳了影子在天空中我用手指描绘你的名字海棠树下花落肩头数不清缠绵的记忆且不说忘川河畔千百世为你独开的彼岸亦不说奈何桥边日夜空守你不变的容颜恍惚、迷离~流年在我指尖绕成红线在云霞的彼端折一只千纸鹤放在风中放掉我的过去还有那绿荫下白衣少年
            

        
    
这是图片文字介绍滑动效果,它的原理是

top为300px,里的文字介绍就会看不到;然后

.wrap:hover p {top:0;},文字介绍就会出现了,这里成功的关键就是position,overflow用的好。过程用了过渡。

五、



    CSS3实现图片文字介绍滑动展示效果
    


	

Red Eye Frog

Emperor Penguin

Pelicans


模仿了第五个

六、



  




请把鼠标指针放到黄色的 div 元素上,来查看过渡效果。

这是transform的变化引起的好玩的效果,文字从无到有,从左边缘滑到图片上,很不错的效果。

七、图片的由灰色变成彩色




	
	Document



	
用到了滤镜filter,改变其灰度值

八、sidebar




	
	Document



	
这是sidebar平滑过渡效果,他们的状态改变不是用伪类hover,而是使用了js事件改变宽度,值得学习

你可能感兴趣的:(前端CSS3,JS)