css
关注
分享
扫一扫
Wrj6811
这个作者很懒，什么都没留下…
展开
-
圆形加载动画
页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>圆形加载动画</title> <link rel="stylesheet" type="text/css" href="../lib/css/loding.css"/> </head> <body> <input type="checkbo原创 2020-08-01 22:47:53 · 267 阅读 · 0 评论 -
网页动画气泡效果
打开网页，从网页底部生成一个一个的气泡，然后气泡上升到页面顶部消失。利用 setinterval定时器定时，每50毫秒生成一个气泡，然后设置他的样式，出现效果效果图：页面布局代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>网页动画气泡效果</title> <link rel="stylesheet" type="te.原创 2020-07-30 00:28:43 · 1100 阅读 · 1 评论 -
使用css实现手风琴菜单
效果图：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>手风琴菜单</title> <link rel="stylesheet" type="text/css" href="../lib/css/accordion.css"/> </head> <body> <di.原创 2020-07-24 22:35:31 · 360 阅读 · 0 评论 -
CSS实现简单的 hinge 动画
效果如下图所示：HTML代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>HINGE</title> <link rel="stylesheet" type="text/css" href="../lib/css/hinge.css"/> </head> <body> <div .原创 2020-07-24 21:36:12 · 320 阅读 · 0 评论 -
火箭飞行动画效果实现
使用css动画实现火箭飞行的动画页面布局代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>火箭飞行动画</title> <link rel="stylesheet" type="text/css" href="../lib/css/rocket.css"/> </head> <body> <原创 2020-07-17 00:23:07 · 729 阅读 · 0 评论 -
404页面实现
页面代码：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>页面丢失了</title> <link rel="stylesheet" type="text/css" href="lib/css/404plane.css"/> </head> <body> <div class="error">.原创 2020-07-15 23:42:20 · 435 阅读 · 0 评论 -
实现一个动态的按钮，边框可以移动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&...原创 2020-04-27 22:18:16 · 579 阅读 · 0 评论 -
实现一个漂亮简单的登录界面
方法一：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="st...原创 2020-04-27 22:00:17 · 31354 阅读 · 17 评论 -
实现旋转木马的效果
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { perspective: 1500px; } section { ...原创 2020-03-23 16:58:07 · 785 阅读 · 0 评论 -
使用transform实现搜索框里面的三角形而不用字体图标
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input { outline: none; width: 200px; ...原创 2020-03-20 16:36:58 · 323 阅读 · 0 评论 -
使用css实现一个小三角形
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .right{ height: 0; width: 0; border-style:...原创 2020-03-19 17:12:18 · 372 阅读 · 0 评论 -
animation 中的 steps() 的使用 做一个时钟
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> img{ position: absolute; left: 50%; top: 1...原创 2019-10-16 23:19:59 · 315 阅读 · 0 评论 -
上课随机点名
效果图：页面代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点名表</title> <link rel="stylesheet" href="../css/index.css"&g...原创 2019-10-06 16:09:43 · 1387 阅读 · 4 评论