CSS
CSS、CSS3相关
iChangebaobao
菜鸟的前端进击之路
展开
-
[CSS] CSS实现移动的三角边框箭头
CSS实现移动的三角边框 箭头设计稿长这样,交互是点击旁边的 Tab,三角边框移动到对应的位置,讲一下大概的实现,这里的三角边框我用的是两个三角形拼接而成的,直线是Tab-item 的 border-right1、先把直线弄好.tab-item { position: relative; display: flex; align-content: start; align-items: center; cursor: pointer; border-原创 2022-05-18 17:32:21 · 505 阅读 · 0 评论 -
[CSS] CSS实现鼠标移入图片放大效果
CSS实现鼠标移入图片放大效果一般在官网比较常见这种动效,当鼠标移入图片时可以看到视觉放大的效果,这里用到一个css属性 object-fit: cover;object-fit 属性object-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。您可以通过使用 object-position 属性来切换被替换元素的内容对象在元素框内的对齐方式。 .activity-content-img{ width: 100%; height: 100%;原创 2022-05-18 17:11:14 · 10363 阅读 · 0 评论 -
[CSS] CSS 实现卡片翻转效果
css.App { width: 200px; height: 400px; position: relative; transform-style: preserve-3d; transition: transform 1s ease-in-out;}.front,.back { width: 200px; height: 400px; left: 0; top: 0; position: absolute; backface-visibility: h转载 2022-01-22 11:23:58 · 827 阅读 · 0 评论 -
[CSS] CSS实现彩色动效按钮
<!DOCTYPE html><html><head><title>Crayon Animate</title><style type="text/css">body { background-color: #747474;}.yam-don-button { width: 300px; margin-top: 100px!important;}.yam-don-button { pos转载 2021-11-02 14:14:07 · 601 阅读 · 0 评论 -
[CSS] CSS设置文字两端对齐(表单label常用)
CSS设置文字两端对齐(表单label常用)text-align-last: justify;原创 2021-05-20 17:13:46 · 704 阅读 · 0 评论 -
[CSS] 让背景图片、背景颜色根据内容自适应
一、让背景图片根据内容自适应.container{ width: 100vw; min-height: 100vh; background-image: url('URL'); background-size: cover; /* background-attachment: fixed;定义背景图片随滚动轴的移动方式 */ background-repeat: repeat-y; padding-bottom: 30rpx;}.conte原创 2021-04-15 18:01:01 · 1432 阅读 · 0 评论 -
[CSS]Grid网格布局学习总结
Grid网格布局目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页分为一个个网格,然后利用这些网格组合做出各种各样的布局。一、Grid 与 FlexGrid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置。但是,它们也存在重大区别。Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一维布局。Grid 布局则是将容器划分成"行"和"列",产生单元格,然后指定"项目所在"的单元格,可以看作是二维布局。Grid 布局远比 Flex转载 2021-02-07 17:30:03 · 680 阅读 · 4 评论 -
[CSS] 用css实现气泡框效果
1、用css实现气泡框效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>用css实现气泡框效果</title> <style> .原创 2020-10-26 09:30:24 · 672 阅读 · 0 评论 -
[CSS] 利用CSS3伪类制作上传按钮
html <div class="ille-upload"> </div>css.ille-upload{ width: 100px; height: 100px; border: 1px solid #eee; margin-top: 40px; margin-left: 16px; position: relative;}.ille-upload:before{ content: " "; positio原创 2020-05-28 17:27:39 · 213 阅读 · 0 评论 -
[CSS]纯css实现轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纯css实现轮播&l...转载 2020-04-02 17:21:13 · 212 阅读 · 0 评论 -
[CSS] CSS 属性:touch-action
在项目中发现 ,H5页面的横向滚动失效。原因:css中设定了*{touch-action:none }解决方法:移除该样式。touch-action:none // 当触控事件发生在元素上是时,不进行任何操作touch-action:auto // 当触控事件发生在元素上时,由浏览器来觉得进行哪些操作。touch-action:pan-x // 启用单指水...原创 2020-04-02 17:06:58 · 1384 阅读 · 0 评论 -
[CSS] CS3实现图标循环旋转
.icon{ -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite;}@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); transition:...原创 2020-02-20 21:14:23 · 430 阅读 · 0 评论 -
[移动端开发]移动端开发公共样式common.css
common.css/*可选*//*CSS3盒子模型*/box-sizing: border-box;-webkit-box-sizing: border-box;/*点击高亮我们需要清除清除 设置为transparent 完成透明*/-webkit-tap-highlight-color: transparent;/*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框...原创 2020-02-11 22:30:13 · 777 阅读 · 0 评论 -
[CSS]sass/scss 语法
简介:Sass并不是其他的什么,而是CSS预处理器,预处理器就是定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这些语言进行编码工作。Sass 和 SCSS 有什么区别?1.文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名2.语法书写方式不同,Sa...原创 2019-12-16 10:19:21 · 484 阅读 · 0 评论 -
[CSS]解决安卓和ios ,样式或其他兼容问题
input \button 样式问题 , ios用的样式不管用。解决方法:在css样式里面加.input{ -webkit-appearance: none;/*解决ios样式问题*/} ios手机点击输入框页面放大,输入框失焦后,页面不复原,仍保持放大状态解决方法:禁止页面缩放 <meta content="yes" name="apple-mobile-web-a...原创 2019-11-08 11:29:37 · 12809 阅读 · 0 评论 -
[CSS]Flex布局制作搜索框Demo
HTML<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equi...原创 2019-11-07 16:17:35 · 778 阅读 · 0 评论 -
[CSS]阿里图标的使用,如何在placeholder里面加阿里图标
1.在html中使用阿里图标第一种 Unicode码(推荐):<link rel="stylesheet" href="css/iconfont.css"><span class="iconfont">3</span>第二种 font-class(推荐):<link rel="stylesheet" href="./iconf...原创 2019-11-06 17:43:06 · 1680 阅读 · 0 评论 -
[CSS]好看的渐变色网站
https://webkul.github.io/coolhue/https://uigradients.com/#Orcahttps://webgradients.com/原创 2019-10-16 12:20:43 · 11813 阅读 · 0 评论 -
[CSS]中奇数选择器与偶数选择器,一句代码怎么实现?
p标签下的奇数行与偶数行p:nth-child(odd){} //奇数行p:nth-child(even){} //偶数行:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。转载自https://blog.csdn.net/hu_lanlan/article/details/78455911,侵删...转载 2019-10-10 16:37:56 · 644 阅读 · 0 评论 -
[CSS]控制图片<img src=" ">没有时隐藏
img[src=""],img:not([src]) { display: none; }原创 2019-08-29 11:23:26 · 2488 阅读 · 0 评论 -
[CSS] Flex弹性布局学习总结
flex 快速弹性布局其主要思想是给予容器控制内部元素高度和宽度的能力一、容器的属性flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content1.1 flex-directionflex-direction:row | row-reverse | column | column-rever...转载 2019-08-20 09:38:20 · 193 阅读 · 0 评论 -
[CSS]CSS实现表单 input 变select的倒三角
css:.triangle_border_down { width: 0; height: 0; border-width: 5px 5px 0; border-style: solid; border-color: #333 transparent transparent; position: relative; float: right...原创 2019-07-29 09:58:30 · 1190 阅读 · 0 评论 -
[CSS]CSS实现自定义标题栏返回按钮
html<div class="title"> <a href="#" onclick="javascript:history.back(-1);"> <div class="arrow-box nav-left"> 返回 </div> </a> ...原创 2019-07-02 15:29:09 · 2226 阅读 · 0 评论 -
[CSS]使用@media screen实现网页适应不同的分辨率
@media screen使用media query的使用方法一、判断媒体类型,引用不同的样式表通过设定屏幕的判断条件,调用对应的css文件。该实例多用于整页面不同风格的css调用与选取,使用该方法可能需要为一个页面制作多份个css文件。二、判断媒体类型,执行不同的css样式属性@media screen and (max-width:240px){.box{width:200px;...转载 2019-10-12 08:33:53 · 652 阅读 · 0 评论