1.图片效果(不能上传视频,只能截图了) 2.css代码 1 <template>2 <div calss="testImg">3 <div class="roundImg"></div>4 </div>5 </template>6 7 <style>8 .roundImg{9 width: 66%; 10 height: 66%; 11 position: absolute; 12 top: 22%; 13 left: 2%; 14 z-index: 1; 15 background:url("../../../assets/images/danger/dangerBg2.svg") no-repeat center center; 16 ...
效果:650) this.width=650;" src="/upload/getfiles/default/2022/11/9/20221109023430742.jpg" title="QQ截图20160722141632.png" /><!DOCTYPE html><html><head><title></title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">*{margin: 0px;padding: 0px}.nav{background-color: #eee;width: 600px;height: 40px;margin: 0 auto;}.nav-ul{list-style: none;}.nav-ul li{float: ...
具体代码如下 button{position: relative; } button:active::before {display: block;content: ‘‘;position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;background: rgba(0, 0, 0, 5%) } 如果是自定义DIV也是可以用同样方法的，可以改为 .btn{position: relative;}/**这里的active为选中的状态，可以根据情况修改**/.btn:active::before {display: block;content: ‘‘;position: absolute;top: 0px;left: 0px;widt...
在最开始思考这个小应用的时候，我想当然的认为，这可以跟钟表一样，只要获取转动的角度就好了，当然实际上我也是如此实现的，但是中间还是有些地方是我所没有想到的，然后我就又学到了好多东西...先来考虑下，如果想要实现一双可以跟随鼠标转动的眼睛，我们需要做到哪些？1、用样式描绘一双眼睛，额，其实图片也可以；2、获取鼠标所在位置；3、根据鼠标所在位置，确定眼睛所在的div偏转的角度；想起来确实很容易，只要实现以上三点...
CSS实现三角形和梯形主要是依靠border是梯形的特性来做的，有点像相框的那种感觉。CSS实现三角形：<div id="test1"></div><style> #test1{ width: 50px; height: 50px; background: purple; border-top: 50px solid red; border-bottom: 50px solid green; border-left: 50px solid blue; border-right: 50px solid yellow; margin:0 auto; }</style> 原文：https:...
/* 例 1: 默认值 */ background-position: 0 0; /* 元素的左上角 *//* 例 2: 把图片向右移动 */ background-position: 75px 0; /* 例 3: 把图片向左移动 */ background-position: -75px 0; /* 例 4: 把图片向下移动 */ background-position: 0 100px; 参考：http://www.bkjia.com/CSSjc/898331.html原文：http://www.cnblogs.com/EasonJim/p/6198457.html
CSS顶部固定功能，有空的时候研究了一下CSS的定位功能，做了这个大家熟悉的顶部固定功能，鼠标移上去顶部会消失，并可判断浏览器是否支持audio元素！顶部元素在时间控制下也可自动消失。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; char...
webpack4 单独抽离打包 css 的新实现前言之前我们使用的打包 css 无非两种方式：① 将 css 代码打包进 入口 js 文件中；② 使用第三方插件(extract-text-webpack-plugin)实现【注意，该插件在 webpack4 中已经不推荐使用，而且会出现各种莫名其妙的 bug】正是基于对以上两种方式缺点的思考，结合我的实际使用过程，我认为以后我们应该完全摒弃掉上述两种方式，这里推荐一种一种新的实现方式：file-loaderfile-loader我先给个 file-...
单个标签实现分隔线.demo_line_01{padding: 0 20px 0;margin: 20px 0;line-height: 1px;border-left: 200px solid #ddd;border-right: 200px solid #ddd;text-align: center; }优点：代码简洁背景色实现分隔线.demo_line_02{height: 1px;border-top: 1px solid #ddd;text-align: center; } .demo_line_02 span{position: relative;top: -8px;background: #fff;padding: 0 20px; }优点：代码简洁，可自适应宽度inline-block实现分隔...
<input type="checkbox" id="checkAll" name="checkAll"/><label for=‘‘></label>input[type=‘checkbox‘] { left: 0; top: 0; width: 20px; height: 20px; opacity: 0; } label { position: absolute; left: 30px; top: 0; height: 20px; line-height: 20px; } label:before { content: ‘‘; position: absolute; left: -20px; top: 20px; width: 25px; height: 25px; border: 1px solid #ddd; border-radius: 50%; transiti...
方法一：给html、body都设置100%的高度，确定body下内容设置min-height有效，然后设置主体部分min-height为100%，此时若没有header、footer则刚好完美占满全屏（参考《div绝对居中、宽高自适应、多栏宽度自适应》），但是有了这两个，只能另寻他路，由于高版本浏览器对box-sizing的支持，我们可以在100%的高度中通过padding给header、footer空出两部分空白区域，再通过给header设置等同于自身高度的负值margin-bottom，给footer设置...
1overflow: hidden; 2display: -webkit-box; 3-webkit-line-clamp: 2; 4-webkit-box-orient: vertical;四行代码完美解决文字内容过多溢出显示..原文：https://www.cnblogs.com/crazyWang/p/13162859.html
界面 html <div>工作状态：</div><div class="button r" id="button-10"><input type="checkbox"class="checkbox"><div class="knobs"><span>找工中</span></div><div class="layer"></div></div> css代码 .button-cover {height: 100px;margin: 20px;background-color: #fff;box-shadow: 0 10px 20px -8px #c5d6d6;border-radius: 4px;}.button-cover:before {counter-increment: button-counter;content: counter(button-c...
1.绝对定位居中（Absolute Centering）技术 我们经常用margin:0 auto;来实现水平居中，而一直认为margin:auto;不能实现垂直居中......实际上，实现垂直居中仅需要声明元素高度和下面的CSS:.Absolute-Center {margin : auto ;position : absolute ; left : 0 ; right : 0 ; top : 0; bottom: 0; }优点： 1.支持跨浏览器，包括IE8-IE10； 2.无需其他特殊标记，CSS代码量少； 3.支持百分比%属性值和min-/max属性...
CSS中首字母大写怎么实现?日常生活中需求方对英文的要求比较多，有的时候需要让英文单词或拼音首个字母大写;有的时候需要让全文中英文单词全大写或小写。这时候我们就需要text-transform属性了。好了废话不多说，直接看例子吧。 CSS代码： 复制代码代码如下:/*首字母大写*/ .a {text-transform:capitalize;} /*全都是大写*/ .b {text-transform:uppercase;} /*全都是小写*/ .c {text-transform:lowercase;} HTML代码： 复制代码代码...