HTML与CSS
html,css相关技术总结
Bear
人不逼自己,永远不知道自己有多优秀!
展开
-
CSS颜色渐变
使用角度如果你想要在渐变的方向上做更多的控制,你可以定义一个角度,而不用预定义方向(to bottom、to top、to right、to left、to bottom right,等等)。语法background: linear-gradient(angle,color-stop1,color-stop2);角度是指水平线和渐变线之间的角度,逆时针方向计算。换句话说,0de...原创 2019-09-12 16:28:09 · 373 阅读 · 0 评论 -
CSS导航条从入门到精通
1 css实现基本的横向导航条html结构 <body> <div id="top"> <!-- 无序列表 包含4个列表项 --> <ul> <li> <a href="#">首页</a> </li> <li> &l...原创 2019-05-07 14:56:15 · 354 阅读 · 0 评论 -
CSS 3D动画效果
示例1(两面翻转的图片):<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>两面翻转的图片</title> <style> div { width: 2...原创 2019-09-20 09:51:46 · 1063 阅读 · 0 评论 -
CSS 2D动画效果
示例1(盾牌动画):<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>盾牌动画</title> <link rel="shortcut icon" href="bkq.ico" type="ima...原创 2019-09-19 16:00:32 · 801 阅读 · 0 评论 -
CSS特殊形状
示例1(简单特殊图形):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>特殊形状</title> <style type="text/css"> div{ display: inline-block...原创 2019-09-18 11:40:41 · 807 阅读 · 0 评论 -
CSS动画效果
示例1(平移动画):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>平移动画</title> <style type="text/css"> ul{ list-style: none; } ...原创 2019-09-17 16:29:30 · 245 阅读 · 0 评论 -
CSS文字效果
这里是一些文字效果总结。示例1(竖版从右至左的古文顺序):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>竖版文言文</title> <style type="text/css"> #content{...原创 2019-09-16 10:41:07 · 1049 阅读 · 0 评论 -
CSS图像滤镜
滤镜主要实现图像的各种特殊效果。主要属性详见以下列表中。 Filter 描述 none 默认值,没有效果。 blur(px) 给图像设置高斯模糊。"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模...原创 2019-09-15 00:10:46 · 591 阅读 · 0 评论 -
CSS雪碧图Sprite
原理:CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,从而减少你的网站的HTTP请求数量。该图片使用CSS background和background-position属性渲染,这也就意味着你的标签变得更加复杂了,图片是在CSS中定义,而非<img>标签。优点:1.减少加载网页图片时对服务器的请求次数2.提高页面的加载速度示例...原创 2019-09-13 22:47:12 · 326 阅读 · 0 评论 -
CSS动画效果2
示例1(嫦娥奔月):<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>嫦娥奔月</title> <style type="text/css"> body{ background-color: #000; ...原创 2019-10-01 20:47:48 · 635 阅读 · 0 评论