![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
css布局和动画模板
css布局和动画模板,css布局和动画模板,css布局和动画模板,css布局和动画模板,css布局和动画模板
草字
点点关注点点赞,私信问答先回复。
展开
-
css 实现排行榜样式2,1,3顺序,不影响dom的循环渲染顺序1,2,3。
使用grid网格布局。原创 2023-02-10 13:56:53 · 428 阅读 · 0 评论 -
css 实现带边框三角的气泡框(带三角箭头)
底部一个带边框的矩形,顶部一个只带两条边的边框矩形,并旋转45度。原创 2023-02-02 15:29:00 · 1177 阅读 · 0 评论 -
css 排行榜动画,排序动画,横向,竖向,网格
【代码】css 排行榜动画,排序动画,横向,竖向,网格。原创 2023-01-03 11:35:11 · 978 阅读 · 0 评论 -
js 卡片交换动画,网格卡片交换动画,排序算法动画,三消游戏交换动画
【代码】js 卡片交换动画,网格卡片交换动画,排序算法动画,三消游戏交换动画。原创 2022-12-02 15:21:02 · 724 阅读 · 0 评论 -
css 实现上升的气球效果
【代码】css 实现上升的气球效果。原创 2022-12-02 10:38:15 · 658 阅读 · 0 评论 -
css 解决ios设备固定背景图的显示问题。background-attachment: fixed在iphone设备上失效;
设置背景图固定,滚动内容时背景图不滚动。在android上是没有问题的,但是ios上就是会被内容挤出去,滚动的时候背景图变形。通过background-attachment: fixed;和定位的方法实现或还是会出现图片变形,或者盒子被撑大。最终采用动态添加::before伪元素样式实现图片的固定布局。背景图如果直接写死是没有问题的,动态绑定添加的就有问题。原创 2022-12-01 20:45:41 · 2406 阅读 · 0 评论 -
css 动效彩旗飘扬
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .flo原创 2022-05-20 13:50:47 · 912 阅读 · 0 评论 -
css 弹性盒子和grid网格布局实现九宫格布局,每个格子的宽高一致(跟随页面宽度平分)。
效果图:高度设置为0,使用内间距100%,就可以将容器宽高的大小设置为一致。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</titl原创 2022-04-07 11:46:02 · 2852 阅读 · 0 评论 -
css 水波纹效果,地图重点提示效果
效果图:代码:<!DOCTYPE html><!-- saved from url=(0047)https://www.jq22.com/demo/cssMapdh202007031132/ --><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" c.原创 2022-03-04 16:16:14 · 381 阅读 · 0 评论 -
css 实现马赛克背景,ps透明背景,未选颜色的展示方式
效果图: 方式二:效果图:代码:原创 2022-03-01 16:06:26 · 720 阅读 · 0 评论 -
css svg实现彩虹过渡效果,圆形进度条效果
效果图:以下是练习的所有代码,代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2022-02-23 17:09:02 · 450 阅读 · 0 评论 -
js 展开折叠动画原理,jquery的toggle切换效果
效果图:想法:jquery的展开折叠动画效果很好看,想自己实现一个,结果发现仅仅只靠css添加类和动画是不行,最开始的思路是折叠时候设置高度为0,展开时设置高度设置为auto,让他自己撑开,可是transition并不过渡高度height为auto的动画,所以也就没有生效。实现方法:transition过渡高度height的时候,必须设置固定px,100%也不会生效,所以我们必须知道这块内容完全撑开的时候所占据的高度是多少。最后发现,在原生dom节点上,scrollHeight属性就原创 2022-01-27 15:51:10 · 2082 阅读 · 0 评论 -
css 左右切换滑动效果
效果图:简单讲讲实现逻辑,先实现简单的布局,带有颜色的滑块通过伪类并定位来实现,同时设置好active的效果,也就是滑块移动到了右边花朵上面。切换效果实现后,就可以通过transition来转换变换属性的一个过渡效果。本项目使用的jquery,预览时请自行引入jquery。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta n原创 2022-01-27 10:57:25 · 10885 阅读 · 4 评论 -
css 实现旋转的花朵
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> bod.原创 2022-01-25 15:15:03 · 307 阅读 · 0 评论 -
css布局 屏幕大时左边菜单和右边内容居中显示,屏幕小时左右两边占满,左边菜单自动粘性吸顶
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *.原创 2022-01-06 16:03:16 · 317 阅读 · 0 评论 -
html 实现雨滴落下动画效果
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{.原创 2022-01-04 11:08:58 · 1135 阅读 · 0 评论 -
css 粘性布局吸顶position:sticky与js监听滚动手动实现
CSS3新发布的一个属性position:sticky,当节点出现在可视窗口时,该节点的位置不受任何影响,也就是等于position:static定位;当节点滚动出屏幕后,粘性布局会自动转换为position:fixed固定定位的效果,并使相关的属性生效,如:top,left,right,bottom等等。如果不使用该属性,那么我们就只能手动监听scroll屏幕滚动,实现动态的定位布局,当然,这是一种消耗性能的解决方法,一般不推荐使用。示例demo:<!DOCTYPE html>原创 2022-01-04 10:22:26 · 1159 阅读 · 0 评论 -
js 实现进度条,杠杆进度条,兼容pc移动端,滑块效果
效果图:本版本为jquery实现,如果你的项目是vue,那么可以按照如下实现的逻辑改版,也可以继续使用jquery实现。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl原创 2021-10-28 11:12:40 · 798 阅读 · 2 评论 -
css 加载中效果的动画
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ..原创 2021-09-09 18:07:44 · 162 阅读 · 0 评论 -
css clip-path裁剪形状,实现绘制常用的形状和图形。反向裁剪
效果图:图1:图2:图3:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sc原创 2021-06-16 16:28:55 · 2793 阅读 · 0 评论 -
css 软键盘,移动端键盘,数字键盘效果实现
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l原创 2021-06-03 16:10:37 · 1100 阅读 · 0 评论 -
css 3*3网格实现只有内部边框,取消外部边框的样式。
效果图:说明:白色是需要实现的边框,红色的边框不用看,只是为了称托出外部的边框。最终实现只有内部边框,没有四周的边框。先说说我的实现思路:1.默认情况每个都加右边框和下边框。 2.div为3的倍数没有右边框。 3.最后三个元素没有下边框。代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-U原创 2021-05-14 16:23:24 · 660 阅读 · 0 评论 -
css 圆形百分比样式的容器,进度
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .原创 2021-05-06 15:49:10 · 264 阅读 · 0 评论 -
css 样式实现上下左右箭头符号
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .men原创 2021-04-15 15:35:45 · 1050 阅读 · 0 评论 -
css 弹性盒子实现骰子的效果
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {原创 2021-04-14 17:14:31 · 1368 阅读 · 0 评论 -
css grid布局的反向填充,从右到左填充
问题:需要实现的效果,如下图:说明:总共有7种不同操作的按钮,最多出现三个。有三个按钮的时候两端对齐,两个按钮的时候如图所示,一个按钮的时候右对齐。如果使用flex弹性盒子,就需要指定元素(按钮)一个宽度33.3%,“flex:1”不行。用grid网格布局实现的话会很简单,因为它可以直接将元素分成最多显示3列,超出的自动换行,不过最后实现的只能是从左到右的填充方式。grid网格布局本身是没有反向填充的css属性,没有像弹性盒子flex的flex-direction属性,比如:fl原创 2021-02-07 11:19:13 · 2932 阅读 · 0 评论 -
css 下拉复选框,带搜索
效果图:使用代码:<!DOCTYPE html><html lang="en"><head> <title>下拉复选框</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="tex原创 2021-01-19 11:03:02 · 686 阅读 · 0 评论 -
css 流动边框,蚂蚁线。新添加svg实现方式
流动边框效果图:代码块:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>原创 2021-01-14 18:25:32 · 1231 阅读 · 0 评论 -
css grid网格布局,以及速查属性值作用
网格布局属性容器属性:一、定义网格布局。display:grid | inline-grid(行内网格布局) | subgrid;说明:声明为一个网格布局。二、创建网格列数。grid-template-columns:1fr 1fr 1fr;可取值单位(列举常用的):1fr(比例。平分剩余空间),100px(像素), 20%(百分比) ,1em(字符), 1vw(屏幕宽度比)。以空格分隔,有多少值就生成多少列。说明:2fr:平分剩余空间,表示总宽度扣除其他单位原创 2021-01-12 17:39:56 · 257 阅读 · 0 评论 -
jquery 实现移动端拖动,旋转,缩放,删除控件(元素)功能。
效果图:代码:https://download.csdn.net/download/qq_42740797/14046488(推荐)https://download.csdn.net/download/qq_42740797/14046508原创 2021-01-08 18:10:30 · 635 阅读 · 1 评论 -
css background的“图片自适应div”和“图片自适应div并完全填充”
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body原创 2020-12-30 10:24:41 · 1582 阅读 · 0 评论 -
css 布局:div高度跟随宽度的变化而变化,也就是不设置高度,使div无论如何都是一个正方形。宽度与高度等比例。2种方法实现。
需要实现的效果图:需求:二维码一行显示三个,添加二维码不是一个图片。难点:一行显示三个二维码,所以宽度不能设为固定值,因为有些手机屏幕要小或者大一点。二维码是正方形,所以高度必须跟宽度一致,并且随着宽度的变化而变化。实现代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" conte.原创 2020-12-22 09:58:41 · 2060 阅读 · 0 评论 -
css 五彩斑斓的黑,b站老陈打码。
代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body { ..原创 2020-12-18 15:06:35 · 967 阅读 · 0 评论 -
css 按钮动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ .原创 2020-12-17 13:46:19 · 287 阅读 · 0 评论 -
html5,css 实现拖拽效果。
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box原创 2020-12-12 14:03:05 · 594 阅读 · 1 评论 -
css 去掉ul和li的默认样式,并自定义新的布局样式,多行多列。
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{原创 2020-12-11 09:44:35 · 15505 阅读 · 0 评论 -
css 图片从左到右透明度降低
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .layer{ ...原创 2020-12-01 18:02:04 · 1813 阅读 · 0 评论 -
css 弹性盒子space-between两端对齐,最后一列数量不够时,最后一列左对齐。
代码:<!DOCTYPE html><html><head> <title>测试</title> <style> .container{ width: 200px; height:200px; border:2px solid red; } .box { display: flex; fle原创 2020-11-25 11:24:02 · 8980 阅读 · 1 评论 -
css 广告、公告。滚动文字从右到左(店铺招牌的动画),不使用marquee标签
效果图:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .con原创 2020-11-14 14:58:03 · 590 阅读 · 0 评论 -
css 假瀑布式布局(适用于没有布局组建的)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container>di.原创 2020-09-18 15:05:10 · 105 阅读 · 0 评论