Article Detail

transition删除按钮旋转180度过渡效果

Document .demo{ width: 32px; height: 32px; background: url(https://out.img.pan.l...

HTML 阅读 37.9万 2 分钟阅读 2017-07-05 10:52

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.demo{ width: 32px; height: 32px; background: url(https://out.img.pan.lizhenqiu.com/FkJ6oDe7KZ5UAJvu71I-YrHil7xh) no-repeat; 
		-webkit-transform: rotate(0deg);
		-ms-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .3s ;
		-o-transition: .3s ;
		transition: .3s ;
	}
	.demo:hover{ -webkit-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg); }
	</style>

</head>
<body>

	<div id="animation" class="demo">
		
	</div>
</body>
</html>

Comments 评论区

广西南宁市 2017-07-05 10:54

transition导航背景色块，从下往上过渡效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{ list-style-type: none; margin: 0; padding: 0; }
		.demo{
			height: 40px;
			width: 1000px;
			margin: 100px auto;
			position: relative;

		}
		.demo li{ float: left;  background: #eee; }
		.demo li a{ width: 200px; display: block;height: 40px; line-height: 40px;  }
		.demo li a .c{ position: absolute; z-index: 2; text-align: center; width: 200px; color: #333;}
		.demo li a .b{ 
			position: absolute; bottom: 0px; 
			-webkit-transition: all 1s ; 
			-o-transition: all 1s ;
			transition: all 1s ; 
			width: 200px; display: block;
			height: 0px;
			z-index: 1;
			}
		.demo li a:hover .b{ background: #f00; height: 40px;  }
		/* .demo .current{ background: #f00; } 
		.demo .current ul{ display: none; position: absolute; top: 40px; } */

	</style>
</head>
<body>
	<div class="demo">
		<ul>
			<li>
				<a href="#">
					<p class="c">lizhenqiu.com</p>
					<p class="b"></p>
				</a>
				<ul>
					<li>1</li>
				</ul>
			</li>
			<li>
				<a href="#">
					<p class="c">lizhenqiu.com</p>
					<p class="b"></p>
				</a>
			</li>
		</ul>
	</div>
</body>
</html>

#⁰

广西南宁市 2017-07-05 11:02

仿新浪App上面的导航
点击文字即可看到效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="https://lizhenqiu.com/templates/default/jquery.min.js"></script>
    </head>
    <style type="text/css">
    	*{
    		margin:0;
    		padding:0;
    		text-align: center;
    	}
    	.nav_tab{
    		margin:20px auto;
    		display: inline-block;
    	}
        .nav_tab_text{
            overflow:hidden;
        }
    	.nav_tab_text span{
            float: left;
    		color: #ccc;
    		margin-right: 10px;
            cursor: pointer;
    	}
    	.nav_tab .nav_tab_sub{
    		width: 100%;
    		height: 2px;
    		margin-top: 5px;
            position: relative;
    	}
    	.nav_tab .nav_tab_sub span{
    		width: 20px;
    		height: 2px;
    		background-color: orange;
    		float: left;
    		display: block;
            position: absolute;
            top:0px;
    	}
        .Black{
            color:#333 !important;
        }
    </style>
    <body>
    	<div class="nav_tab">
    		<div class="nav_tab_text">
    			<span class="Black">Following</span>
    			<span>Hot</span>
                <span>Hot1</span>
                <span>Hot2</span>
                <span>FllowingHot</span>
    		</div>
    		<p class="nav_tab_sub"><span></span></p>
    	</div>
    	<script type="text/javascript">
        $(function(){
            //初始化函数
            var init_width = $('.nav_tab_text span').eq(0).width();
            $('.nav_tab_sub span').css('left',init_width/2-10 + 'px');
            $('.nav_tab_text span').click(function(){
                var i = $(this).index();
                setTimeout(function(){
                 $('.nav_tab_text span').eq(i).addClass('Black').siblings('span').removeClass('Black');
                },500)
                /*移动元素的left值*/
                var _SubEle_P_l =parseInt($('.nav_tab_sub span').css('left'));
                /*点击元素的宽度*/
                var _Width = $(this).width();
                //点击元素距离可视窗口的距离
                var _ClickEle_l = $(this).offset().left;
                //移动元素距离可视窗口的距离
                var _SubEle_l = $('.nav_tab_sub span').offset().left;
                //点击元素和移动元素的距离差
                var difference_v =parseInt(_ClickEle_l - _SubEle_l);
                //值大于 0 向左移动，小于 0 向右移动
                if (difference_v>0) {
                    $('.nav_tab_sub span').animate({'width': difference_v + _Width/2 + 10 + 'px'},200);
                    $('.nav_tab_sub span').animate({'left': _SubEle_P_l + difference_v + _Width/2-10 + 'px','width': '20px'},200);
                }else{
                    $('.nav_tab_sub span').animate({'width': -difference_v - _Width/2 + 10 + 'px','left': _SubEle_P_l + difference_v + _Width/2-10 + 'px'},200);
                    $('.nav_tab_sub span').animate({'width': '20px'},200);
                }
            })
        })
    	</script>
    </body>
</html>

#⁰

Comment Form 留下评论

正在回复 #0

粘贴图片、拖拽文件，或点上面的按钮上传 图片会自动插入 [img] 标签，其他附件会自动插入 [attach] 标签。

正在上传...

提交前会先拉起旧项目同款第三方人机验证。

不再要求填写昵称；reply 会生成一条带楼层回链的新评论，quote 会附带完整引用块，并保持评论锚点跳转。