CSS3
关注
分享
扫一扫
蜡笔小新007
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
CSS3——动画案例（奔跑的熊）
bear.png 分析： 采用运动曲线steps()，一个大盒子里有张图片，这张图片有熊运动的每一帧，每次向x轴的负方向运动一步，steps(8)，8步移动完整张图片 html代码 <body> <div class="box"></div> </body> css代码 <style> body { background-color: #cccccc; } .bo.原创 2020-06-14 15:15:36 · 2689 阅读 · 0 评论 -
CSS3——动画案例（大数据热点图）
源码： <body> <div class="map"> <div class="city"> <div class="circle"></div> <div class="pulse1"></div> <div class="pulse2"></div> <div clas.原创 2020-06-14 11:08:24 · 1128 阅读 · 0 评论 -
CSS3——动画
基本语法 如果要在css3中使用动画，需要先用@keyframes定义动画，再用选择器使用动画 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。 用keyframes 定义动画 @keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; } } 动画序列 1、0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。 2、在 @keyframes 中规定某项 CSS 样原创 2020-06-14 09:31:47 · 145 阅读 · 0 评论 -
CSS3——2D转换
先来学习下网页上的二维坐标系 位移 transform: translate(x,y); transform: translateX(); transform: translateY(); 作用：移动元素的位置 优点：不影响其他元素的位置 注意事项： 如果不移动位置，写0 可以写百分比，相对于元素自身的宽和高 像素值和百分比可以写负值 应用：孩子在父元素中水平垂直居中 /* 定位+位移 */ position: absolute; left: 50%; top: 50%; transform: tr原创 2020-06-11 15:31:33 · 184 阅读 · 0 评论