首页 > 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> <!--规范,<style>可以编写css的代码,每一个声明,最好使用分号隔开 语法: 选择器{ 声明1; 声明2; 声明3; } --> <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--动画

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