CSS练习案例
CSS练习案例,针对各个方面进行练习
玉安_ZhangDe
web前端后进之学。
咬定青山不放松,自缘身在破岩中。
千磨万击还坚劲,任尔东西南北风。
展开
-
案例:仿华为商品过渡效果
华为官网商品过渡效果:鼠标移动到商品内,图片缩放、背景渐变色、了解更多上浮且将鼠标放到了解更多上,红色右箭头会向右移动案例模仿效果:用到的字体图标:iconfont-阿里巴巴矢量图标库代码:html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" con.原创 2022-04-17 23:03:40 · 607 阅读 · 0 评论 -
案例:仿小米logo过渡渐变效果
效果图:布局思路:代码:<!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"&g原创 2022-04-11 19:02:49 · 487 阅读 · 0 评论 -
案例:仿小米商品过渡效果
官方效果:鼠标放在图标上会同时使该盒子向上移动3px,并且有右下左的阴影案例模仿效果:代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid.原创 2022-04-11 18:32:02 · 1064 阅读 · 0 评论 -
视频封面鼠标经过显示遮罩
<!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"> <title>Do.原创 2022-04-09 17:37:59 · 81 阅读 · 0 评论 -
练习:小米局部静态导航
效果图:代码:<!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">.原创 2022-03-25 20:57:34 · 494 阅读 · 0 评论 -
练习:仿小米静态登录页面
效果图:<!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"> ..原创 2022-03-25 20:55:43 · 449 阅读 · 0 评论 -
练习:新闻列表
效果图:代码:<!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"> .原创 2022-03-25 20:53:33 · 131 阅读 · 0 评论 -
点击搜索框改变样式
先上效果图在上代码需要图片,下面自取<!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..原创 2022-03-23 23:05:08 · 209 阅读 · 0 评论 -
一级变色导航
话不多说先看效果再上代码<!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">.原创 2022-03-23 23:01:08 · 37043 阅读 · 0 评论 -
百度首页静态页面练习
页面效果: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">.原创 2022-03-20 20:54:42 · 415 阅读 · 0 评论