transition属性的学习与使用 |
您所在的位置：网站首页 › transition属性 › transition属性的学习与使用 |
transition属性的学习与使用
2022中国 DevOps 现状调查全面启动！>>>
因为临近期末，总有太多事情需要处理，间隔了好长时间没有更新博客，你们懂的~~~~ 最近实训，接触了下H5，发现还挺好玩的，在此与大家分享一下~~~~ 话不多说，直接上例子，对于某些属性，例子中有注释！ 例子1：(由于只是小例子，就没有将css属性专门提出来，请见谅！) .demo1 { top: 200px; width: 100px; height: 100px; background-color: cyan; } .demo1:hover { /*translateX水平向右移动*/ /*rotate旋转360度*/ /*transform中的scale放大会无视挤压, 不是宽高的真正放大*/ transform: translateX(100px) rotate(360deg) scale(2); /*Chrome和Safari浏览器适配*/ -webkit-transform: translateX(100px) rotate(360deg) scale(2); /*fixfox*/ -moz-transform: translateX(100px) rotate(360deg) scale(2); /*IE*/ -ms-transform: translateX(100px) rotate(360deg) scale(2); /*transition是设置缓慢过渡的,all指的是所有属性都赋予过渡效果, 过渡时间延续1s,ease表示过渡类型是平滑过渡*/ transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; /*阴影*/ /*横线10px 纵向10px 毛边5px*/ box-shadow: 10px 10px 5px black; -webkit-box-shadow: 10px 10px 5px black; }效果就不截图了，大家可以复制运行看看效果。 例子2：
效果图如上，所以可以将其分为5个div，中间为按钮，四周为线。代码如下： *{ margin: 0; padding: 0; } body{ background: black; } .box{ width:200px; height: 50px; border:3px solid white; margin: 100px auto; position: relative; } .line{ background-color: white; position: absolute; transition: all 0.5s; } .line2 p{ color: white; font-size: 20px; font-weight: bolder; text-align: center; line-height: 50px; } .lineTop{ width: 0; height: 3px; background: white; top: -3px; left:-200px; } .box:hover .lineTop{ width: 200px; left: 0px; transition: all 1s; -webkit-transition: all 1s; } .lineBottom{ width: 0; height: 3px; background: white; top:50px; right:-200px; } .box:hover .lineBottom{ width: 200px; right: 0px; transition: all 1s; -webkit-transition: all 1s; } .lineLeft{ width: 3px; height: 0; background: white; top:-50px; left: 200px; } .box:hover .lineLeft{ height: 50px; top: 0px; transition: all 1s; -webkit-transition: all 1s; } .lineRight{ width: 3px; height: 0; background: white; bottom:-50px; left: -3px; } .box:hover .lineRight{ height: 50px; bottom: 0px; transition: all 1s; -webkit-transition: all 1s; }游戏机 例子3： 相信照片墙大家都不陌生，如图所示：
鼠标滑过照片，照片旋转一定角度放大，实现效果图如下：
代码如下： body{ background-color: linen; } /*只定义图片宽度或者高度就可以按比例缩小*/ img{ width: 200px; border: 4px solid lightyellow; } #img2, #img4{ transform: rotate(10deg); } #img1, #img3{ transform: rotate(-10deg); } #picture{ width: 1000px; height: 400px; margin: 100px auto; } .demo1{ position: relative; z-index: 4; } /*由于本人使用 的google浏览器所以就不写适配其他浏览器的了*/ #picture .demo1 img:nth-child(1):hover, #picture .demo1 img:nth-child(3):hover{ /*右移100px,旋转20度,放大1.5倍*/ transform: translateX(50px) rotate(-20deg) scale(1.2); /*chrome和Safari浏览器适配*/ -webkit-transform: translateX(50px) rotate(-20deg) scale(1.2); transition: all 1s; -webkit-transition: all 1s; position: relative; /*z-index越大出现在越上面*/ z-index: 5; /*阴影*/ /*横线5px 纵向5px 毛边2px*/ box-shadow: 5px 5px 2px lightgray; -webkit-box-shadow: 5px 5px 2px lightgray; } #picture .demo1 img:nth-child(2):hover, #picture .demo1 img:nth-child(4):hover{ /*右移100px,旋转20度,放大1.5倍*/ transform: translateX(-30px) rotate(20deg) scale(1.2); /*chrome和Safari浏览器适配*/ -webkit-transform: translateX(-30px) rotate(20deg) scale(1.2); transition: all 1s; -webkit-transition: all 1s; position: relative; /*z-index越大出现在越上面*/ z-index: 5; /*阴影*/ /*横线5px 纵向5px 毛边2px*/ box-shadow: 5px 5px 2px lightgray; -webkit-box-shadow: 5px 5px 2px lightgray; }
例子4： 经常在商品展示的时候可以看到如图所示的展示方式：
鼠标移至某一商品上，该商品所占宽度会拉伸，图片也会随之放大，同时出现一些介绍话语之类。实现效果图如下：
代码如下： * { margin: 0; padding: 0; } .box { display: inline-block; border: 2px solid lightgray; } .box .item { width: 200px; height: 200px; float: left; background-color: lightyellow; border-right: 2px dashed lightgray; position: relative; transition: all 1s; -webkit-transition: all 1s; } .box .item:last-child { border-right: none; } /*第1个元素*/ .box .item p:nth-child(1) { position: absolute; color: blue; top: 10px; left: 10px; } /*第2个元素*/ .box .item p:nth-child(2) { position: absolute; color: red; top: 30px; left: 10px; } /*第3个元素*/ .box .item p:nth-child(3) { position: absolute; color: green; top: 50px; left: 10px; } /*第4个元素*/ .box .item p:nth-child(4) { position: absolute; color: palevioletred; top: 70px; left: 10px; /*透明度*/ opacity: 0; } .box .item img { position: absolute; width: 50%; bottom: 0; right: 0; transition: all 0.5s; -webkit-transition: all 0.5s; } .box .item:hover { width: 300px; background-color: white; } .box .item:hover img { width: 70%; } .box .item p { transition: all 0.5s; -webkit-transition: all 0.5s; } .box .item:hover p:nth-child(4) { opacity: 1; top: 150px; }时装团 节日礼品 一折起 全场甩卖 
时装团 节日礼品 一折起 全场甩卖
时装团 节日礼品 一折起 全场甩卖
其中所有代码需要的图片，你们可以找其他图片代替，看看运行效果。 写在最后：若有错误，望指正。 写给自己：不能因为自己忙，而放弃学习，慢慢积累的过程才最重要。 |
【本文地址】
今日新闻 |
推荐新闻 |