CSS3
关注
分享
扫一扫
马优晨
生活中的打击和挫折远比想象的更多，有时灾难又会让你的一切努力白费，也许明天我们就会死去，但如果我们还活着，在面对着种种不公和无奈过后，“明天的明天的明天，你是否会依然爱着这个世界。” 我想我会.......................
展开
-
网格布局(大练习)
最近对网格布局研究了一下，写了一个简单的demo。原创 2023-12-29 17:34:37 · 611 阅读 · 0 评论 -
前端统一样式的方案
一个APP或者小程序如果字体，按钮等样式需要统一配置，如何实现？就可以实现快速改变全局的样式！如上述代码所示，先引入。引入默认文件进行使用。原创 2023-02-15 16:50:10 · 634 阅读 · 0 评论 -
媒体查询media的3种引入方式
利用@media引入在<style>...</style>标签里使用@media来实现媒体查询<style> @media (min-device-width: 300px) and (max-device-width: 500px) { #box { width: 100px; height: 100px; background-color: cadetblue; } }原创 2022-04-09 19:13:28 · 694 阅读 · 0 评论 -
CSS3动画---移动端上下固定高度，中间自适应
问题描述：移动端，手机显示界面，需要头部高度10vh,底部高度10vh,中间的高度自适应；效果展示：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document原创 2021-04-30 17:30:39 · 686 阅读 · 4 评论 -
flex平均分布换行后自动对齐
目的效果：如何可以使用flex布局 进行平均分布，又可以换行呢？我最开始是这样做的： display: flex; display: -webkit-flex; justify-content: space-between; flex-direction: row; flex-wrap: wrap;效果：如果我多添加几个空白的html是不是就搞定了？ .bt_classify_name_empty{ margin: 5px;原创 2021-03-16 11:38:31 · 3226 阅读 · 1 评论 -
动态高度过渡动画
动态高度过渡动画先看一个demo本质想的想法是通过给元素切换它的.up，.down类，让它实现展开、合上的动画{ height: unset; transition: all 0.3s linear; will-change: height; &.up { height: 0; } &.down { height: unset; }}很奇怪，明明给height属性设置了...原创 2021-02-01 12:16:40 · 1771 阅读 · 0 评论 -
css设置全屏轮播
配置全屏图片HTML <div className="listImg" style={{ background: `url(${item.img}) no-repeat` }}>CSS .listImg { background-size: cover !important; height: 100%; width: 100%; position: absolute; }原创 2021-01-28 14:21:50 · 1121 阅读 · 1 评论 -
CSS磨砂效果
几个样式效果（1） 磨砂标签 background-color: rgba(28, 28, 28, 0.45); font-size: 12px; display: inline-block; color: rgba(255, 255, 255, 0.85); margin-right: 8px; backdrop-filter: blur(10px); // 磨砂效果 （2）渐变文字颜色 .caseChooseLabel{ backgr原创 2021-01-18 11:43:17 · 1545 阅读 · 0 评论 -
js制作返回顶部
页面返回顶部有很多漂亮的形式，今天这里分享一个返回顶部的两个小动画。效果一：效果而：组件引入： <goTop></goTop> data() { return { test:”777 } }, components: {goTop}组件包含两个文件GoToTop.js 和goTop.vuegoTop.vue<template> <div class="goTopBT"> <d原创 2020-06-22 19:12:47 · 870 阅读 · 0 评论 -
css制作按钮按下去效果
CSS.login { cursor: pointer;}.login:active { position: relative; top: 8px; cursor: pointer;}效果原创 2020-06-05 14:07:45 · 4812 阅读 · 0 评论 -
项目中的动画实例
代码实现：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, use.原创 2020-05-26 09:40:23 · 410 阅读 · 0 评论 -
video 属性和事件用法大全
（1） video属性<!-- video 不支持 IE8及以下版本浏览器，支持三种视频格式：MP4，WebM 和 Ogg --> <video src="test.mp4" controls width="400" height="300"></video> <!-- 禁止下载 --> <video src="test.mp4" controls controlslist="nodownload" width="400" height=转载 2020-05-21 09:48:07 · 1698 阅读 · 2 评论 -
鼠标经过图片抖动效果
（1）全部图片抖动img:hover{ animation: tada 1s .2s ease both; -moz-animation: tada 1s .2s ease both;}@keyframes tada{0%{-webkit-transform:scale(1);}10%, 20%{-webkit-transform:scale(0.9) rotate(-3deg);}30%, 50%, 70%, 90%{-webkit-transform:scale(1.1) ro转载 2020-05-18 23:09:26 · 1106 阅读 · 1 评论 -
hover时候缓慢切换两张图片
效果：hover的时候想让两张图片翻转的时候速度慢一点，而不是瞬间变成另一张图片，我们可以采用淡入淡出的效果。实例：<!DOCTYPE html><html><head> <style> #hover { position: relative; margin: 0 auto; } #hover img { positi原创 2020-05-13 13:52:55 · 1948 阅读 · 0 评论 -
table实现表头固定 内容滚动
效果图代码实现部分：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2020-04-29 09:29:32 · 3963 阅读 · 0 评论 -
tab表格去掉边框
Insert title here 姓名 年龄 籍贯 出生年月 学历 外语程度 111 222 333 444 555 666 11122 222111 333444 444555 555555 666777 ...原创 2020-04-24 19:22:59 · 1161 阅读 · 0 评论 -
PC端设置每行固定三个元素多余换行
如上图所示，在PC端，每行三个元素，多余的换行。HTML <!-- 设置每行3个元素 --> <div class="test-wrap"> <ul class="cf more_box experience" id="experience"> <li><img src="https://www...原创 2020-03-18 18:22:46 · 2855 阅读 · 0 评论 -
鼠标经过替换背景和文字
鼠标经过的时候替换背景和文案（1）准备一张图片图片地址：https://www.csgo.com.cn/data/images/e1.jpg(2)代码部分HTML <!-- 测试鼠标hover替换背景图片 --> <div class="entrance"> <a href="charts.html" class="e1">...原创 2020-04-16 17:23:00 · 1012 阅读 · 0 评论 -
css动画集合实例
以前总觉得自己在css动画方面确实练习的很少，现在总结一下。写一些效果保存一下，方便以后查询：效果大概预览：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device...原创 2020-03-17 16:14:35 · 649 阅读 · 0 评论 -
css快速引入字体文件
代码：<!DOCTYPE html><html><head><style> @font-face { font-family: myFirstFont; src: url('/example/css3/Sansation_Light.ttf') ,url('/example/css3/Sansation_Light.eot...原创 2020-03-17 14:26:18 · 2343 阅读 · 0 评论 -
CSS绘制放大缩小关闭按钮
如上图所示，使用CSS 绘制上述三个按钮：<template> <div class="windowAction"> <button class="min">缩小</button> <button class="fullpage">放大</button> <button class="cl...原创 2020-01-19 10:29:31 · 1504 阅读 · 0 评论 -
hover一个div展示另一个div
hover一个div展示另一个div效果图：hover前：hover后：代码：<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8" /> <title>CSS Test Page</title> <styl...原创 2020-01-17 11:33:38 · 7411 阅读 · 1 评论 -
css设置遮罩
如下，在最外层的div上面加上下面的css即可产生遮罩效果<div class="aaa"></div>.aaa ::before { content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; background-color: rgb...原创 2020-01-15 15:32:07 · 1316 阅读 · 0 评论 -
css自定义滚动条样式
基本属性::-webkit-scrollbar ：滚动条整体部分，其中的属性有width,height,background,border等。::-webkit-scrollbar-button ：滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。::-webkit-scrollbar-track ：外层轨道。可以用display:none让其...原创 2020-01-15 15:22:36 · 424 阅读 · 0 评论 -
css3画半圆
css3画半圆de方法（1）效果：（2）代码：<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...转载 2019-12-09 15:21:10 · 492 阅读 · 0 评论 -
两个或者多个图片上下之间有空隙
img { outline-width:0px; vertical-align:top; }原创 2019-08-30 19:59:54 · 2326 阅读 · 0 评论 -
CSS优化
一、 内联首屏关键CSS性能优化中有一个重要的指标——首次有效绘制（First Meaningful Paint，简称FMP）即指页面的首要内容（primary content）出现在屏幕上的时间。内联首屏关键CSS优点： 将CSS直接内联到HTML文档中能使CSS更快速地下载。而使用外部CSS文件时，需要在HTML文档下载完成后才知道所要引用的CSS文件，然后才下载它们。内联首屏...转载 2018-08-01 17:44:03 · 798 阅读 · 0 评论 -
font-size:100%理解
font-size是设置字体的属性常见设置字体大小有 px, rem,em 但是有一种设置就是设置 font-size为百分比。font-size:100%; 设置字体属性为默认大小，是相对于浏览器默认字体大小或继承body设定的字体大小来说的。 例如：body{ font-size:12px;}div{ font-size:100%; //这个div标签的字体大...原创 2018-06-04 18:04:23 · 14469 阅读 · 2 评论 -
常用居中的15种方法实例
1-水平居中内联元素水平居中块级元素水平居中多块级元素水平居中 (1) 利用inline-block (2) 利用display: flex2-垂直居中单行内联(inline-)元素垂直居中多行元素垂直居中 (1)利用表布局（table） (2)利用flex布局（flex）块级元素垂直居中 (1)固定高度的块级元素 (2)未知高度的块级元素3-水...原创 2018-03-26 11:49:44 · 548 阅读 · 0 评论 -
遍历一个数据去掉最后一个元素的样式
这是我们常见的一个问题： 如图所示我们遍历了一个数组或者对象，给每个元素加了一个border，结果最后一个元素也有border。但是实际上。我们是需要去掉这个最下面元素的边框的。实现的效果应该是这样子的，最下面的元素没有边框。这里我写了一个demo，大家可以参考一下：<!DOCTYPE html><html lang="en"><h...原创 2018-03-31 18:46:12 · 6483 阅读 · 0 评论 -
让边框线变细
常见的边框线 使用1px 但是 实际效果是显示的很宽，在苹果设备上 1px 会变成2px ,如果想要border变细，常用最简单的方法： border: solid #eee thin; 效果手机大小：放大以后效果：...原创 2018-03-31 17:32:21 · 6678 阅读 · 0 评论 -
css文本样式处理
这里通过一些实例来演示一下，CSS3 对于文本的属性样式~文本属性包括：代码：<!DOCTYPE html><html><head><title>文字样式</title><style> .newspaper { -moz-column-count:3...原创 2018-03-01 16:26:51 · 1516 阅读 · 0 评论 -
CSS改变插入光标颜色
CSS改变插入光标颜色常用两种方法：第一种：caret-color: red; input { color: #333; caret-color: red; }caret-color属性目前Chrome和Firefox基本上可以放心使用，但是Safari以及IE浏览器则还需要等待一些时日。原创 2018-01-29 10:45:26 · 1678 阅读 · 0 评论 -
使用HTML5 details,summary实现，展开，下拉，树的效果
1-展开效果HTML details class="details-2" open> summary tabindex="-1">a href="javascript:">这是示例a>summary> content>本案例隐藏原生小三角，使用自定义小三角。content>转载 2018-01-29 15:26:22 · 8612 阅读 · 0 评论 -
border-image用法
这里通过三个实例讲解一下border-image:原图是这样子的：接下来我们使用border-image来处理这个图片为边框图：第一种： 代码：<div style=" background:#F4FFFA; width:100%; height:210px; border:41px solid #ddd;原创 2017-12-22 11:24:01 · 9259 阅读 · 0 评论 -
手机常用分页加载loading框
HTML这里是一个常用的样式，可以直接将HTML和ＣＳＳ复制，看看效果。 -webkit-animation这里兼容谷歌浏览器。<div class="up-maps-loading" v-show="lock"> <img src="/imgs/loading.png"> 正在加载</div>CSS/—–加载动画—–/.up-maps-loading{ margin:原创 2017-05-04 20:27:38 · 2480 阅读 · 2 评论 -
CSS模块化方案分类
CSS模块化方案分类：1、命名约定规范化CSS的解决方案如：BEM、OOCSS、AMCSS、SMACSS2、CSS in JS彻底抛弃 CSS，用 JavaScript 写 CSS 规则，styled-components 就是其中代表。3、使用JS 来管理样式模块使用JS编译原生的CSS文件，使其具备模块化的能力，代表是 CSS Modules。但是这些模块化方案都是...原创 2018-08-02 16:15:29 · 1088 阅读 · 0 评论 -
移动端适配常用解决方案
几个概念：设备独立像素（dip）、设备像素比（dpr）、设备像素设备像素： 即物理像素，指设备能控制显示的最小单位，就是显示屏上一个个的像素点。设备独立像素（dip）: 也称为逻辑像素、密度独立像素，指独立于设备的用于逻辑上衡量像素的单位。 (重点：这个是我们在开发中使用的像素)设备像素比（dpr）: 指的是物理像素与设备独立像素的比例。viewport: viewprot ...原创 2018-10-12 11:34:57 · 3275 阅读 · 2 评论 -
多个div并排居中显示
需要多个div并排居中显示，这里我将两个方法1. 使用flexHTML<div class="div0"> <div class="div1">asdasd</div> <div class="div2">asdasd</div></div>CSS.div0 { display:flex; j...原创 2019-08-09 09:48:38 · 13365 阅读 · 0 评论 -
CSS 文字显示在图片的中间
<style type="css/text"> /*如果支持CSS3的话,不支持的话就用js计算left和top的值*/ .vcenter { position:absolute; left:50%; top:50%; translateX(-50%); translateY(-50%) } &...原创 2019-08-06 18:38:21 · 15938 阅读 · 0 评论