您的位置：首页 > Web前端 > CSS

css3新增属性设置图片特效

2016-07-08 19:22 676 查看
在这里主要用到了css3的选择器，还有transform属性，其中有平移，旋转，还有延时操作。<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">#content{width: 100%; height: auto;}.box{width: 32%; height: 300px;float: left;margin: 3px; border: 1px solid hotpink; position: relative; overflow: hidden;}.box img{position: absolute;transition: all 1s; left: 0px;top: 0;opacity: 1;}.one h2{transition: all 1s; position: absolute; left: 50px;top: 150px;color: white;font-weight: bolder;}.one:hover h2{transform: translate(0,-20px); }.one:hover img{ transform: translateX(-20px);opacity: 0.5;}.tow h2{transition: all 1s;position: absolute;}.tow .pOne{left: -130px;top: 130px; font-weight: bolder;color:white;}.tow .pTwo{left: -130px;top: 160px; font-weight: bolder;color: white;}.tow .pThree{left: -130px;top: 190px; font-weight: bolder;color: white;}.tow:hover img{ transform: translateX(-20px);opacity: 0.5;}.tow:hover .pOne{ transform: translateX(240px);transition-delay: 0.3s;}.tow:hover .pTwo{ transform: translateX(240px); transition-delay: 0.7s;}.tow:hover .pThree{ transform: translateX(240px);transition-delay: 1s;}.three:hover img{ transform: translateX(-20px);opacity: 0.5;}.three div{width: 100%; height: 50px; background: white;position: absolute;left: 0;bottom: -50px; transition: all 1s; }.three:hover div{transform: translateY(-50px);}.four:hover img{ transform: translateX(-20px);opacity: 0.5;}.four div{width: 130%; height: 100px; background: white; position: absolute;left: 0; bottom: -100px;transition: all 1s;}.four p{position: absolute;left: 250px; bottom: -30px;transition: all 1s;color: black; z-index: 2;font-weight: bolder}.four:hover div{transform-origin:0 0; transform: rotate(-15deg);}.four:hover p{transform: translateY(-50px);transition-delay: 0.3s;}.frive:hover img{ transform: translateX(-20px);opacity: 0.5;}.frive div{transition: all 0.5s; width: 200px;height: 200px;border: 1px solid black;position: absolute;left: 0;top: -210px;}.frive:hover div{transform: translate(50%,260px) rotate(720deg); }.six h2{position: absolute;left: 100px; top: 100px; transform: skew(90deg); transition: all 0.5s;}.six:hover img{ transform: translateX(-20px);opacity: 0.5;}.six:hover h2{transform: skew(0deg);}.seven:hover img{ transform: translateX(-20px);opacity: 0.5; transform: scale(1); transition: all 1s ;}.seven div{transition: all 1s ; transform: scale(1.2); position: absolute;left: 100px;top: 50px; border: 1px solid black;width: 200px; height: 200px;}.seven h2{transform: scale(1.2);transition: all 1s ;}.seven:hover h2{transform: scale(1);}.seven:hover div{transform: scale(1);}.seven img{transform: scale(1.2);}.eight:hover img{ transform: translateX(-20px);opacity: 0.5;}.eight .eightOne{ position: absolute;left: 55px;top: 50px; border-top: 1px solid white;width: 270px; height: 180px; border-bottom: 1px solid white;}.eight .eightTwo{ position: absolute;left: 100px;top: 20px; width: 180px; height: 250px; border-left: 1px solid white; border-right: 1px solid white;}</style></head><body><div id="content"><div class="box one"><img src="img/img1.jpg"/><h2>sdfujichao</h2></div><div class="box tow"><img src="img/img2.jpg"/><h2 class="pOne">sdfujichao</h2><h2 class="pTwo">sdfujichao</h2><h2 class="pThree">sdfujichao</h2></div><div class="box three"><img src="img/img3.jpg"/><div>的是否更多个人的个人sdafdsfds第三方的反倒是反倒是反倒是发的个个人Greg如果个热个人股份热风让我</div></div><div class="box four"><img src="img/img4.jpg"/><p>sdfujichao</p><div></div></div><div class="box frive"><img src="img/img5.jpg"/><div></div></div><div class="box six"><img src="img/img5.jpg"/><h2>sdfujichao</h2></div><div class="box seven"><img src="img/img5.jpg"/><h2>sdfujichao</h2><div></div></div><div class="box eight"><img src="img/img5.jpg"/><div class="eightOne"></div><div class="eightTwo"></div></div></div></body></html>
运行结果截图
<img src="https://img-blog.csdn.net/20160708192046464?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航