css3
手残程序员啊~
这个作者很懒,什么都没留下…
展开
-
css动画弹球
@keyframes *** {0%—100%}animation: animationName time [ style …]##源码css....sport { position: relative; width: 500px; height: 400px; border: 1px solid #F6D66E; background-color: greenyellow;原创 2021-08-19 10:27:22 · 205 阅读 · 0 评论 -
CSS3动画很优秀yyds
抛出问题:什么是css动画?动画使元素逐渐从一种样式变为另一种样式。我们可以随意更改任意数量的 CSS 属性。如需使用 CSS 动画,您必须首先为动画指定一些关键帧。关键帧包含元素在特定时间所拥有的样式。语法:首先要定义动画方式1@keyframes move { /* 开始 */ 0% { /* 代码块 */ } /* 结束 */原创 2021-08-17 08:35:36 · 157 阅读 · 0 评论 -
2D缩放——scale()方法
缩放——scale()在CSS3中,我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放,指的是“缩小”和“放大”的意思。scale()方法跟translate()方法类似,缩放也有3种情况:scaleX()、scaleY()、scale(),参数x表示元素在x轴方向的缩放倍数,参数y表示元素在y轴方向的缩放倍数。有以下几种情况:transform: scale(x, y);里面写的数字不跟单位 就是倍数的意思 1 就是1倍 2就是 2倍transform: s转载 2021-08-16 09:06:16 · 4042 阅读 · 1 评论 -
2D旋转——rotate
旋转rotate旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度。如果这个值为正值,元素相对原点中心顺时针旋转;如果这个值为负值,元素相对原点中心逆时针旋转。旋转方式顺时针旋转45度 transform: rotate(45deg); 案例... img { width: 150px; border-radius: 50%; b原创 2021-08-15 09:47:23 · 399 阅读 · 0 评论 -
页码缩放demo
页码缩放案例需求:当鼠标经过,页码会放大,鼠标离开,页码恢复大小案例... ul { margin: 100px auto; } li { width: 30px; height: 30px; border: 1px solid skyblue; text-align: center; l转载 2021-08-14 10:08:36 · 63 阅读 · 0 评论 -
css动画案例——实现热点图
什么是热点图?热点图,就是看到这个图像,能够让人豁然开朗,明白要表达什么。上源码 body { background-color: #333; } .map { position: relative; width: 747px; height: 617px; background: url(media/map.png原创 2021-08-12 21:29:49 · 436 阅读 · 0 评论 -
transform——2D转换位移
transform–2D转换位移什么是2D转换?就是在平面中的形态变化。语法x就是x轴上移动位置 y 就是y轴上移动位置 中间用逗号分隔transform: translate(x, y);transform: translate(100px, 100px);我们如果只移动x坐标transform: translate(100px, 0);transform: translateX(100px);我们如果只移动y坐标transform: translate(0, 100px);t原创 2021-08-12 09:18:59 · 144 阅读 · 0 评论