最近很多同学向我提问一些网站上非常漂亮的效果是如何实现的，需要学习很多js知识才能作出很棒的效果么？
其实不是哦，很多时候只需要html+css就可以作出很棒的页面动效了，关键是脑洞一定要大一点。人有多大胆，地有多大产。来随便举些例子吧~~
获取焦点热词消失之谜
下面的这种效果会在很多网站的搜索框中运用，搜索框内显示一些热点搜索内容供用户点击，但是用户真正输入内容的时候总是要隐藏这些热词的，我们的思路是在输入框获取到焦点事件的时候触发一些样式，所以本能的就与了input:focus这个选择器，此后就是如何找到需要隐藏的元素，除了平时使用最多的后代选择器之外，我们想要选择到同级元素还可以使用相邻和兄弟两个选择器。
更加优雅的二级菜单效果
下面展示的这个二级菜单也很有趣，我们知道现在的css选择器是无法选择到父级元素的，这就使得js遍历dom的功能看起来尤为强大。不过没关系，父级够不到，同级来凑吧。我们利用兄弟选择器的功能来疯狂跳转就好：
又一种二级菜单
常用淘宝和京东的朋友对于那种展示产品分类的二级菜单应该也有印象，是的虽然你是横着出来的但依旧是二级菜单，既然竖着的二级菜单我们已经能搞定了，那你横着也没啥不得了的，一个定位就让你服服帖帖：
弹性伸缩的展示器
这种展示内容的方法还是很有趣的，减少了页面占用的同时利用动效让页面变得丰富多彩起来。实现的要领其实还是文档流，思路是双层包裹，外层负责通过浮动来定位每个块，而内层则脱离文档流来实现伸缩，这样就保证了伸缩的过程不会导致文档错位，同时还可以利用zindex属性来解决覆盖问题。
单边框小清新
表格当然是又细又清新的单边框最合心，但是简单的div浮动，明明设置了border:1px，然而盒子模型是很笨的，连接位置加起来就成了2px。其实只要让每个各自负向移动1像素就盖住了多余的一像素，利用zindex还能设置高亮。
翻开一本书
用纯粹的css技巧实现一个翻书的特效其实没什么困难的，掀起封面的过程简单来说就是一次轻微的变形。
反转的图片
这种效果可以轻易使用纯css来实现，唯一的奥妙是使用了backface-visibility这个css3属性。我们所看到的网页元素在页面上是存在正反两面的，所以需要依靠这个属性来限制反面的显示效果。
具体代码如下：