当前位置：首页 > Web前端 > CSS

记得一些css3效果

时间：2023-03-31 11:53:53 CSS

半透明边框background-clip:指定背景的绘图区域.div{width:200px;高度：200px；背景：蓝色；border:10pxsolidrgba(255,170,170,0.3);background-clip:padding-box;}效果如图parallelogram//方法一

parallelogram

.skew-ex{width:200像素;高度：40px；行高：40px；背景：番茄；白颜色;变换：skewX（-45deg）；>div{变换：skewX(45deg);}}//方法二平行四边形

.skew-ex{width:200px;高度：40px；行高：40px；白颜色;位置：相对；&::之前{内容：'';位置：绝对；左：0；右：0；顶部：0；底部：0；背景：番茄；z-指数：-1；变换：skewX（-45deg）；}}毛玻璃效果

时间慢慢带走不该留下的，我很难记住你微笑的方式，你穿的衣服是谁的手忽然难过我知道我喜欢你却不知道未来在哪里因为我知道不管去哪里你都不会带我回忆点亮了你的笑容需要那么多努力才能改变麾。

//主要是main标签的伪元素。设置和bigbox一样的背景，然后让z-index级别比main小，这样word就在背景上了。需要注意的一件事是//在使用负z-index将子元素移动到其父元素下方时，如果父元素的父元素具有背景，则子元素将出现在它们的后面。glass-ex{宽度：500px;高度：400px；背景尺寸：封面；顶部边距：30px；显示：弹性；显示：-webkit-flex；证明内容：居中；对齐项目：居中；;背景：rgba（255、255、255、0.3）；字体大小：14px；行高：32px；显示：弹性；显示：-webkit-flex；证明内容：flex-start；;填料：2%；位置：相对；z-指数：9；溢出：隐藏；&::之前{内容：'';位置：绝对；左：0；顶部：0；底部：0；右：0；背景：url(../../static/img/chai.jpg)不重复；背景尺寸：封面；过滤器：模糊（10px）；z-索引：-1；边距：-15px；}}.glass-bg{位置：绝对；左：0；顶部：0；宽度：100%；高度：100%；背景：url(../../static/img/chai.jpg)不重复；背景尺寸：封面；}}效果如图。闪烁效果闪烁效果.blink-ex{color:#009a61;动画：1sblink-smooth6alternate;//缓动和闪烁动画：1sblink-smooth3steps(1);//钝性闪烁}@keyframesblink-smooth{50%{color:transparent;}}船舶背景图片移动船舶转场效果.panoramic{width:100%;高度：100%；背景：url(../../static/img/ship.jpg)不重复；背景大小：自动100%；文本缩进：-200%；动画：全景10s线性无限交替；动画播放状态：暂停；}.panoramic：hover，.panoramic：focus{animation-play-state：running；}@keyframespanoramic{to{background-position：100%0;}}效果如图，鼠标向上移动，船沿着圆形路径滚动的动画效果.path{宽度：300px；高度：300px；边框半径：50%；背景:#F2AE43;padding:10px;.avatar{width:40px;height:40px;border-radius:50%;transform-origin:50%150px;/*150px==路的半边*/background:tomato;display:inline-block;animation:spin6sinfinitelinear;>img{width:100%;height:100%;border-radius:50%;animation:inherit;animation-direction:reverse;}}}@keyframesspin{到{transform:rotate(1turn);}}效果如图

上一篇：前端面试日常3+1——第348天

下一篇：前端面试日常3+1——Day808

记得一些css3效果相关文章

最新推荐

猜你喜欢