![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
H5C3
我的哥哥呦
不断学习,热爱学习的前端菜
展开
-
立方体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-28 10:38:05 · 264 阅读 · 0 评论 -
边框图片
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-27 11:29:30 · 199 阅读 · 0 评论 -
360网页
*{ padding: 0; margin: 0;}#360Page{}.section{ overflow: hidden;}/*第一屏样式*/.first{ padding-top:80px;}/*插件会默认为所有内容添加一个父容器,意味着logo并不是first的直接子元素*/.first .logo{ background:...原创 2019-07-31 10:46:42 · 158 阅读 · 0 评论 -
全屏插件的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .first.current h3{ font-size: 100...原创 2019-07-31 10:43:19 · 383 阅读 · 1 评论 -
切割轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-31 10:22:29 · 227 阅读 · 0 评论 -
携程网
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-31 10:22:03 · 264 阅读 · 0 评论 -
边框阴影
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-26 11:16:17 · 220 阅读 · 0 评论 -
安卓的机器人
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-26 11:09:29 · 379 阅读 · 0 评论 -
盒模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-26 11:03:10 · 79 阅读 · 0 评论 -
文字阴影效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-26 10:52:31 · 489 阅读 · 0 评论 -
opacity的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-26 10:24:37 · 1651 阅读 · 0 评论 -
颜色的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-26 10:22:12 · 123 阅读 · 0 评论 -
过渡效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-27 11:55:59 · 699 阅读 · 0 评论 -
手风琴
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin...原创 2019-07-27 12:09:35 · 345 阅读 · 0 评论 -
三维变换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ...原创 2019-07-28 10:30:03 · 255 阅读 · 0 评论 -
通过transform实现元素居中
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ...原创 2019-07-28 10:19:31 · 4746 阅读 · 0 评论 -
盾牌防护动画
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ ba...原创 2019-07-28 10:12:30 · 396 阅读 · 0 评论 -
扑克牌旋转
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ...原创 2019-07-28 10:11:43 · 1390 阅读 · 0 评论 -
transform转换
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ...原创 2019-07-28 09:37:15 · 818 阅读 · 0 评论 -
background-origin/background-clip
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ...原创 2019-07-27 10:35:24 · 147 阅读 · 0 评论 -
background-size
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 300px; height: 300px...原创 2019-07-27 10:17:03 · 474 阅读 · 0 评论 -
背景样式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> div{ width: 500px; height: 500px...原创 2019-07-27 10:03:58 · 112 阅读 · 0 评论 -
重复渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> body{ background-color: #ccc; } ...原创 2019-07-27 09:51:21 · 551 阅读 · 0 评论 -
径向渐变
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; he...原创 2019-07-27 09:39:31 · 606 阅读 · 0 评论 -
线性渐变色
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width: 300px; he...原创 2019-07-27 09:34:41 · 694 阅读 · 0 评论 -
first-letter(首字下沉) first-line select
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*获取第一个字符:实现首字下沉*/ p::first-letter{ ...原创 2019-07-26 10:08:02 · 280 阅读 · 0 评论 -
before-after使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>伪元素:::before ::after</title> <style> *{ padding: 0; ...原创 2019-07-26 10:01:52 · 655 阅读 · 0 评论 -
target-伪类选择器
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 选择器 -伪类target</title> <style> body { margin: 0; padding: 0; backgrou...原创 2019-07-26 09:47:28 · 611 阅读 · 0 评论 -
使用动画制作时钟
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0;...原创 2019-07-29 09:53:03 · 382 阅读 · 0 评论 -
使用动画制作无缝滚动(轮播)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0;...原创 2019-07-29 09:25:15 · 851 阅读 · 0 评论 -
动画的创建
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } ...原创 2019-07-29 09:17:36 · 170 阅读 · 0 评论 -
拖拽接口
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding...原创 2019-07-17 09:40:00 · 125 阅读 · 0 评论 -
FileReader的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div{ height: 20px; wi...原创 2019-07-17 09:21:40 · 210 阅读 · 0 评论 -
全屏接口的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div> <img src="../images/l1.jp...原创 2019-07-17 09:06:03 · 119 阅读 · 0 评论 -
加密及输出显示
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="" method=""> 用户名:<input type="te...原创 2019-07-12 10:17:52 · 156 阅读 · 0 评论 -
表单新增元素:datalist
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <form action="" method=""> <!-- <select nam...原创 2019-07-12 10:10:26 · 257 阅读 · 0 评论 -
网络监听
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Title</title> </head> <body> <script type="text/javascript"> // 1.onon...原创 2019-07-14 11:41:17 · 1528 阅读 · 0 评论 -
video标签和audio标签的使用
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Title</title> <style type="text/css"> </style> </head> <body> ...原创 2019-07-13 12:11:31 · 2346 阅读 · 0 评论 -
学生档案(注册)
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Title</title> <style type="text/css"> *{ padding: 0; margin: 0; } form{ ...原创 2019-07-13 11:08:22 · 182 阅读 · 0 评论 -
web字体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> @font-face { font-family: 'shuang...原创 2019-07-29 09:57:16 · 962 阅读 · 0 评论