css3+html5
文章平均质量分 66
井底的蜗牛
凡事预则立,不预则废。
展开
-
css之分割线特效
温馨小提示,下面的盒子用的都是Grid布局,如果想要其他布局可以点击这里CSS Grid Generator盒子html<div class="parent1"> <div class="div1">斜分割线</div> <div class="div2">SETTINGS</div> <div class="div3">HTML</div> <.原创 2022-05-15 21:17:28 · 3815 阅读 · 0 评论 -
对css中position的absolute和relative的理解
absolute 绝对定位1、在不同层面显示,把原来的位置腾出来,让后面的元素补上,最终形成了有position:absolute的元素显示在上层 <div class="demo1"></div> <div class="demo2"></div> .demo2 { width: 150px; height: 150px; background: green; }原创 2021-06-01 17:14:37 · 3063 阅读 · 0 评论 -
css3中绚丽的图片翻转特效
看效果css3属性:transform,transition,backface-visibilitytransition: transform 400ms;对于所有属性过度动画400毫秒 transform: rotateY(-180deg);y坐标翻转180°就相当于到后面了 backface-visibility:指定元素背面面向用户时是否可见。visible默认值:可见,hidden,不可见 在这里当图片翻转时背面都得设置不可见,否则看到则还是上面那张图片的背面 如下图 故...原创 2021-05-26 21:20:33 · 336 阅读 · 0 评论 -
css3动画学习之太阳与月亮
上代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>太阳的升起与降落</title> </head> <body> <div class="space"></div> <div class="sun"></..原创 2021-05-24 22:22:34 · 218 阅读 · 0 评论 -
css3中的transition与animation的学习
transition 过渡动画 只能从A状态到B状态transition-property:需要过度的属性;默认是所有,监听所有具备过度动画的属性 transition-duration:过渡动画时间,表示这个过渡动画多少秒来完成 transition-timing-function:过度动画运动状态,如先慢后快,或先快后慢,或者匀速 或者使用贝塞尔曲线cubic-bezier transition-delay:等待多少秒后执行动画transition:transition-property .原创 2021-05-24 22:06:37 · 148 阅读 · 0 评论