![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
this_is_Azou
这个作者很懒,什么都没留下…
展开
-
单页面相册灯箱效果
bootstrap+lightbox效果图HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>单页面相册</title> <link rel="stylesheet" href="day_13.css"> <link rel="stylesheet" href="https://st原创 2020-12-30 10:26:44 · 213 阅读 · 0 评论 -
bilibili景深对焦banner效果
bilibili景深对焦banner效果效果分析benner共分为6个图层,6个图层在鼠标hover状态下改变translatex和blur鼠标在左边,1,2两图较为清晰鼠标在中间,3,4两图较为清晰鼠标在右边,5,6两图较为清晰6个图片,按照顺序排列,图片垂直水平居中,填充整个父元素;object-fit、object-position用于对图片进行剪切、缩放、拉伸等,同时可以保留原始比例;一般适用于img和video标签;object-fit:指定元素的内容,如何适应容原创 2020-12-14 13:45:56 · 839 阅读 · 2 评论 -
瀑布流效果
瀑布流效果1.使用js方法Masonry.jsIsotope.js原理:通过js来计算一共有多少个方格,在计算每一个方格的宽度和高度,匹配容器的宽度可以放置多少行;全部方格的position都设置为absolute,逐一计算top和left进行定位,因此当浏览器容器变动的时候,所有元素进行动态重新计算和排列;2.使用css两个属性:column-count,column-gaphttp://picsum.photos/360/460?random=1HTML<!DOCTYPE html原创 2020-12-08 22:12:41 · 167 阅读 · 1 评论 -
左右摇摆动画
左右摇摆动画盒子模型box-sizing:定义盒子模型,一共有两种盒子模型,IE盒子模型,W3C盒子模型默认值:content-box,总宽度:margin+border+padding+width;【W3C盒子模型】border-box,总宽度:margin+width,width中包含了border+padding;[IE盒子模型]inhert:从父元素继承box-sizing属性设置倒影-webkit-box-reflect用来设置对象倒影参数:默认值为none(无倒影)dir原创 2020-12-08 21:33:58 · 324 阅读 · 0 评论 -
加载动画
加载动画基本思想使用伪元素,定义旋转动画,使用不同时间完成动画,动画采用匀速无限循环设置;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>加载动画</title> <link rel="stylesheet" href="day_8.css"></head><body><原创 2020-12-08 20:29:33 · 172 阅读 · 0 评论 -
动态爱心效果
动态爱心效果:nth-child():nth-child(n)选择器匹配属于父元素的第N个子元素,无论元素的类型n可以是数字,关键字(odd/even),或者公式(an+b)[a:周期的长度,b:偏移值]选择前几个,使用负方向 :nth-child(-n+a)选择前a个选择后几个,使用正方向 :nth-child(n+b)选择后b个两者结合使用,选择某一范围 :nth-child(-n+a):nth-child(n+b):从第a个选到第b个选择倒数第n个,:nth-la原创 2020-12-08 19:36:11 · 947 阅读 · 0 评论 -
遮罩效果
遮罩效果原理:使用伪元素在元素前面添加一层蒙版,设置动画实现遮罩效果;HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>遮罩层效果</title> <link rel="stylesheet" href="day_6.css"></head><body><div原创 2020-12-07 21:36:43 · 192 阅读 · 0 评论 -
白光划过效果
白光划过效果CSS伪元素,::after用于创建一个伪元素,作为已选中元素的最后一个子元素,配合content的属性为该元素添加修饰内容,该修饰内容属于虚拟内容,默认为行内元素;:after 写在css中为标签之后添加新的内容;::after写在HTML中的元素之后,增添新的内容;都可以用来表示伪类对象,用来设置对象前后的内容;区别:before/:after是css2的写法,::before/::after是css3的写法,从兼容性的角度,写:before/:after,但是在H5开发中原创 2020-12-07 21:08:05 · 326 阅读 · 0 评论 -
滤镜背景虚化显示
背景虚化显示基本原理上下两个图层,设置上图层hover时,下图层blur注意设置上图层z-index属性,保证上图层在上方使用滤镜filter的blur设置背景元素虚化filterfilter 属性定义图片的可是效果,比如模糊和饱和度,是滤镜的作用。默认值是 none,是不可继承属性none:默认值blur():给图像设置高斯模糊,值为高斯函数的标准差,表示屏幕上多少个像素融合在一起,值越大越模糊;brightness():值为百分比的形式,为图像添加线性乘法,是图像更亮或更原创 2020-12-06 14:40:43 · 448 阅读 · 0 评论 -
水波纹动态效果
水波纹动态效果背景渐变设置linear-gradient():线性渐变,使用最后一个颜色填充后续;reapeating-linear-gradient:重复的线性渐变,重复使用颜色填充;(颜色值1,颜色值2),从什么颜色到什么颜色(to bottom, 颜色值,颜色值)从上渐变到下(to top, 颜色值,颜色值)从下渐变到上(角度,颜色值,颜色值)从上到下渐变,第一个参数指定了渐变的角度(to bottom ,颜色值,0px ,颜色值,100px)第二个颜色值从0px开始到100p原创 2020-12-04 21:45:11 · 571 阅读 · 0 评论 -
3D旋转卡片
3D旋转卡片添加立体感transformtranslatetranslate():带有两个参数,分别代表:X轴和Y轴,第二个参数不写,则默认为0;translateX():向X轴平移,正值向右,负值向左;translateY():向Y平移,正值向下,负值向上;translateZ():向Z轴平移,元素和屏幕之间的距离,越近translateZ值越大,越远,Z值越小;translate3d():同时设置X,Y,Z三个方向的移动距离,三个参数必须填写;rotate:正数表示顺时针旋原创 2020-12-04 16:45:39 · 618 阅读 · 1 评论 -
HTML+CSS鼠标拟态效果
这里写自定义目录标题HTML+CSS鼠标拟态效果弹性布局弹性盒 `display:flex;`自适应布局单位vw/vh快捷编写方法HTMLCSS效果HTML+CSS鼠标拟态效果弹性布局弹性盒 display:flex;flex-directionrow,默认值,主轴为水平方向,起点在左端roe-reverse,主轴为水平方向,起点在右端column,主轴为垂直方向,起点在上沿column-reverse,主轴为垂直方向,起点在下沿flex-wrapnowrap,默认值,不换行原创 2020-12-02 15:32:49 · 377 阅读 · 0 评论