![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
CSS3
huangfuyk
自己应为之事,勿求他人;今日应为之事,勿待明日。
展开
-
JS、CSS鼠标滑过图片显示遮罩层和小眼睛(:hover::before、:hover::after、pointer-events)
做项目时遇到这样一个需求:鼠标滑过图片显示遮罩层和小眼睛,点击图片可放大预览,一般情况下我们会直接使用UI组件来实现,但是今天我要说的是用CSS实现。HTML代码如下(示例):<nz-image-group *ngFor="let img of gooddetail.certificate"> <div class="play-img-box"> <img class="play-img" nz-image width="80px" height="80px"原创 2021-08-23 18:27:47 · 1246 阅读 · 0 评论 -
使用H5中的video标签时,页面中间显示“暂停”图标;点击播放,图标消失;点击暂停,图标出现(play、pause、ended)
有时候我们在做项目的过程中会遇到这样的需求:使用H5中的video标签播放一个视频,并在视频的中心位置放置一个暂停的图标,点击后视频播放,图标消失;再次点击后,视频暂停,图标出现。想要的效果,例下:我们可以配合使用video标签的pause、play、ended方法进行实现:①因为是一个vue项目,先定义一个变量,暂且叫它videoIsPlay,默认为false,即视频暂停时状态;data () { return { videoIsPlay: false, }},②.原创 2021-07-23 09:17:26 · 8545 阅读 · 16 评论 -
css3 object-fit对图片进行剪切,保留原始比例、用来指定替换元素的内容应该如何适应到其使用的高度和宽度确定的框
在日常工作中经常会遇到图片列表展示,但是图片的大小又是千差万别。如果不加以控制,排版就会变得高低不平,但是如果给定长和宽,图片又会变形,用背景图片来处理又相对麻烦。于是找到了object-fit 该CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。object-fit 属性值及含义如下表所示:属性值含义contain被替换的内容将被缩放,以在填充元素的内容框时保持其宽高比。 整个对象在填充盒子的同时保留其长宽比,因此如果宽高比与框的宽高比不.原创 2021-05-10 17:34:28 · 311 阅读 · 1 评论 -
vue中下载图片、下载字符流图片,将图片链接转换成base64格式进行下载
1. 一般情况下,我们可以使用 a 标签进行图片的下载,但有时候只是页面的跳转,并没有进行下载,此时可以加一个download属性。 <a href="http://xxxx.xx.com:xx.jpg" target="_blank" download='xx.jpg'>2. 将图片链接转换成base64格式,再进行下载。HTML部分代码如下:// 参数为可选项<div @click="downloadImg('图片的地址', '图片的名称')">点击下载</d原创 2021-05-07 15:42:35 · 1423 阅读 · 2 评论 -
CSS3的动画及3D转换(animation、transform、rotate3d 、perspective等)【总结】
目录1. 动画① 创建② 属性③ 关键帧2. 3D① transform转换② rotate3d③ translate3d④ perspective⑤ transform-style1. 动画① 创建 @keyframes // 创建动画语法:@keyframes animationname {keyframes-selector {css-styles;}}keyframes-selector // 动画持续时间的百分比例:@keyframes myMove{ 0% {to原创 2020-07-01 20:26:20 · 2717 阅读 · 5 评论 -
浅谈:CSS3的渐变以及2D转换
目录CSS3渐变线性渐变径向渐变重复线性渐变重复径向渐变CSS3的2D转换transformrotate() 方法skew() 方法scale() 方法translate() 方法CSS3过渡transitionpointer-eventsbackface-visibilityCSS3渐变CSS3 Gradient 分为线性渐变(linear)和径向渐变(radial)。由于不同的渲染引擎实现...原创 2020-05-07 21:22:15 · 4573 阅读 · 25 评论 -
CSS3选择器 | 每个前端开发者必须要掌握的技术
目录属性选择符伪类选择符CSS3属性CSS3自适应属性选择符如果能够灵活运用属性选择器,目前为止需要依靠id或class名才能实现的样式 完全可以使用属性选择器来实现。E[att] {} : 选择具有att属性的E元素E[att="val"]{}: 选择具有att属性且属性值等于val的E元素E[att~="val"]{}:用于选取属性值中包含指定词汇的元素E[att|="val...原创 2020-05-06 19:20:29 · 6814 阅读 · 36 评论