һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+

[CSS] CSS3ʵhoverͼƬϸЧ

[]
45433 happy175 2016-7-4 20:27:12
| ʾȫ¥
1F

ϵ½עᣬύѣø๦ܣϴزIJޣ

Ҫ ¼ ſػ鿴ûʺţע  

x
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width,initial-scale=1" />
  6.   <title>CSS3ʵhoverͼƬϸЧ</title>
  7.   <style>
  8.   .bg-color {
  9.     position: relative;
  10.     display: block;
  11.     width: 300px;
  12.   }
  13.   
  14.   .bg-color>a {
  15.     position: relative;
  16.     display: inline-block;
  17.     text-decoration: none;
  18.     padding: 15px;
  19.     color: rgba(0,0,0,0.8);
  20.     text-align: center;
  21.   }
  22.   
  23.   .bg-color>a::after {
  24.     content: "";
  25.     position: absolute;
  26.     display: inline-block;
  27.     left: 100%;
  28.     right: 100%;
  29.     bottom: 0px;
  30.     height: 0px;
  31.     background-color: #ccc;
  32.     margin: 0 -100%;
  33.     z-index: -1;
  34.     -webkit-transition: all .2s ease-out;
  35.     -moz-transition: all .2s ease-out;
  36.     -o-transition: all .2s ease-out;
  37.     -ms-transition: all .2s ease-out;
  38.     transition: all .2s ease-out;
  39.   }
  40.   .bg-color>a:hover {
  41.     color: rgba(255,255,255,1);
  42.     -webkit-transition: all .5s ease-out;
  43.     -moz-transition: all .5s ease-out;
  44.     -o-transition: all .5s ease-out;
  45.     -ms-transition: all .5s ease-out;
  46.     transition: all .5s ease-out;
  47.   }
  48.   .bg-color>a:hover::after {
  49.     height: 100%;
  50.     opacity: 0.5;
  51.     background-color: rgb(0,174,79);
  52.     -webkit-transition: all .5s ease-out;
  53.     -moz-transition: all .5s ease-out;
  54.     -o-transition: all .5s ease-out;
  55.     -ms-transition: all .5s ease-out;
  56.     transition: all .5s ease-out;
  57.   }
  58.   </style>
  59. </head>

  60. <body>
  61.   <div class="bg-color">
  62.     <a href="#">CSS3 ʵֱͼƬϻ</a>
  63.   </div>
  64. </body>

  65. </html>
ƴ

רƼ:

Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ
fhuj3d96 2017-1-11 02:37:23
| ʾȫ¥
3F
лл¥Ĺ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
fhuj3d96 2017-1-11 09:09:29
| ʾȫ¥
4F
dzŶԲ
Դ΢http://weibo.com/techued Դ΢Źںţweb-tech
ʹõ ٱ ظ ֧
б

ֹ

²

̳¡ͼƬѷϴվԭתԻ,µİȨԭ
վַİȨ֪ͨǵĹԱ,Ա(Email:admin@websjy.com)ʱȡȨɾ
ܾκκʽڱ̳л񹲺͹ִ!

QQ| 42011102000510|Archiver|ֻ|Դ ( ICP14013341-1

GMT+8, 2018-7-23 00:22

Powered by Discuz! X3.2

ԴԴվ  ԴAPPӦ֮

ٻظ ض б