利用transform实现一个纯CSS弹出菜单的示例代码_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

利用layer来做你得自己实现动画具体方法,transform的话,有系统封装好的函数可以用,利用layer来做你得自己实现动画具体方法,transform的话,有系统封装好的函数可以用。 查看原帖>>本回答被提问者采纳www.zgxue.com防采集请勿采集本网。

前言

在制作顶部菜单的时候,都会要求制作弹出的二级菜单,早先的做法是用jQuery的来控制二级菜单的显示和过渡动画,但利用CSS3中的transform属性后,这一切都变得异常简单

localRotation使用的是四元数,你可以使用Transform.localEulerAngles来进行赋值 赋值的时候需要使用vector3结构体

先上效果

把元素沿着横向(x轴)移动自身宽度的50%,一般是从左侧为开始点也就是0点。而数值是-50%,所以是从左侧0点向左移动自身宽度的50%。

制作方法

在transform里面有一个方法叫做Lookat,可以自行查找这个方法,它可以让角色的z轴(前方向)面对指定的位置

核心就是利用了transform的区域位移方法,在配合上li标签的hover伪类和动画延时,从而简单实现了子菜单的显示

each方法与其他transform实例方法不同的地方就在于它没有在jQuery对象stack上新产生一个jQuery对象,接下来的几个transform方法都产生新实例对象了。前面的each方法与这里的map方法都类似于Spark的map操作

<nav> <ul> <li> <strong>home</strong> <div> <a href="">cms</a> <a href="">crm</a> </div> </li> <li> <strong>live</strong> <div> <a href="">java</a> <a href="">php</a> </div> </li> <li> <strong>pictrue</strong> <div> <a href="">mm</a> <a href="">dd</a> </div> </li> </ul></nav>

基类的私有成员在派生类中是不能直接访问的,但是基类一般会提供返回这些数据成员的方法,通过这些方法来获取基类私有成员的值 比如基类中有一个成员变量name 一般通过getName()方法就可以访问到

*{ padding: 0; margin: 0; box-sizing: border-box; } body{ width: 100vw; height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } nav{ margin: 10px; } nav ul { list-style-type: none; height: 32px; display: flex; } nav ul li{ margin-right: 10px; } nav ul li strong{ text-transform: uppercase; background-color: #9b59b6; color: white; padding: 5px 30px; line-height: 30px; cursor: pointer; } nav ul li strong+div{ display: flex; flex-direction: column; background-color: #3498db; padding: 10px; transform: translateY(-110%); opacity: 0; transition: .3s; transform-origin: top; } nav ul li:hover div{ transform: translateY(0); opacity: 1; } nav ul li strong+div a{ color: white; text-decoration: none; text-transform: uppercase; padding: 5px 0; }

到此这篇关于利用transform实现一个纯CSS弹出菜单的示例代码的文章就介绍到这了,更多相关纯CSS弹出菜单内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

好难啊!以我所学,不用动画就用js,但是看楼主的意思,肯定是js也不想用的我!不!会!内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 纯css(无js)实现的二级弹出菜单效果代码
  • 符合标准的div css制作的弹出菜单-css教程-网页制作-网页教学网
  • 利用css和transform和过渡让方块固定在一个大的正方形里,沿着方形的边顺
  • 利用UIView的layer属性和transform属性做动画有什么区别?
  • untiy transform是怎么实现的
  • 如何实现C#中 transform.localRotation直接赋值
  • 如何实现C#中 transform.localRotation直接赋值
  • css这句话是什么意思? transform: translateX(-50%);
  • unity怎么利用transform使2d物体自动向右?
  • jquery transform怎么使用
  • transform类是实现二维变换功能的一些类的基类包括哪些派生类
  • quaternion和transform在实现Gameobject的旋转上有什么区别
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程transformcss弹出菜单纯css(无js)实现的二级弹出菜单效果代码符合标准的div css制作的弹出菜单-css教程-网页制作-网页教学网css教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字利用transform实现一个纯css弹出菜单的示例代码css counter计数器与content总结css 列表模型之marker标记的使用让css flex布局最后一行列表左对齐的n种方法(小结)解决移动端1px边框最好的方法(推荐)css中的四种定位区别详解深入理解css background-blend-mode的作用机制css字体、文本、列表属性详细介绍css 控制动画播放与暂停的小技巧(非常实用)css 伪类修改input选中样式的示例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved