xiaosao_的博客

一．HTML部分 HTML部分是由一个div包裹着一张图片和一个div组成，首先用定位把要下降的效果的div定位到最大的div上，当鼠标移入最大的div的时候下降效果缓慢下降。 效果图

一． HEML部分 HEML部分是一个div包裹着一张图片和一个播放按钮 二． CSS部分 CSS部分主要是hover伪类和before伪类的使用 三． 重要知识点 1．@keyframes 效果图： 这是最开始的样子 当鼠标移入时会无限循环地一直闪烁。 ...

一．HEML部分如下图 HTML部分由66个div组成 二．CSS部分如下图 三．主要知识点 transform 2 keyframes 因为animation设置了infinite所以会无限循环。

HTML部分如下图： HTML部分主要是几张图片和几个按钮 css部分主要的知识点 @keyframes(关键帧)和animatiom @keyframes(关键帧) animatiom（动画） 效果图如下： 当鼠标移入其中一个按钮时，图片会向左或向右切换到对应的图片，因为设置了infinite和alternate所以图片规定动画无限次播放，动画轮流反向播放，有兴趣的可以自己动手试试。 ...

首先我们先来看看HTML部分，如下图： 分别用一个ul标签和多个li标签包裹a标签，在第三个li（blog-b）标签里再嵌套多个ul标签和多个li标签，形成一个三级导航。 再来看看css部分如下图： 一.主要知识点： 1．hover选择器：选择鼠标指针浮动在其上的元素，并设置其样式。 2．visibility属性：使元素不可见，和display的功能是一样的但区别是visibility能够隐藏一个元素并占位， display属性只隐藏不占位。 3．opacity属性：这个属性是设置元素的不透明的级别