精华内容
下载资源
问答
  • CSS3制作hover下划线动画 1、前几天看到Hexo的next主题标题hover效果很炫,自己尝试写了一个,另一个是next的实现,照例先上图   2、实现小黑科技 1 <!-- html结构 --> 2 <div> 3...

    CSS3制作hover下划线动画

    1、前几天看到Hexo的next主题标题hover效果很炫,自己尝试写了一个,另一个是next的实现,照例先上图

      css3

    2、实现小黑科技

    1 <!-- html结构 -->
    2 <div>
    3     <a href="javascript:void(0);" class="demo1">自己实现的hover效果</a>
    4 </div>

    复制代码

            /* css样式 */
            .demo1{
                position: relative;
                text-decoration: none;
                font-size: 20px;
                color: #333;
            }
            .demo1:before{
                content: "";
                position: absolute;
                left: 50%;
                bottom: -2px;
                width: 0;
                height: 2px;
                background: #4285f4;
                transition: all .3s;
            }
            .demo1:hover:before{
                width: 100%;
                left: 0;
                right: 0;
            }

    复制代码

    关键在于没有hover的时候定义width为0,这样可以实现宽度从0到100%的变化。

    left为50%,目的是为了动画开始的位置是在50%的位置。

    3、hexo next主题的官方实现

    <!-- html结构 -->
    <div>
        <a href="javascript:void(0);" class="demo2">Hexo next主题的实现</a>
    </div>

    复制代码

            /* css样式 */
            .demo2{
                position: relative;
                text-decoration: none;
                font-size: 20px;
                color: #333;
            }
            .demo2:before{
                content: "";
                position: absolute;
                left: 0;
                bottom: -2px;
                height: 2px;
                width: 100%;
                background: #4285f4;
                transform: scale(0);
                transition: all 0.3s;
            }
            .demo2:hover:before{
                transform: scale(1);
            }

    复制代码

    这个实现的关键就是scale(0)到scale(1)的变化。

    CSS3的scale transform的原点是中点,所以会从中间的位置开始动画。

    4、两者区别

    通过动画也看出来,next的动画有透明渐变的效果,和scale的表现形式有关。

    第一个实现只是width变化,但是也可以用animation实现和next一样的效果。

    展开全文
  • jQuery CSS3下划线动画导航特效是一款鼠标点击导航线性流动效果代码。
  • CSS3鼠标滑过导航出现下划线动画特效是一款非常漂亮的鼠标滑过导航菜单时的下划线动画效果。
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;拉钩登录界面注册效果实现&lt;... u
    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="UTF-8">
    		<title>拉钩登录界面注册效果实现</title>
    		<style>
    			* {
    				padding: 0;
    				margin: 0;
    			}
    			
    			ul {
    				width: 300px;
    				height: 30px;
    				border-bottom: 1px solid #EBEBEB;
    				padding-bottom: 5px;
    				position: relative;
    			}
    			
    			li {
    				list-style: none;
    				text-align: center;
    				width: 150px;
    				float: left;
    				cursor: pointer;
    			}
    			
    			.active {
    				color: #1ACBFC;
    			}
    			.underline{
    				position: absolute;
    				left: 0;
    				bottom: -1px;
    				width: 150px;
    				height: 1px;
    				background: #1ACBFC;
    				transition: .5s;
    			}
    			
    			.underline:before {
    				content: '';
    				width: 0;
    				height: 0;
    				border: 6px solid transparent;
    				border-bottom-color: #1ACBFC;
    				position: absolute;
    				left: 50%;
    				margin-left: -6px;
    				bottom: 0;
    			}
    			.underline:after {
    				content: '';
    				width: 0;
    				height: 0;
    				border: 6px solid transparent;
    				border-bottom-color: white;
    				position: absolute;
    				left: 50%;
    				bottom: -1px;
    				margin-left: -6px;
    				
    			}
    			
    		</style>
    	</head>
    
    	<body>
    		<ul>
    			<li class="active">手机号码登录</li>
    			<li>邮箱登录</li>
    			<span class="underline"></span>
    		</ul>
    		
    		<script>
    			var positions=[0,'150px'];
    			var underlineDom=document.querySelector('.underline');
    			var lis=document.querySelectorAll('li');
    			for(var i=0;i<lis.length;i++){
    				lis[i].οnclick=function(i){
    					return function(){
    					for(var j=0;j<lis.length;j++){
    						lis[j].style.color='black';
    					}
    						lis[i].style.color='#1ACBFC';
    						underlineDom.style.left=positions[i];
    					
    					
    					}
    				}(i)
    				
    			}
    		</script>
    	</body>
    
    </html>

    展开全文
  • 很好的文章:JavaScript可变范围提升很好的文章:JavaScript可变范围提升很好的文章:JavaScript可变范 h1 > body > html >   转载于:https://www.cnblogs.com/xzma/p/7703965.html
    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style>
            h1 {
                position: relative;
                /* 关键代码 实现折行效果 */
                display: inline;
                padding-bottom: 2px;
                background-repeat: no-repeat;
                background-size: 0 2px;
                /* 控制线的位置 */
                background-position: 50% 100%;
                /* 0% 100% 从左向右变动 */
                /* 50% 100% 从中间往两侧 */
                /* 100% 100% 从右向左变动 */
                /* 0% 50%  可制作横穿线*/
                -webkit-transition: all .5s ease-in-out;
                -moz-transition: all .5s ease-in-out;
                -o-transition: all .5s ease-in-out;
                transition: all .5s ease-in-out;
                /* 自己可以配置更多创意 */
                background-image: linear-gradient(to right, #3344aa 0%, red 50%, #333 100%);
            }
            
            h1:hover {
                background-size: 100% 2px;
            }
        </style>
    </head>
    
    <body>
        <h1>很好的文章:JavaScript可变范围提升很好的文章:JavaScript可变范围提升很好的文章:JavaScript可变范</h1>
    </body>
    
    </html>

     

    转载于:https://www.cnblogs.com/xzma/p/7703965.html

    展开全文
  • js代码var nav = $('nav');var line = $('line.appendTo(nav);var active = nav.find('.active');var pos = 0;var wid = 0;if(active.length) {pos = active.position().left;wid = active.width();line.css({left: ...

    js代码

    var nav = $('nav');

    var line = $('

    line.appendTo(nav);

    var active = nav.find('.active');

    var pos = 0;

    var wid = 0;

    if(active.length) {

    pos = active.position().left;

    wid = active.width();

    line.css({

    left: pos,

    width: wid

    });

    }

    nav.find('ul li a').click(function(e) {

    if(!$(this).parent().hasClass('active')) {

    e.preventDefault();

    var _this = $(this);

    nav.find('ul li').removeClass('active');

    var position = _this.parent().position();

    var width = _this.parent().width();

    if(position.left >= pos) {

    line.animate({

    width: ((position.left - pos) + width)

    }, 300, function() {

    line.animate({

    width: width,

    left: position.left

    }, 150);

    _this.parent().addClass('active');

    });

    } else {

    line.animate({

    left: position.left,

    width: ((pos - position.left) + wid)

    }, 300, function() {

    line.animate({

    width: width

    }, 150);

    _this.parent().addClass('active');

    });

    }

    pos = position.left;

    wid = width;

    }

    });

    展开全文
  • 用jQuery实现的菜单下划线动画效果

    千次阅读 2013-12-15 21:31:29
    前几天在网站看到一个菜单下划线动画效果感觉不错.不过他的效果有缺陷,鼠标快速移动时会导致动画停不下来. 自己拿jQuery写了一个,解决了上面的问题,而且菜单的独立性比较好,不会干扰到页面其他的内容. 借助了...
  • 动画效果结束后 HTML 给mark标签内的文字添加动态下划线效果 <h1>JavaScript 的歷史及現況</h1> <p>1990 年,科學家 Tim Berners-Lee 在互聯網的基礎上發明了萬維網 (World Wide Web),<...
  • -- 下划线 --> <div class="tabs-active-bar" v-if="tabsList.length"></div> </ul> </div> </div> </template> <script> export default { data() { return { ...
  • 本文主要讲述两种下划线动效效果,第一种悬停时 X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左!!实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果x轴由...
  • 如下图:在开发者工具中预览效果t3fyo-a07nj.gif我们可以用两种方法实现这样动画,css3的过渡或者用js去控制。省事的当然是用css3来写啦,我们先来看看css3的具体实现。css3实现:先看最基本的.wxml布局:image.png...
  • 直接上图,即鼠标进入导航栏的某个选项时,出现下划线,但下划线具有伸缩动画,所以不显单调。(我不知道怎么弄动图(;´д`)ゞ) 代码如下,是从中间向两边伸缩,还是从左往右,都可以自己修改。 从中间向两边 ...
  • 本文主要讲述两种下划线动效效果,第一种悬停时 X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左!!实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果x轴由...
  • 本文主要讲述两种下划线动效效果,第一种悬停时 X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左!!实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果x轴由...
  • 在网上看了很多都是下划线跟随效果,所以今天写了一个可以点击时下划线的位置会有动画效果的。 核心代码是 改变它的left值: return (10 + this.show * 130) + 'px' 配合使用css的过渡效果:transition: all 1s; ...
  • CSS语言:CSSSCSS确定@import 'https://fonts.googleapis.com/css?family=Lora:400,700';* {box-sizing: border-box;}html,body {font-family: 'Lora'...width: 100%;height: 100%;display: -webkit-box;display: -w...
  • 如图所示: 可用方法: javascript``` li>a:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #0052d9; transform: scale(...
  • export default { data() { ... this.left = res[0].left + uni.upx2px(36) //计算出当前选中的tab距离窗口左侧距离加上tab选项宽度减去下划线宽度除以2(目的:让下划线居中) }) } } }
  • 本文主要讲述两种下划线动效效果,第一种悬停时 X轴由内向外展开实现动画效果,第二种为左右自动展示,由左向右,或由右向左!! 实现的主要效果是利用伪类标签,以及hover,利用transfromm trition实现动画效果 x轴...
  • 链接下划线是非常常见的一种样式,最近做了一个非常简单的视觉效果,非常不错,可以点下面链接查看。 http://jsbin.com/zanewe/edit?html,css,output 创建这种效果是非常简单的,不需要添加额外的DOM元素到HTML,...
  • 主要为大家详细介绍了js实现移动端tab切换时下划线滑动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,933
精华内容 2,773
关键字:

js下划线动画