HTML&CSS
关注
分享
扫一扫
文章平均质量分 55
无知的圆
这个作者很懒，什么都没留下…
展开
-
纯CSS实现轮播图（附代码详细注释）
HTML 部分<!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"> <titl原创 2021-07-17 21:57:57 · 3540 阅读 · 0 评论 -
HTML+CSS打勾动画制作
参考网址https://www.bilibili.com/video/BV1ME411F7BG实现效果当某些工作成功执行后，例如支付成功，注册成功，储存成功等，使用户更直观了解操作成功与否。效果如下制作方法使用SVG于HTML内绘制圆形和打勾符号，然后再通过animation控制CSS的stroke-dasharray（控制用来描边的点划线的图案范式）和stroke-dashoffset（指定了dash模式到路径开始的距离）来达到预定的效果参考代码如下<!DOCTYPE h原创 2021-03-10 11:34:35 · 2342 阅读 · 0 评论 -
HTML+CSS动态显示表单栏位标题
实现效果建构一个模拟的“登入表单”，有一个用户名称和密码两个输入框，输入框里有一个浅灰色的标题，当聚焦到输入框时，该标题就会移动到输入框之外并显示为深色，当失去焦点时，标题回到输入框并恢复浅灰色。而当输入框里有文字时，失去焦点时标题文字就会自动隐藏。当密码输入框内输入密码以后，右边就会出现一个登入的按钮实现方法建构表单的HTML代码与CSS代码处理输入框标题在聚焦与失焦的位置在栏位输入文字后将标题隐藏，以及显示登入按钮代码<!DOCTYPE html><ht原创 2021-03-06 18:11:49 · 459 阅读 · 0 评论 -
CSS聚光灯效果制作
原理将两个文字完全重合【一前一后】，同时设置两种不同的颜色【一个底色和一个要展示的颜色，】，然后再将前面的文字套用圆形遮罩，最后加上CSS Animation即可可以加入背景图片，然后将文字作为遮罩代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=ed原创 2021-03-03 17:39:26 · 279 阅读 · 1 评论 -
使用HTML+CSS制作动态Hamburger Menu
Hamburger Menu即我们日常在手机上浏览网页时，左上角或右上角有两到三条线的图标，如下图所示原创 2021-02-24 11:39:34 · 1215 阅读 · 0 评论 -
HTML+CSS制作翻牌效果
预计效果但鼠标移动到相应的卡牌的时候，卡牌会自动翻转过去；当鼠标移走时，卡牌会自动盖上结构分析正面和背面分别用两个div显示，长度和宽度设置相同，使之完全重叠，这样就可以将position属性设置为absolute，即可以将两个div重叠在一起。运用CSS的transform属性，用rotate将其旋转过来【 旋转方向以空间直角坐标系为参考，即垂直旋转沿Y轴方向，transform的设定值为rotateY()】backface-visibility的设定（用控制HTML 元素的“背原创 2021-02-23 11:47:06 · 1494 阅读 · 1 评论