看到一个网站介绍了很多的例子http://tympanus.net/Development/CreativeLinkEffects/
然后学着把上面的例子全部写了一下
其实都比较简单 除了3d旋转的那2个可能麻烦点
嗯 记录下这些例子,方便以后遗忘了,回头来看看咯
例子集合
测试咯 *{padding:0; margin:0; font: 18px tahoma,arial,'Hiragino Sans GB',\5b8b\4f53,sans-serif;} .wrap{width: 1000px; margin: 50px auto;} ul{list-style: none; overflow: hidden;} ul li{float: left; width: 200px; text-align: center; padding:10px; } a{color: #fff; text-decoration:none;} .mt50{ margin-top: 50px;} #demo1 {background: #435a6b; padding: 50px; } #demo1 a::before{content: "["; opacity: 0; -webkit-transform: translateX(10px); transform: translateX(10px); display: inline-block; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } #demo1 a::after{content: "]";opacity: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); display: inline-block; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } #demo1 a:hover::before{ opacity: 1; -webkit-transform: translateX(-5px); transform: translateX(-5px);-moz-transition:translateX(-5px); } #demo1 a:hover::after{ opacity: 1; -webkit-transform: translateX(5px); transform: translateX(5px);-moz-transition:translateX(5px); } #demo2 {background: #0e83cd; padding: 50px;font-size:18px;} #demo2 a {-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;line-height: 44px; display: inline-block;} #demo2 span{ position: relative; display: inline-block;padding: 0 10px;line-height:44px;background: #2195de; -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; } #demo2 span:hover{ -webkit-transform: rotateX(90deg) translateY(-12px); -moz-transform: rotateX(90deg) translateY(-12px); transform: rotateX(90deg) translateY(-12px); } #demo2 span::before{ position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #0965a0; content: attr(data-hover); line-height: 44px; -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 0 0; -moz-transform-origin: 0 0; transform-origin: 0 0; } #demo2 span:hover::before{ background: #2195de; } #demo3 {background: #f19f0f; padding: 50px;} #demo3 a{ display: inline-block; position: relative; font-size:20px; } #demo3 a::after{ position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background:#F7F7F7; opacity : 0; content: ''; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; -moz-transition: opacity 0.3s, -moz-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); } #demo3 a:hover::after{ height: 4px; opacity:0.4; -webkit-transform: translateY(2px); -moz-transform: translateY(2px); transform: translateY(2px); } #demo4 {background:#cd4436; padding: 50px;} #demo4 a{ overflow: hidden; display: inline-block; position: relative; } #demo4 a span{ position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; } #demo4 a span::after{ position: absolute; top : 100%; left: 0; font-weight:bold; content: attr(data-hover); } #demo4 a span:hover{ -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%); } #demo5{background:#ecf0f1; padding: 50px;} #demo5 a{color: #566473; display: inline-block; font-weight: bold; position: relative; padding:10px 5px;} #demo5 a::after{ height: 4px; left: 0; width: 100%; position: absolute; top:100%; background: #566473; content: ""; -webkit-transform: scale(0.90); -moz-transform: scale(0.90); transform: scale(0.90); -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; } #demo5 a::before{ height: 4px; left: 0; width: 100%; position: absolute; top:100%; background: #566473; content: ""; opacity:0; -webkit-transform: scale(0.90); -moz-transform: scale(0.90); transform: scale(0.90); -webkit-transition:opacity 0.3s,top 0.3s, -webkit-transform 0.3s; -moz-transition:opacity 0.3s,top 0.3s,-moz-transform 0.3s; transition:opacity 0.3s,top 0.3s,transform 0.3s; } #demo5 a:hover::after{ -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } #demo5 a:hover::before{ top:0%; opacity:1; -webkit-transform: scale(1); -moz-transform: scale(1); transform: scale(1); } #demo6{background:#16a085; padding: 50px; } #demo6 a{ overflow: hidden; display: inline-block; } #demo6 a span{ position: relative; display: inline-block; background: #0f7c67; color: #fff; padding: 10px 20px; -webkit-transition: -webkit-transform 0.3s; -moz-transition:-moz-transform 0.3s; transition:transform 0.3s; -webkit-transform: translateX(0); -moz-transform: translateX(0); transform: translateX(0); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #demo6 a span::before{ padding: 10px 20px; position: absolute; width: 100%; left: -100%; top:0; background:#fff; color:#0f7c67; content:attr(data-hover); box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } #demo6 a span:hover{ -webkit-transform: translateX(100%); -moz-transform: translateX(100%); transform: translateX(100%); } #demo7{ background:#0e83cd;padding: 50px; } #demo7 li{text-align: left;} #demo7 a{ overflow: hidden; display: inline-block; position: relative; color: #0972b4 } #demo7 a::before{ position: absolute; top: 0; left: 0; overflow: hidden; width: 0; height: 100%; color:#fff; content: attr(data-hover); -webkit-transition:width 0.4s -moz-transition:width 0.4s; transition:width 0.4s; } #demo7 a:hover::before{ width : 100%; } #demo8{ background:#2ac56c;padding: 50px; } #demo8 a{ position: relative; color: #CCCCCC; } #demo8 a::before{ position:absolute; left: 0; top:0; color: #fff; content: attr(data-hover); -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; -moz-transition: -moz-transform 0.3s, opacity 0.3s; transition: transform 0.3s, opacity 0.3s; } #demo8 a:hover::before{ -webkit-transform: scale(0.7); -moz-transform: scale(0.7); transform: scale(0.7); opacity: 0; } #demo9{ background:#0e83cd;padding: 50px; } #demo9 a {color:#10649b; position: relative;} #demo9 a::before{ overflow: hidden; position: absolute; height: 100%; top:0; left:0; content: attr(data-hover); color: #fff; -webkit-transition:height 0.3s,opacity 0.3s; -moz-transition: height 0.3s,opacity 0.3s; transition:height 0.3s,opacity 0.3s; } #demo9 a::after{ width: 100%; height: 2px; background: #fff; position: absolute; bottom: -15px; left: 0; opacity: 0; content: ''; -webkit-transition: bottom 0.3s, opacity 0.3s; -moz-transition: bottom 0.3s, opacity 0.3s; transition: bottom 0.3s, opacity 0.3s; } #demo9 a:hover::before{ height: 0%; opacity:0; } #demo9 a:hover::after{ bottom: -8px; opacity:1; }
蚂蚁蚂蚁蚂蚁 蝮蛇蝮蛇蝮蛇 伐木机伐木机 蓝胖子蓝胖子
查看更多关于hover_html/css_WEB-ITnose的详细内容...