![](https://img-blog.csdnimg.cn/20201116210929537.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
CSS3.0
CSS3.0知识点以及实例总结
mufengs16
努力向上、自由生长。
展开
-
CSS3综合实例三(仿天猫专题栏过渡效果)
仿天猫专题栏过渡效果实例需求鼠标移入商品栏时,增加透明度鼠标移入商品栏时,商品主图向左偏移几许,缓缓过渡实例详情<!DOCTYPE html><html> <head> <title>仿天猫专题过渡效果</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width initial-sca原创 2020-11-16 21:50:08 · 149 阅读 · 0 评论 -
CSS3综合实例二 (旧样式,仿天猫商品过渡效果)
旧样式,仿天猫商品过渡效果实例需求商品被包裹在圆形的底环下,为此要制作一个底环当鼠标移入商品栏时,边距凸显红色当鼠标移入商品栏时,图片变得透明几许当鼠标移入商品栏时,商品主图过渡比例扩大,突出底环实例详情<!DOCTYPE html><html> <head> <title>旧样式,仿天猫商品过渡效果</title> <meta charset="utf-8"/> <meta nam原创 2020-11-16 21:48:23 · 200 阅读 · 0 评论 -
CSS3综合实例一(制作鼠标悬停,画面比例放大的效果)
制作鼠标悬停,画面比例放大的效果实例需求鼠标移入,画面扩大一定比例,移出则回归原态画面扩大的过程要平滑进行实例展示<!DOCTYPE html><html> <head> <title>制作鼠标悬停,画面比例放大的效果</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width init原创 2020-11-16 21:45:16 · 338 阅读 · 0 评论 -
文字特效和文本省略号
text-shadow完成字体特效<!DOCTYPE html><html> <head> <title>字体特效:发光字、阴影字、3D效果</title> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width initial-scale=1.0"/> <style typ="text/原创 2020-11-16 21:41:41 · 74 阅读 · 0 评论 -
关于opacity的实例应用
关于opacity的实例应用综合应用制作透明背景,凸显文字内容(实例一)天猫商品栏图片鼠标移入透明度减低的效果(实例二)实例一<style type="text/css"> * { margin:0; padding:0; } .autumn { width:440px; height:227px; background:url('./image/autumn.jpg原创 2020-11-16 21:38:50 · 143 阅读 · 0 评论 -
tarnsition过渡效果
transition过渡效果transition同样亦是一个简写属性transition-property: 属性选项 all指代所有属性,在这也可以只设置width/height,应用于单独某个属性transition-duration:动画持续时间transition-delay:延迟时间transition-timing-function: esae是默认值,即整个过程先慢后快再慢。如果是ease-in,即是先慢后快;ease-out,即是先快后慢;ease-in-out,即是先慢后快再原创 2020-11-16 21:35:21 · 200 阅读 · 0 评论 -
关于渐变
关于渐变线性渐变线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向语法background-image: linear-gradient(direction, color-stop1, color-stop2, ...);径向渐变径向渐变(Radial Gradients)- 由它们的中心定义语法background-image: radial-gradient(shape size at position, start-color, ..., last-co原创 2020-11-16 21:33:01 · 205 阅读 · 0 评论 -
CSS3动画
CSS3动画制作一个CSS3动画需要2步声明CSS3@keyframes规则@keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式利用百分比来规定变化发生的时间,或用关键词from和to,等同于0%和100%0%是动画的开始,100%是动画的结束为了得到浏览器的最佳支持,应该始终定义0%和100%将CSS3@keyframes规则绑定到指定的选择器上,使用animation设定动画属性animation是简写属性animation-name即是动画关键原创 2020-11-16 21:31:13 · 110 阅读 · 0 评论 -
border-radius画圆以及border绘制图形
border-radius画圆以及border绘制图形1. 利用border-radius绘制圆形类图形border-radius是一个简写属性,它包含4个方向的属性设置border-top-left-radius左上,border-top-right-radius右上border-bottom-left-radius左下border-bottom-right-radius右下另外每个方向上的border-radius值由x/y方向上的半径决定,1个半径值则是正圆弧,2个半径值则是椭圆弧4原创 2020-11-16 21:29:24 · 4650 阅读 · 0 评论 -
伪类选择器和伪元素
伪类选择器和伪元素伪类选择器常用动态伪类选择器 (链接伪类)a:linka:visiteda:hovera:active常用UI状态选择器 (表单伪类)input:enableinput:disabledinput:checked结构伪类选择器使用结构伪类的各种属性选定子元素的方式,减少了类、id选择器的使用常用结构伪类:nth-child():first-child():last-child():only-child()伪元素常用伪元素原创 2020-11-16 21:25:03 · 98 阅读 · 0 评论