![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
网页特效
莉娅酱の胖次是我のぁ舔舔
张恒
展开
-
CSS transform 2D/3D 转换对元素进行移动、缩放、转动、拉长或拉伸。
transform 2D/3D转换, 对元素进行移动、缩放、转动、拉长或拉伸。2D:translate() 通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标)和 top(y 坐标) 位置参数; 允许负值translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。rotate() 通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。rotate(30deg) 把元素顺时针原创 2020-10-17 18:01:58 · 763 阅读 · 0 评论 -
CSS 样式过渡 transition
样式过渡transition/*transition : css属性 过渡时间 ;*/height: 200px;transition : height 2s; /* 会将高度从零开始,在2秒内慢慢变成200,从而形成动画效果 */.content .right-banner .rbanner:hover{ box-shadow: 0px 0px 40px #181818; background-color: rgba(255,255,255,0.7); transform: transl原创 2020-10-17 15:28:07 · 153 阅读 · 0 评论 -
CSS 实现毛玻璃的效果
毛玻璃特效.banner{ width: 750px; height: 666px; margin-top: 30px; border-radius: 15px; background: inherit; /* importment! 背景要用inherit继承父级背景, 要一直继承到你想要模糊的背景层*/}/* 毛玻璃的父级 必需,不能去掉 */.banner .banner-back{ background: inherit;/* importment! 背景要用inheri原创 2020-10-17 14:24:12 · 163 阅读 · 0 评论 -
CSS 实现背景渐变透明
背景透明渐变/* 第一个参数是渐变开始的位置 top 就是从上往下开始渐变,当然还有其他参数, eg: bottom 第二个参数是rgba(0,0,0,1)0% 黑色, 透明度为1, 0% 表示渐变开始过渡的位置 第三个参数同上 , 颜色,透明度,和百分比位置可以自定义 第四个同上*/background: -webkit-linear-gradient(top, rgba(0,0,0,1)0%,rgba(0,0,0,0.5)66%, rgba(0,0,0,0)99%);/* Safari、原创 2020-10-17 14:01:38 · 8226 阅读 · 0 评论