html和css的基础知识内容就正式结束啦!下面是css3内容篇记得上次发过接着更新
过渡与动画概念理解
css3过渡
化用菜鸟教程的说法,CSS3过渡是元素从一种样式逐渐改变为另一种的效果。要实现这一点,必须规定两项内容:1.指定要添加效果的CSS属性。2.指定效果的持续时间。
css3动画
化用菜鸟教程的说法,CSS3动画是根据@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。指定至少这两个CSS3的动画属性绑定向一个选择器:1.规定动画的名称。2.规定动画的时长。
3.过渡案例-炫酷下拉
3-1原理分析
1.首先就是一个导航下拉,就是鼠标放上去出现一个下拉列表
2.然后发现,下拉里面,每一个选项是从不同的两个方向出现的
3.出现的方式是奇数项从左边进,偶数项从右边进,进入方式是滑动淡入。
3-2实现过程
1.首先页面的布局,这个应该大家都知道,菜单无非就是一个ul-li列表,下拉列表就是li下面的一个ul-li。
reset.css(样式重置表和个人常用样式封装)
*{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}ol,ul{list-style:none}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:400}fieldset,img{border:0}textarea{resize:none}a{color:#000;text-decoration:none}.fontsize24,h1{font-size:24px}.fontsize20,h2{font-size:20px}.fontsize18,h3{font-size:18px}.fontsize16,h4{font-size:16px}.fontsize14,h5{font-size:14px}.fontsize12,h6{font-size:12px}.bold{font-weight:700}.fllil li{float:left}.fllir li{float:right}.fl{float:left}.fr{float:right}.radius{border-radius:100%}.positionCenterLeft{left:0;right:0;margin:auto}.positionCenterTop{top:0;bottom:0;margin:auto}.positionCenter{top:0;bottom:0;left:0;right:0;margin:auto}.distable{display:table}.distablecell{display:table-cell;vertical-align:middle}.textels{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.marginCenter{margin:0 auto}.t_l{text-align:left}.t_c{text-align:center}.t_r{text-align:right}.unLine{text-decoration:underline}.fiexd{position:fixed}.absolute{position:absolute}.relative{position:relative}.wrapper{clear:both;overflow:hidden}.o-hidden{overflow:hidden}.hidden{display:none}.block{display:block}.lblock{display:inline-block}.clear{clear:both}.pointer{cursor:pointer}img{border:0;vertical-align:middle}
html代码如下
<div class="demo-nav">
<!--.fllil,.clear是在样式重置表(reset.css)上写好的样式,.fllil li{fload:left;}.clear{clear:both;}-->
<ul class="menu fllil">
<li>HTML5
<ul class="sub-menu">
<li>article</li>
<li>section</li>
<li>menu</li>
<li>nav</li>
</ul>
</li>
<li>CSS3
<ul class="sub-menu">
<li>动画</li>
<li>过渡</li>
<li>圆形</li>
<li>边框</li>
</ul>
</li>
<li>Javascript
<ul class="sub-menu">
<li>字符串</li>
<li>数组</li>
<li>对象</li>
<li>布尔</li>
</ul>
</li>
<li>Jquery
<ul class="sub-menu">
<li>动画</li>
<li>特效</li>
<li>AJAX</li>
</ul>
</li>
<li>VUE</li>
</ul>
<div class="clear"></div>
</div>
css代码如下
.demo-nav {
width: 500px;
margin: 0 auto;
}
.demo-nav li {
line-height: 40px;
padding: 0 10px;
background: #09f;
color: #fff;
position: relative;
}
.demo-nav li ul {
position: absolute;
left: 0;
top: 40px;
height: 0;
overflow: hidden;
}
.demo-nav li ul li {
float: none;
/*过渡代码*/
transition: all .3s;
background: #f90;
opacity: 0;
}
/*奇数项初始往右边偏移100%*/
.demo-nav li ul li:nth-of-type(1n) {
transform: translate3d(100%, 0, 0);
}
/*偶数项初始往左边偏移100%*/
.demo-nav li ul li:nth-of-type(2n) {
transform: translate3d(-100%, 0, 0);
}
.demo-nav li:hover ul {
overflow: visible;
}
/*透明度和互动同时进行*/
.demo-nav li:hover ul li {
opacity: 1;
transform: translate3d(0, 0, 0);
}