CSS3
关注
分享
扫一扫
前端重点css3
古塔前端
一个自学者，对计算机有些浓厚得兴趣，热爱学习编程，做一个"全干工程师"。
展开
-
CSS3 border-radius 属性
border-radius介绍：border-radius可以给块级元素和行内块元素设置圆角,属性的值可以写像素、百分比、简写像素,要想border-radius属性生效,标签必须有大小。案例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initia原创 2020-11-10 12:49:52 · 1127 阅读 · 0 评论 -
01---Css3属性选择器
一个简单得案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> button {原创 2020-06-17 20:40:22 · 128 阅读 · 0 评论 -
02---Css3结构伪类选择器
结构伪类选择器，可以根据元素在文档中所处的位置，来动态选择元素，从而减少HTML文档对ID或类的依赖，有助于保持代码干净整洁。结构伪类选择器选择器作用E:first-child匹配父元素中第一个子元素EE:last-child匹配父元素中最好一个子元素EE:nth-child(n)匹配父元素中第n个子元素EE:first-of-type指定类型E得第一个E:last-of-type指定类型E得最好一个E:nth-of-type()指定类型E得原创 2020-06-17 22:13:02 · 116 阅读 · 0 评论 -
03---Css3伪元素选择器
伪元素选择器选择器作用::before在元素内部前面插入内容::after在元素内部后面插入内容注意:before和after必须有conttent属性before在内容得前面,after在内容得后面before和after创建一个元素,但是属于行内元素因为在dom中看不见创建得元素,所以称之为伪元素伪元素和标签选择器得权重 都为1一个简单得案例<!DOCTYPE html><html lang="en"><head原创 2020-06-17 22:58:22 · 164 阅读 · 0 评论 -
04---2D转换(移动、旋转、缩小)
2D转换之移动translate(1)、transform: translate(x,y)作用: 水平和垂直移动多少距离参数: x代表x轴 单位px ; y代表y轴 单位px注意:如果translate只给一个参数,那么移动得是X轴，y轴不变(2)、transform: translateX(x)作用: 水平移动x像素参数: x代表水平移动多少距离,单位x。(3)、transform: translateY(y)作用: 垂直移动y像素参数: y代表垂直移动多少距离,单位y。重点:原创 2020-06-19 20:40:52 · 263 阅读 · 0 评论 -
05---Css3的3D动画
一、Css3动画的基本使用先定义动画使用(调用动画) /*1.定义动画*/ @keyframes 动画名称 { /*开始状态*/ 0% { /*动画动作*/ transform: translateX(0); } /*结束状态*/ 100% { transform: translateX(1000px); } }/*2.使用动画*/div { width: 100px; height: 100px; background-原创 2020-06-20 09:08:15 · 115 阅读 · 0 评论 -
06-CSS3透视
什么是透视我们写的css2D都是平面效果,无法做到立体的效果，如果想要做立体的效果，我们就需要z轴,直接添加z轴是没有效果的,需要在元素的父级元素上添加透视效果。一个简单的透视代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scal原创 2020-06-21 21:30:58 · 397 阅读 · 0 评论