2020年04月_北辰Beichen

原创 html+css瞬间黑暗模式

最近微信也逃脱不了黑暗时代的到来，网页也很多都做了黑暗模式的兼容和主题。如果我们在做的一个网站想瞬间实现黑暗模式可以怎么实现呢？其实有一个很快的方式，我们可以使用invert和hue-rotate两个CSS3过滤器来实现。filter: invert() — 是从0到1的刻度，1是从白变黑。filter: hue-rotate() — 用于改变你元素的颜色，同时或多或少保持原本相同的色系。...

2020-04-30 11:01:35 2598

原创鼠标悬停放大图片特效

鼠标悬停放大图片鼠标悬停放大图片是个比较吸引人的特效。废话我就不多说了，直接上结局办法。body中<div class="img-wrapper"> <img src="https://img-blog.csdnimg.cn/2020032122230564.png"/></div>style中.img-wrapper { width...

2020-04-30 10:53:12 2912

原创 HTML巩固基础知识

HTML基础知识HTML的历史：HTML,XHTMLHTML的全局属性:全局标准属性，全局事件属性HTML元素：主体元素、无语义元素、标题元素、段落元素、注解元素、格式化元素、图片元素、超链接元素、列表元素、表格元素、表单元素、框架元素。网页开发者编写网页文件存储到web服务器，再由web服务器传送到各大浏览器，各大浏览器解析呈现网页给访问者。标记语言，是一种将文本以及与文本相关...

2020-04-28 10:30:23 210

css须知 background-clip属性[background-clip属性](https://www.w3school.com.cn/cssref/pr_background-clip.asp) rgba()和hsla()的区别[rgba()和hsla()的区别](https://blog.csdn.net/qq_34567015/article/details/81359226?ut...

2020-04-27 09:40:14 3105

原创轮播图出现层叠且有遮罩层，类似于网易云音乐banner

不一样的轮播图好久没更新了，今天冒泡更新一个我昨天晚上遇到的问题，没错，只要我再做项目就必定会有bug，话不多说，直接上问题，看看我是多么chun就为了实现这个效果，我死磕，磕了整整一个上午。可算是把它给整出来了，那是相当不容易。生活不易，小辰叹气~接下来到了关键性的时刻了css.img{ width: 100%; height: 300px;}.whole{ width...

2020-04-23 14:38:51 681

原创 v-html后数据的显示隐藏

真的我都不想吐槽我自己，今天做我们公司自己的产品，叫啥名我就先不说了，我现在要吐槽的是。我再拿到后台数据接口的时候用v-html表示出来的，但是项目需求太恶心人了，他竟然要对产生的数据进行部分显示隐藏。巧了，我tm又不会，整了半天也没有弄好。最后还是请教老同桌帮我解决的。具体步骤如下：这是我同桌给我的demo<template> <div> <div...

2020-04-16 19:45:37 532

原创 css3 文字渐变

之前一直没有遇到过让文字渐变，这次也算是遇到了，没办法啊，又是一个不知道的知识点。这么久了，学到最多的也算是有问题找百度，度娘是真的好啊。得嘞，文字渐变搞起代码示例<view class="demo">css字体文字渐变,css字体文字渐变</view>.demo { width: 500px; height: 200px; margin: 50px...

2020-04-13 10:44:28 581

原创 css 设置背景渐变

渣渣辰又来了，这次也不例外，同样是带着问题过来的，真的是人生处处是bug，这不。又来了。。。。。。写了这么久的样式我竟然不知道如何设置背景渐变，我的存在真的可能是个意外，都懒得吐槽我自己了。来啊，大刑伺候~to top：颜色由下到上渐变background:-webkit-linear-gradient(to top, red, blue); background:linear-grad...

2020-04-13 10:31:15 262

原创 CSS3动画效果属性

哎呦我去，这辈子我可没想到我会成为一名程序员，尽管是一个不入流的渣渣程序员，但那又怎样，继续努力呗。瞅瞅我这次有遇到了什么麻烦，就一个项目那简直是一步一坑，绝了。css3动画不用我说了吧，大家都熟悉，嗯，你们都熟悉，就我啥也不懂。c3动画效果属性，算了不说废话了，直接上解决方法。transform: translate(1px,1px);/*位置移动*/transform: scale(...

2020-04-13 10:08:50 222

beichenxiansen的博客