专栏首页前端之攻略css3 transition 原

css3 transition 原

css3 transition 需要4个参数  transition-property, transition-duration, transition-timing-function, and transition-delay。 参数意思:(1)指定要添加效果的css属性 (2)持续时间 (3)效果的转速曲线(4)推迟执行的时间

其中第三个参数transition-timing-function主要有 1、linear:匀速 2、ease:规定慢速开始,然后变快,然后慢速结束的过渡效果(cubic-bezier(0.25,0.1,0.25,1))。 3、ease-in:规定以慢速开始的过渡效果(等于 cubic-bezier(0.42,0,1,1))。 4、ease-out:规定以慢速结束的过渡效果(等于 cubic-bezier(0,0,0.58,1))。 5、ease-in-out:规定以慢速开始和结束的过渡效果(等于 cubic-bezier(0.42,0,0.58,1))。

列子

		<div class="box">
			<div class="outopen">
				<span>close</span>
				<div class="openTwo"></div>
			</div>
		</div>
		<style type="text/css">
			.outopen{width: 100px;height: 50px;border-radius: 25px;position: relative;background: rgba(0,184,0,0.8); transition: all .3s ease-in-out;}
			.outopen span{line-height: 50px;color: #fff;padding-left: 12px;font-size: 14px;text-shadow:2px 1px 2px rgba(36,102,6,1.0);font-family:"Arial";}
			.openTwo{width: 50px;height: 50px;border-radius: 50%;position: absolute;box-shadow: 0px 2px 4px rgba(0,0,0,0.4);background: #fff;top: 0px;left: 50px;cursor: pointer;transition: left .3s ease-in-out;}
			.box.active .outopen{box-shadow: 0px 0px 4px rgba(0,0,0,0.4);background: #fafafa;}
			.box.active .openTwo{left: 0px;}
			.box.active .outopen span{color: #666;padding-left: 58px;text-shadow:0px 1px 0px rgba(0,0,0,0.4)}
		</style>
		<script type="text/javascript">
		$(function(){
			var b1=true;
			$(".box").click(function(){
			$(".box").toggleClass("active");
				if(b1==true){
				$(".outopen span").text("open");
				b1=false;
				}else{
				$(".outopen span").text("close");
				b1=true;
				}
			});
		})
		
		</script>

(adsbygoogle = window.adsbygoogle || []).push({});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 带三角形的进度条 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 对话框css3实现方式 原

    (adsbygoogle = window.adsbygoogle || []).push({});

    tianyawhl
  • 设置背景图片位置与大小 原

    在使用背景图片时,为了使图片在不同的地方重复使用,制作图片的时候可以适当的把图片做的大些,css写样式的时候可以定义图片的大小

    tianyawhl
  • CSS3径向渐变实现优惠券波浪造型

    很多人看到左右的波浪边框,第一想法,应该是用图片实现。现在我们就打破这一想法,用CSS搞定这个效果。

    Javanx
  • 【博客美化】01.推荐和反对炫酷样式

    悟空聊架构
  • 动态内容的等高布局实现

    首先不同内容的固定高度等高布局没有任何难度,本文讲的不是这种。本文讲的是,不同行级或者浮动元素具有不定高度时,将其他元素的高度填充为最大高度元素的高度这种场景。

    RobinsonZhang
  • CSS 3.0实现创意点击按钮

    越陌度阡
  • Valine Admin后台搭建(最新修订版)

    Valine Admin 是 Valine 评论系统的扩展和增强,主要实现评论邮件通知、评论管理、垃圾评论过滤等功能。支持完全自定义的邮件通知模板,基于Akis...

    Caleb
  • PHP+MYSQL分页css篇2

    body{ font-size: 12px;font-family: verdana;width: 100%; } div.page{ text-ali...

    用户7873631
  • 详解:30 text-shadow的开端

    核心知识点是:text-shadow:x y 模糊的大小 模糊的颜色,请大家记住一点:xy可以负数形式出现 嘿嘿。核心是复制哈

    用户7873631

扫码关注云+社区

领取腾讯云代金券