css3过渡动画2

106 阅读 0 评论 70 点赞

我是靠谱客的博主能干红牛，最近开发中收集的这篇文章主要介绍css3过渡动画2，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

前些天更新了css3过渡动画中的光标移过动画,激活动画，焦点动画以及选择动画，今天就更新剩下的css3过渡动画中的目标动画，响应式动画和事件动画。
1.选择动画：
实例说明：
:checked 伪类在发生选中状况时触发过渡，取消选中则恢复原来的状态。
本例设计当复选框被选中时缓慢缩进2个字符，演示效果如图所示。
在这里插入图片描述
第一步：新建HTML5文档，设计表单结构。

<form id=fm-form action="" method=post>
    <fieldset>
        <legend>用户登录</legend>
        <label class="name" for="name">姓名
            <input type="text" id="name" name="name" >
        </label>
        <p>技术专长<br>
            <label>
                <input type="checkbox" name="web" value="html" id="web_0">
                HTML</label>
            <br>
            <label>
                <input type="checkbox" name="web" value="css" id="web_1">
                CSS</label>
            <br>
            <label>
                <input type="checkbox" name="web" value="javascript" id="web_2">
                JavaScript</label>
            <br>
        </p>
    </fieldset>
</form>

第二步，在样式表中设计动画样式，核心代码如下。

input[type="checkbox"] {     transition: margin 1s ease;}
input[type="checkbox"]:checked {    margin-left: 2em;}

2.目标动画
实例说明
本例使用CSS3的目标伪类（：target）设计折叠面板效果，在没有使用JavaScript脚本的情况下，用过渡属性设计滑动效果，折叠动画效果如图所示。
在这里插入图片描述

第一步，新建HTML5文档，设计折叠面板结构。

<div class="accordion">
    <h2>我爱买</h2>
    <div id="one" class="section">
        <h3> <a href="#one">爱逛</a> </h3>
        <div><img src="images/11.png"></div>
    </div>
    <div id="two" class="section">
        <h3> <a href="#two">爱美丽</a> </h3>
        <div><img src="images/22.png"></div>
    </div>
    <div id="three" class="section">
        <h3> <a href="#three">爱吃</a> </h3>
        <div><img src="images/33.png"></div>
    </div>
</div>

第二步，在设计表中设计动画样式，核心代码如下

/*当获得目标焦点时，粗体显示选项标题栏文字*/
.accordion :target h3 a { font-weight: bold; }
/*选项栏标题对应的选项子框样式*/
.accordion h3 + div {
	height:0；padding:0 lem； overflow:hidden;
	/*定义过渡对象为高度，过渡时间为0.3秒，渐显显示*/
	transition: height 0.3s ease-in;
}
.accordion h3 + div img( margin:4px;)
/×当获得目标焦点时，子选项内容框样式*/
accordion :target h3 + div {
height:300px; overflow:auto;           /*当获取目标之后，高度为300px*/
}

3,响应式动画
实例说明
触发元素状态变化的另一种方法是使用CSS3媒体查询。本例设计页面宽度为980px，对于桌面屏幕来说，该宽度适用于任何宽于1024px的分辨率。通过媒
体查询监测宽度小于980px的设备，并将页面宽度由固定版式改为液态版式，布局元素的宽度随着浏览器窗口的尺寸变化进行调整。当可视部分的宽度进一步减小到650px以下时，主要内容部分的容器宽度会增大至全屏，而侧边栏将被置于主要内容部分的下方，整个页面变为单列布局。

第1步，新建HTML5文档，构建文档结构，包括页头、主要内容部分、侧边栏和页脚。

<div id="pagewrap">
<header id="header">
<hgroup><h1 id="site-logo">网站 LOGO</h1></hgroup>
<nav><ul id="main-nav"><li>< a href=" ">导航链接</ a></1i></ul></nav>
<form id="searchform"><input type="search"></form>
</header>
<div id="content"><article class="post">主体内容区域</article></div>
<aside id="sidebar"><section class="widget">侧栏栏目</section></aside>
<footer id="footer">页脚区域</footer>
</div>

第2步，设计主要结构的CSS样式。这里将注意力集中在整体布局上。整体设计在默认情况下页面
容器的固定宽度为980px，页头部分（header）的固定高度为160px，主要内容部分（content）的宽度为
600px，左浮动，侧边栏（sidebar）右浮动，宽度为280px。

#pagewrap{width:980px; margin: 0 auto;}
#header { height：160px;}
#content { width:600px; float:left;}
#sidebar {width:280px; float:right;}
#footer {clear:both；}

第3步，借助媒体查询设计自
适应布局。当浏览器可视部分宽度大于650px小于981px时，将pagewrap
的宽度设置为95%，将content的宽度设置为60%，将sidebar的宽度设置为30%。

@media screen and (max-width：980px）{
#pagewrap{width:95%；
#content {width：60%；padding：3%4%；}
#sidebar {width:30%;}
#sidebar .widget { padding:88 7%;margin-bottom:10px；}
}

第4步，当浏览器可视部分宽度小于651px时，将header的高度设置为auto；将scarchform绝对定位在top:5px的位置；将main-nav、site-logo、site-description的定位设置为static；将content的宽度设置为auto（主要内容部分的宽度将扩展至满屏），并取消float设置：将sidebar的宽度设置为100%，取消float 设置。

@media screen and (max-width：650px){
#header { height:auto；}
#searchform{ position: absolute; top:5px; right: 0；}
#main-nav{ position:static; }
#site-logo { margin: 15px 100px 5px 0; position: static;}
#site-description { margin:0 0 15px; position: static; }
#content {width: auto;margin:20px 0; float： none; }
#sidebar {width:100%;margin:0； float: none; }
}

第5步，当询览器可视部分宽度小于481px时，480px也就是传统手机横屏时的宽度。当可视部分的宽度小于481px时，禁用HTML节点的字号自动调整。在默认情况下，手机会将过小的字号放大，这里可以通过-webkit-text-size-adjust 属性进行调整，将main-nav中字号设置为90%。

@media screen and (max-width：480px） {
	html(-webkit-text-size-adjust:none;}
	#main-nav a {font-size：90%；padding:10px 8px；}
	}

第6步，设计弹性图片。为图片设置max-width：100%和height：auto，设计图像弹性显示。
img{max-width:100s;height: auto; width: auto9; /*兼容 IE8*/}

第7步，设计弹性视频。对于视频也需要做max-width：100%的设置，但是 Safari 浏览器对 embed的该属性支持不是很好，因此以width：100%来代替。

.video         embed,.video object,.video iframe{width:100%;minheight:300px;height:auto;}

第8步，在默认情况下，手机端Safari浏览器会对页面进行自动缩放，以适应屏幕尺寸。这里可以
使用以下的meta设置，将设备的默认宽度作为页面在Safari的可视部分宽度，并禁止初始化缩放。

<meta name="viewport" content="width=device-width;initial-scale=1.0">

第9步，在样式表中添加如下样式，为页面所有对象启动过渡动画，这样当页面发生响应式变化时，会自动以动画形式缓慢进行过渡。

*{ transition: all 1s ease；}

4.事件动画
实例说明
本例在文档中设计一个盒子和一个按钮，当单击按钮时，使用JavaScript脚本切换盒子的类样式，从而触发过渡动画，演示效果如图所示。不过，读者也可以通过其他方法触发这些更改，包括通过JavaScript 脚本动态更改 CSS属性。
提示;
从执行效率来看，简单的过渡动画使用CSS会更方便
设计过程
在这里插入图片描述

第1步，新建HTMLS文档，在文档中插入一个盒子和按钮。

<input type="button" id="button" value="触发过渡动画" />
<div class="box"></div>

第2步，在样式表中设计盒子样式，并为其开启宽度和高度的过渡动画。然后定义一个简单的类样式，设计改变盒子的宽度和高度。

 .box {
    margin:4px; 
    background: #93FB40;
    border-radius: 12px;
    box-shadow: 2px 2px 2px #999;
    width: 50%;
    height: 100px;
    transition: width 2s ease, height 2s ease;
}
.change {
    width: 100%;
    height: 120px;
}

第3步，通过jQuery脚本触发过渡。设计当用户单击按钮时，动态切换盒子的类样式。

<script type="text/javascript" src="images/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() { 
    $("#button").click(function() { 
        $(".box").toggleClass("change"); 
    }); 
});
</script>