Css3

首页 > TAG信息列表 > Css3

css3转换与动画

平面转换 transform 需要配合过渡使用transition，谁要过渡给谁加建议配合hover使用位移:translateX() translateY() translate(x,y) 旋转: rotate(deg) 缩放: scale(倍数) 组合写法: transform:translate() rotate() scale(); 更改轴原点 transform-origin:方位名词方

【H5/CSS3】旋转展开收缩菜单栏

地址链接视频链接： https://www.bilibili.com/video/BV1TK4y1Q78s github链接： https://github.com/Lavender-z/demo 如果上不了，就下个dev-sidecar代理效果代码注释 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <met

使用CSS3快速实现毛玻璃效果

使用CSS3实现毛玻璃效果并没有想象中那么难，我们只需要了解一个属性： backdrop-filter: blur(5px); 在使用该属性之前我们先要区分backdrop-filter与filter的区别。 filter：模糊内容 backdrop-filter:透过该层的底部元素模糊化因为backdrop-filter能使透过的元素模糊化，所以我们只

第2周 CSS3基础语法与盒模型

第一节 CSS3 基础入门　　1、CSS3 简介　　2、CSS3 书写的位置　　3、CSS3 书写的语法第二节 CSS3 选择器第三节文本与字体属性第四节盒模型

css3 弹性盒子

/* 使用弹性盒子布局 */ display: flex; /* 设置子元素在父元素排列方向 */ flex-direction: row; /* 子元素沿主轴对齐方式 */ /* justify-content: space-around; */ /* 定义子元素是否换行，默认不换行，如果装不开会缩小子元素的宽度，放到父元素中 */ flex-wrap: wrap; /* 定义子

面试题-什么叫优雅降级和渐进增强？

优雅降级和渐进增强印象中是随着 CSS3 流出来的一个概念。由于低级浏览器不支持 CSS3，但 CSS3 的效果又太优秀不忍放弃，所以在高级浏览中使用 CSS3 而低级浏览器只保证最基本的功能。关键的区别是他们所侧重的内容，以及这种不同造成的工作流程的差异优雅降级：一开始就构建完整

CSS3层叠样式表

/* *作者：呆萌老师 *☑csdn认证讲师 *☑51cto高级讲师 *☑腾讯课堂认证讲师 *☑网易云课堂认证讲师 *☑华为开发者学堂认证讲师 *☑爱奇艺千人名师计划成员 *在这里给大家分享技术、知识和生活 *各种干货，记得关注哦！ *vx：it_daimeng */ 　　 CSS是C

通过 css3 自定义、修改滚动条的样式

::-webkit-scrollbar { width: 4px !important; background-color: #012d58 !important; border-radius: 4px !important; } ::-webkit-scrollbar-thumb { border-radius: 4px !important; background-image: linear-gra

直播系统代码，几种CSS3常用动画效果和样式

直播系统代码，几种CSS3常用动画效果和样式一、360旋转修改rotate旋转度数，代码如下： * { transition:All 0.4s ease-in-out;}*:hover { transform:rotate(360deg);} 二、放大修改scale放大的值，代码如下： * { transition:All 0.4s ease-in-out;}*:hover {

css3隐藏滚动条样式效果

chrome 和Safari .element::-webkit-scrollbar { width: 0 } IE 10+ .element { -ms-overflow-style: none; } Firefox .element { overflow: -moz-scrollbars-none; } 公共class 在需要隐藏滚动条的div上追加一个hideScrollBar就可以了 .hideScrollBar::-webkit-scrollbar {

Css3 border-radius 实现圆弧三角形_圆弧正三角形

一、原理： border-radius 可以设置4个叫，8个切边的长度，控制圆角大小；实现方案如下：左上角、左下角小一点。右上角、右下角：x轴80%；y轴50%。二、实现圆角梯形 .block{ width: 100px; height: 100px; background-color: red; border-top-left-radius: 20px 20

css3 新增伪类有哪些

p:first-of-type 选择属于其中父元素的首个<p>元素 p:last-of-type 选择属于其父元素的最后一个<p>元素 p:nth-child(2) 选择属于其父元素的第二个子元素 p:nth-type-of(2)选择属于其父元素的第二个子元素 p。 :enabled :disabled 控制表单控件的禁用状态 :checked 单选框或复选

CSS3基础

一、CSS的发展历程从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而

css3 @page

<!doctype html> <html> <head> <meta charset="utf-8"> <title>print Geovin Du</title> <style type="text/css" media="screen"> /* https://www.w3.org/TR/css-page-3/ https://developer.mozi

Css3入门详解

一、Css基本语法 1.Html和Css没分开点击查看代码 <!DOCTYPE html> <html lang="en"> <head>  <meta charset=&q

CSS3 基础学习

CSS基础学习当前进度[P78] 参考资料视频链接：https://www.bilibili.com/video/BV14J4114768 菜鸟教程：https://www.runoob.com/css/css-tutorial.html 一、CSS简介 CSS的主要使用场景就是美化网页，布局页面的。 CSS是层叠样式表(Cascading Style Sheets)的简称有时我们也会称之为

前端CSS3阴影box-shadow用法

前端CSS3阴影box-shadow用法语法 box-shadow: h-shadow v-shadow blur spread color inset; 对应解释 box-shadow: 水平阴影（必须）垂直阴影（必须）模糊效果（可选）模糊距离（可选）阴影颜色（可选）内部阴影（可选，默认为外部阴影：outset，且不可设置为outset）; 上代码详细介绍点击查看代码 <!DOC

CSS3中有哪些新特性

新增选择器属性选择器结构伪类选择器伪元素选择器 2D转换：transform 位移：transform：translate（100px，100px）缩放：transform：scale（1，1）旋转：transform：rotate（45deg） 3D转换：transform 位移：transform：translate（100px，100px，100px）旋转：transform：rotate（0，0，1，45deg） 3D呈现：transform-style flat：子元

css3 自动变大变小缩放按钮

样式1： <style> #Jsubmit.btn_gdj_design { -webkit-animation: free_download1 3s linear alternate infinite; animation: free_download1 3s linear alternate infinite; } .btn-submit

【Web前端HTML5&CSS3】14-弹性盒简介

弹性盒简介 1、基本概念弹性盒 flex（弹性盒、伸缩盒）是css中的又一种布局手段，它主要用来代替浮动来完成页面的布局 flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变弹性容器要使用弹性盒，必须先将一个元素设置为弹性容器我们通过display 来设置弹性容器 displa

【Web前端HTML5&CSS3】12-过渡与动画

过渡与动画 1、过渡过渡（transition）通过过渡可以指定一个属性发生变化时的切换方式通过过渡可以创建一些非常好的效果，提升用户的体验属性值 transition-property：指定要执行过渡的属性多个属性间使用,隔开；如果所有属性都需要过渡，则使用all关键字；大部分属性都支持过渡效果；

【Web前端HTML5&CSS3】13-变形：平移、旋转与缩放

变形：平移、旋转与缩放变形就是指通过 css 来改变元素的形状或位置变形不会影响到页面的布局 transform用来设置元素的变形效果 1、平移 translateX() 沿着由方向平移 translateY() 沿着 y 轴方向平移 translateZ() 沿着 z 轴方向平移平移元素百分比是相对于自身计算的几

【Web前端HTML5&CSS3】08- 高度塌陷与BFC

高度塌陷与 BFC BFC：全称:Block Formatting Content;是一个与上下文无关的独立的渲染区域；（块级格式化上下文）是一种布局规则：内部的Box会在垂直方向，一个接一个地放置。 Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的mar

html2canvas 图片模糊，及对css3部分不支持

1、html2canvas会自动模糊背景，如果将图片设置成div的背景，会自动模糊。只需要将图片放在img标签中，就可以解决。同时可以设置增加分辨率，但是图片会有一个极限，到达清晰度的极限后，增加分辨率不会变得更清晰，只会让图片变得更大。实际情况酌情处理。 html2canvas(this.$refs.canvas

Css3--动画

注意这个持续时间是动画运行一次的时间；改变任意多的样式任意多的次数体现在：这个百分比是各个时间段的各个状态的意思