您好,登录后才能下订单哦!
这篇文章主要为大家展示了“Css中2d转换怎么用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Css中2d转换怎么用”这篇文章吧。
css的2d转换十分强大,能够在不使用js的情况下,实现页面的元素与用户之间更多动态的交互,增强用户体验。其中使用最多的就是hover伪类。
1、创建一个页面的div元素:
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>2d转换测试</title> </head> <body> <div id="fr"> <div class="de">春晚</div> <div class="de">春晚</div> <div class="de">春晚</div> <div class="de">春晚</div> </div> </body></html>
4、给第一个正方形加入鼠标点击
.de:first-child:hover{ transform: translate(0px,-5px);transition: transform 1s; }
鼠标移动到正方形区域后,小方块会向上移动5px,有过渡效果;离开小方块后,立即回到原位,没有过渡效果;
另外一种写法:
.de:first-child{ transition: transform 1s; } .de:first-child:hover{ transform: translate(0px,-5px); }
将transition过渡效果写在被选中的整个元素中,出现的效果
鼠标移动到正方形区域后,小方块会向上移动5px,有过渡效果;离开小方块后,小方块会到原始位置,有过渡效果。
原理:将过渡效果transition写在hover伪类中,鼠标进入时,hover效果会应用transition效果;鼠标移出,属于非hover,没有过渡效果;即,元素移动过程中,有过渡效果;元素回到原始位置,没有过渡效果。将transition过渡写在整个元素中,会在元素整个移动过程中起到过渡效果。
5、给每个小方块加入动画效果完整的css:
#fr{ width: 500px; height: 600px; border: 1px solid gray; margin: 20px auto; } .de{ width:100px; height:100px; border:1px solid green; margin: 10px auto; } .de:first-child{ transition: transform 1s; } .de:first-child:hover{ transform: translate(0px,-5px); } .de:nth-child(2){ transition: transform 1s; } .de:nth-child(2):hover{ transform: rotate(360deg); } .de:nth-child(3){ transition: transform 1s; } .de:nth-child(3):hover{ transform: skew(30deg ,30deg); } .de:last-child{ transition: transform 1s; } .de:last-child:hover{ transform: scale(1.05,1.05); }
以上是“Css中2d转换怎么用”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。