- <!DOCTYPE html>
- <html>
- <head>
- <title>css3典型动画集合</title>
- <meta charset="utf-8">
- <style type="text/css">
- html,body{margin:0px;padding:0px;}
- .wrap{width:600px;margin:0 auto;}
- .div-css3{width:150px;height:100px;border:1px solid #333;position:relative;margin:10px;float:left;background: #333;overflow:hidden;}
- .p-text{
- position:absolute;
- width:150px;
- height:100px;
- text-align: center;
- line-height:100px;
- z-index:3;
- color:white;
- font-weight:700;
- font-size:15px;
- letter-spacing:1px;
- text-transform:uppercase;
- font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
- }
- /*边框动画1*/
- .top,.bottom{
- height:1px;
- width:0px;
- background: yellow;
- position:absolute;
- transition:width 0.4s;
- -moz-transition:width 0.4s;
- -webkit-transition:width 0.4s;
- -o-transition:width 0.4s;
- }
- .right,.left{
- height:0px;
- width:1px;
- background: yellow;
- position:absolute;
- transition:height 0.4s;
- -moz-transition:height 0.4s;
- -webkit-transition:height 0.4s;
- -o-transition:height 0.4s;
- }
- .top{top:0px;left:0px;}
- .right{right:0px;top:0px;}
- .bottom{bottom:0px;right:0px;}
- .left{left:0px;bottom:0px;}
- #first:hover .top,#first:hover .bottom{
- width:150px;
- }
- #first:hover .left,#first:hover .right{
- height:100px;
- }
- /*边框动画2*/
- .second-top,.second-bottom{
- height:1px;
- background: yellow;
- width:140px;
- position:absolute;
- transform:scaleX(0);
- -moz-transform:scaleX(0);
- -ms-transform:scaleX(0);
- -webkit-transform:scaleX(0);
- transition:all 0.4s ease;
- -moz-transition:all 0.4s ease;
- -webkit-transition:all 0.4s ease;
- -o-transition:all 0.4s ease;
- }
- .second-top{top:30px;left:5px;}
- .second-bottom{bottom:30px;left:5px;}
- .second-left,.second-right{
- width:1px;
- height:70px;
- background: yellow;
- position:absolute;
- transform:scaleY(0);
- -moz-transform:scaleY(0);
- -ms-transform:scaleY(0);
- -webkit-transform:scaleY(0);
- transition:all 0.4s ease;
- -moz-transition:all 0.4s ease;
- -webkit-transition:all 0.4s ease;
- -o-transition:all 0.4s ease;
- }
- .second-left{left:20px;top:15px;}
- .second-right{right:20px;top:15px;}
- #second:hover .second-top,#second:hover .second-bottom{
- transform:scaleX(1);
- -moz-transform:scaleX(1);
- -ms-transform:scaleX(1);
- -webkit-transform:scaleX(1);
- }
- #second:hover .second-left,#second:hover .second-right{
- transform:scaleY(1);
- -moz-transform:scaleY(1);
- -ms-transform:scaleY(1);
- -webkit-transform:scaleY(1);
- }
- /*边框动画3*/
- .third-top,.third-bottom{
- height:1px;
- background: yellow;
- width:140px;
- position:absolute;
- transition:all 0.4s ease;
- -moz-transition:all 0.4s ease;
- -webkit-transition:all 0.4s ease;
- -o-transition:all 0.4s ease;
- }
- .third-top{
- top:30px;
- left:5px;
- transform:translateX(-150px);
- -moz-transform:translateX(-150px);
- -ms-transform:translateX(-150px);
- -webkit-transform:translateX(-150px);
- }
- .third-bottom{
- bottom:30px;left:5px;
- transform:translateX(300px);
- -moz-transform:translateX(300px);
- -ms-transform:translateX(300px);
- -webkit-transform:translateX(300px);
- }
- .third-left,.third-right{
- width:1px;
- height:70px;
- background: yellow;
- position:absolute;
- transition:all 0.4s ease;
- -moz-transition:all 0.4s ease;
- -webkit-transition:all 0.4s ease;
- -o-transition:all 0.4s ease;
- }
- .third-right{
- right:20px;
- top:15px;
- transform:translateY(-100px);
- -moz-transform:translateY(-100px);
- -ms-transform:translateY(-100px);
- -webkit-transform:translateY(-100px);
- }
- .third-left{
- left:20px;
- top:15px;
- transform:translateY(200px);
- -moz-transform:translateY(200px);
- -ms-transform:translateY(200px);
- -webkit-transform:translateY(200px);
- }
- #third:hover .third-top,#third:hover .third-bottom{
- transform:translateX(0px);
- }
- #third:hover .third-right,#third:hover .third-left{
- transform:translateY(0px);
- }
- /*遮罩动画4*/
- .masker{position:absolute;background: rgba(240,255,3,0.8);transition:all 0.4s ease;-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;}
- .fourth-masker{
- width:200px;
- height:200px;
- margin-left:-100px;
- margin-top:-100px;
- top:50%;left:50%;
- border-radius:50%;
- box-shadow:0 0 20px #ddd;
- transform:scale(0);
- -webkit-transform:scale(0);
- -moz-transform:scale(0);
- -ms-transform:scale(0);
- }
- #fourth:hover .masker{
- transform:scale(1);
- -webkit-transform:scale(1);
- -moz-transform:scale(1);
- -ms-transform:scale(1);
- }
- /*遮罩动画5*/
- .fifth-masker{
- width:200px;
- height:200px;
- margin-left:-100px;
- margin-top:-100px;
- top:50%;left:50%;
- transform:scale(0);
- -webkit-transform:scale(0);
- -moz-transform:scale(0);
- -ms-transform:scale(0);
- }
- #fifth:hover .masker{
- transform:scale(1);
- -webkit-transform:scale(1);
- -moz-transform:scale(1);
- -ms-transform:scale(1);
- }
- /*遮罩动画6*/
- .sixth-masker{
- width:0px;
- height:200px;
- }
- #sixth:hover .masker{
- width:150px;
- }
- /*遮罩动画7*/
- .seventh-masker{
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: #333;
- border-radius: 50%;
- transform: scale(2);
- -webkit-transform: scale(2);
- -moz-transform: scale(2);
- -ms-transform: scale(2);
- transition:all 0.4s ease;
- -moz-transition:all 0.4s ease;
- -ms-transition:all 0.4s ease;
- }
- #seventh:hover .masker{
- transform: scale(0);
- -webkit-transform: scale(0);
- -moz-transform: scale(0);
- -ms-transform: scale(0);
- }
- /*遮罩动画8*/
- .eighth-masker{
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: #333;
- transform: scale(2);
- -webkit-transform: scale(2);
- -moz-transform: scale(2);
- -ms-transform: scale(2);
- transition:all 0.4s ease;
- -moz-transition:all 0.4s ease;
- -ms-transition:all 0.4s ease;
- }
- #eighth:hover .masker{
- transform: scale(0);
- -webkit-transform: scale(0);
- -moz-transform: scale(0);
- -ms-transform: scale(0);
- }
- /*遮罩动画9*/
- .ninth-masker{
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: yellow;
- transform: scaleX(0);
- transform-origin:100% 50%;
- -webkit-transform: scaleX(0);
- transition:all 0.4s ease;
- -moz-transition:all 0.4s ease;
- -ms-transition:all 0.4s ease;
- }
- #ninth:hover .masker{
- transform: scaleX(1);
- -webkit-transform: scaleX(1);
- -moz-transform: scaleX(1);
- -ms-transform: scaleX(1);
- }
- .div-css3:hover .p-text{
- color:pink;
- text-shadow:pink 0px 0px 5px;
- }
- </style>
- </head>
- <body>
- <div class="wrap">
- <!--边框划过开始-->
- <div id="first" class="div-css3">
- <div class="top"></div>
- <div class="right"></div>
- <div class="bottom"></div>
- <div class="left"></div>
- <div class="p-text">first hover</div>
- </div>
- <!--边框划过结束-->
- <!--边框划过开始-->
- <div id="second" class="div-css3">
- <div class="second-top"></div>
- <div class="second-right"></div>
- <div class="second-bottom"></div>
- <div class="second-left"></div>
- <div class="p-text">sec hover</div>
- </div>
- <!--边框划过结束-->
- <!--边框划过开始-->
- <div id="third" class="div-css3">
- <div class="third-top"></div>
- <div class="third-right"></div>
- <div class="third-bottom"></div>
- <div class="third-left"></div>
- <div class="p-text">third hover</div>
- </div>
- <!--边框划过结束-->
- <!--遮盖层滑过开始-->
- <div id="fourth" class="div-css3">
- <div class="masker fourth-masker"></div>
- <div class="p-text">fourth hover</div>
- </div>
- <!--遮盖层滑过结束-->
- <!--遮盖层滑过开始-->
- <div id="fifth" class="div-css3">
- <div class="masker fifth-masker"></div>
- <div class="p-text">fifth hover</div>
- </div>
- <!--遮盖层滑过结束-->
- <!--遮盖层滑过开始-->
- <div id="sixth" class="div-css3">
- <div class="masker sixth-masker"></div>
- <div class="p-text">sixth hover</div>
- </div>
- <!--遮盖层滑过结束-->
- <!--遮盖层滑过开始-->
- <div id="seventh" class="div-css3" style="background:yellow;">
- <div class="masker seventh-masker"></div>
- <div class="p-text">seventh hover</div>
- </div>
- <!--遮盖层滑过结束-->
- <!--遮盖层滑过开始-->
- <div id="eighth" class="div-css3" style="background:yellow;">
- <div class="masker eighth-masker"></div>
- <div class="p-text">eighth hover</div>
- </div>
- <!--遮盖层滑过结束-->
- <!--遮盖层滑过开始-->
- <div id="ninth" class="div-css3" >
- <div class="masker ninth-masker"></div>
- <div class="p-text">ninth hover</div>
- </div>
- <!--遮盖层滑过结束-->
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/notes/37199/50df9c298cdd6b6657f25d71b6409e7a.html