> 웹 프론트엔드 > HTML 튜토리얼 > 5个基于css3超炫的鼠标滑动按钮动画_html/css_WEB-ITnose

5个基于css3超炫的鼠标滑动按钮动画_html/css_WEB-ITnose

WBOY
풀어 주다: 2016-06-24 11:49:51
원래의
1111명이 탐색했습니다.

今天给大家分享5个基于css3超炫的鼠标滑动按钮动画。这5个按钮鼠标经过的时候有超炫的动画效果。这5个按钮适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div id="wrap">        <a href="#" class="btn-slide"><span class="circle"><i class="fa fa-rocket"></i></span>            <span class="title">火箭</span> <span class="title-hover">带你飞</span> </a><a href="#"                class="btn-slide2"><span class="circle2"><i class="fa fa-download"></i></span><span                    class="title2">下载</span> <span class="title-hover2">点击下载</span> </a>    </div>    <link rel="stylesheet" type="text/css" href="css/btn2.css">    <div class="container1">        <div class="con_down1">            <i class="fa fa-download fa-2x"></i>            <h4>                Download Now</h4>        </div>        <div class="con_sizes1">            <div class="sizes1">                <h5 class="size1">                    34.5 MB</h5>                <div class="sizes_abs1">                </div>            </div>        </div>    </div>    <div class="container2">        <div class="con_down2">            <i class="fa fa-download fa-2x"></i>            <h4>                Download now</h4>        </div>        <div class="con_sizes2">            <div class="sizes2">                <h5 class="size2">                    34.5 MB</h5>                <div class="sizes_abs2">                </div>            </div>        </div>    </div>    <div>        <br />        <br />    </div>    <link rel="stylesheet" type="text/css" href="css/btn3.css">    <div class="center">        <a class="spinningeffect" href="#" target="_blank">            <img  src="img/blogger-logo1.jpg" / alt="5个基于css3超炫的鼠标滑动按钮动画_html/css_WEB-ITnose" >        </a>    </div>    <div>        <br />    </div>    <link rel="stylesheet" type="text/css" href="css/focus.css">    <div class="center">        <a class="zoomeffect" href="#" target="_blank">            <img  src="img/addfocus.jpg" / alt="5个基于css3超炫的鼠标滑动按钮动画_html/css_WEB-ITnose" ></a>    </div>    <div>        <br />    </div>    <link rel="stylesheet" type="text/css" href="css/btn4.css">    <div class="mudwnpbutton center">        <a href="#" target="blank" rel="nofollow">预览</a>    </div>    <link rel="stylesheet" type="text/css" href="css/btn5.css">    <div class="whitebuttondemo">        <a href="#">button</a> <span class="up">message</span>    </div>    <div>        <br />        <br />    </div>    <div class="whitebutton">        <a href="#">button</a> <span class="up">top message</span> <span class="down">1.6MB            .rar </span>    </div>    <div>    </div>
로그인 후 복사

via:http://www.w2bc.com/Article/19453

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿