CSS练习题
css练习题,每天做一个不一样的特效
Sunshine_Jian
这个作者很懒,什么都没留下…
展开
-
CSS练习小题(十):鼠标移入移出图片-翻转效果-过渡动画
效果图:代码:(vue)<template> <div> <el-button @click="getData">请求数据</el-button> <div class="box_wrap"> <div class="box" @mouseenter="todo=!todo;" .原创 2022-04-28 10:58:46 · 588 阅读 · 0 评论 -
CSS练习小题(九):静态登录页
效果:代码:<!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"> &l.原创 2022-04-19 14:23:20 · 108 阅读 · 0 评论 -
CSS练习小题(八):文字描边特效
效果图:关键代码: -webkit-text-stroke: 3px purple;text-stroke 属性 描述 text-stroke-width 设置或检索对象中的文字的描边厚度 text-stroke-color 设置或检索对象中的文字的描边颜色 全部代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"...原创 2022-04-15 17:36:32 · 227 阅读 · 0 评论 -
CSS练习小题(七):三栏自适应
效果图:<!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 15:19:09 · 104 阅读 · 0 评论 -
CSS练习小题(六):毛玻璃
效果图:beforeafter关键代码:<!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, init...原创 2022-03-18 10:08:23 · 258 阅读 · 0 评论 -
CSS练习小题(五):评论效果
实现了一个简单的评论效果,也相当于一个投票的功能,点击将投出自己的一票,再次点击取消投票,只能有一次投票的机会,只能在这几个选项中投票。原创 2022-03-04 12:09:30 · 339 阅读 · 0 评论 -
CSS练习小题(四):吸顶效果+返回顶部
效果:代码:<!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-02-04 19:41:06 · 155 阅读 · 0 评论 -
CSS练习小题(三):爱心
效果:代码:<!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-01-18 17:54:43 · 136 阅读 · 0 评论 -
CSS练习小题(二):模拟时钟转动
效果:代码:<!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-01-18 17:23:20 · 249 阅读 · 0 评论 -
CSS练习小题(一):吃豆
效果:代码:<!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...原创 2022-01-18 16:18:45 · 101 阅读 · 0 评论