css3
汝甚骚吾不及
这个作者很懒,什么都没留下…
展开
-
下降效果
一.HTML部分HTML部分是由一个div包裹着一张图片和一个div组成,首先用定位把要下降的效果的div定位到最大的div上,当鼠标移入最大的div的时候下降效果缓慢下降。效果图原创 2021-03-02 19:09:33 · 85 阅读 · 0 评论 -
闪烁光圈
一. HEML部分HEML部分是一个div包裹着一张图片和一个播放按钮二. CSS部分CSS部分主要是hover伪类和before伪类的使用三. 重要知识点1.@keyframes效果图:这是最开始的样子当鼠标移入时会无限循环地一直闪烁。...原创 2021-02-23 11:36:52 · 98 阅读 · 0 评论 -
弧花
一.HEML部分如下图HTML部分由66个div组成二.CSS部分如下图三.主要知识点transform2 keyframes因为animation设置了infinite所以会无限循环。原创 2021-02-22 11:51:16 · 79 阅读 · 0 评论 -
CSS轮播
HTML部分如下图:HTML部分主要是几张图片和几个按钮css部分主要的知识点 @keyframes(关键帧)和animatiom@keyframes(关键帧)animatiom(动画)效果图如下:当鼠标移入其中一个按钮时,图片会向左或向右切换到对应的图片,因为设置了infinite和alternate所以图片规定动画无限次播放,动画轮流反向播放,有兴趣的可以自己动手试试。...原创 2021-02-07 11:32:32 · 62 阅读 · 0 评论 -
三级导航
首先我们先来看看HTML部分,如下图:分别用一个ul标签和多个li标签包裹a标签,在第三个li(blog-b)标签里再嵌套多个ul标签和多个li标签,形成一个三级导航。再来看看css部分如下图:一.主要知识点:1.hover选择器:选择鼠标指针浮动在其上的元素,并设置其样式。2.visibility属性:使元素不可见,和display的功能是一样的但区别是visibility能够隐藏一个元素并占位,display属性只隐藏不占位。3.opacity属性:这个属性是设置元素的不透明的级别原创 2021-02-05 10:31:17 · 2592 阅读 · 1 评论