Css中2d转换怎么用

2024-04-02 19:04:59 523人浏览薄情痞子

摘要

这篇文章主要为大家展示了“CSS中2d转换怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Css中2d转换怎么用”这篇文章吧。css的2d转换十分强大，能够

这篇文章主要为大家展示了“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转换怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网node.js频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Css中2d转换怎么用

本文链接: https://www.lsjlt.com/news/92799.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341