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 · 2615 阅读 · 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 · 1073 阅读 · 0 评论 -
CSS3——动画
基本语法如果要在css3中使用动画，需要先用@keyframes定义动画，再用选择器使用动画相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果。用keyframes 定义动画@keyframes 动画名称 { 0%{ width:100px; } 100%{ width:200px; }}动画序列1、0% 是动画的开始，100% 是动画的完成。这样的规则就是动画序列。2、在 @keyframes 中规定某项 CSS 样原创 2020-06-14 09:31:47 · 109 阅读 · 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 · 136 阅读 · 0 评论