css3实现3d效果教程(CSS3实现简易版的刮刮乐效果)
类别:Web前端 浏览量:1307
时间:2022-01-19 00:53:13 css3实现3d效果教程
CSS3实现简易版的刮刮乐效果效果图
代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>CSS3模拟刮刮乐</title>
- <style type="text/css" media="screen">
- .card {
- border: 1px solid #000;
- -webkit-box-shadow: 1px 1px 2px rgba(77, 73, 73, 1.0), -1px -1px 2px rgba(77, 73, 73, 1.0), 0 0 1px rgba(77, 73, 73, 1.0) inset;
- box-shadow: 1px 1px 2px rgba(77, 73, 73, 1.0), -1px -1px 2px rgba(77, 73, 73, 1.0), 0 0 1px rgba(77, 73, 73, 1.0) inset;
- border-radius: 3%;
- width: 20rem;
- height: 30rem;
- background: -webkit-gradient(linear, left top, left bottom, from(#EEE5E5), to(#FCE4E4));
- background: -webkit-linear-gradient(top, #EEE5E5, #FCE4E4);
- background: linear-gradient(180deg, #EEE5E5, #FCE4E4);
- }
- .title,
- .ad-desrc {
- margin: 0;
- text-align: center;
- padding: 30px 0;
- }
- .ad-desrc{
- color: #bbb;
- font-size: 12px;
- }
- .card-head,
- .card-footer {
- height: 25%;
- width: 100%;
- }
- .card-body {
- height: 50%;
- width: 100%;
- }
- .award-desrc {
- padding: 0 30px;
- margin: 5px auto;
- text-align: left;
- }
- .award-scan {
- text-align: center;
- font-size: 20px;
- font-weight: 700;
- width: 80%;
- margin: 15px auto;
- padding: 30px 10px;
- /* 高斯模糊主要由这两句操控,文字透明及阴影半径 */
- color: transparent;
- -webkit-box-shadow: 0 0 5px rgba(178, 178, 178, 1);
- box-shadow: 0 0 5px rgba(178, 178, 178, 1);
- }
- </style>
- </head>
- <body>
- <p>非常简易版的刮刮乐模拟,搭配JS更加【禁用和启用选中功能】</p>
- <li class="card">
- <li class="card-head">
- <h1 class="title">CRPER刮刮乐</h1>
- </li>
- <li class="card-body">
- <h1 class="award-desrc">刮奖区域:</h1>
- <p class="award-scan">恭喜您中了逗逼大奖!!</p>
- </li>
- <li class="card-footer">
- <h4 class="ad-desrc">走过路过不要错过啊!!!</h4>
- </li>
- </li>
- </body>
- </html>
总结
这个效果实现起来相当简单,稍微需要注意是卡牌的装饰用了渐变;
配合JS,可以控制在某种条件下才能选中内容(查看内容)
pc 可以控制mousedown来禁止,也可以用CSS的一个规则user-select【考虑兼容需要考虑前缀】
移动端可以控制touchstart~touchend来实现达到条件选中;
最后说一句,做着玩的。选中看到内容,用户体验不是很好,不能控制过渡效果;此教程只是CSS3一些特性的小技巧。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持开心学习网。
您可能感兴趣
- css3动画按钮加光晕效果(CSS3 制作的悬停缩放特效)
- javascript编写的小游戏(CSS3 实现NES游戏机的示例代码)
- CSS3中user-select的用法
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- JavaScript css3实现简单视频弹幕功能(JavaScript css3实现简单视频弹幕功能)
- css3常用特性(css3学习之2D转换功能详解)
- css3边框阴影的属性(css3 border-radius属性详解)
- css3水平移动效果(利用css3 translate完美实现表头固定效果)
- css3中的过渡属性的几种方法(基于CSS3实现的几个小loading效果)
- css3中一些常用的特效果(CSS3 制作的书本翻页特效)
- css3表单怎么设置大小(CSS3美化表单控件全集)
- css3项目列表属性(像素密度与CSS3的viewport在移动端Web响应式布局中的运用)
- css3 box-sizing
- css3做出效果(深入解读CSS3中transform变换模型的渲染)
- html5css3旋转特效效果(一款利用html5和css3实现的3D立方体旋转效果教程)
- css3怎么构建阴影(详解css3 mask遮罩实现一些特效)
- 鲢鳙钓底还是钓浮 流水的水域应怎样做钓(鲢鳙钓底还是钓浮)
- 入秋后的第二场苹果发布会来了 全新M1系列芯片登场(入秋后的第二场苹果发布会来了)
- 苹果正式发布自研芯片M1 5nm 32核心 彻底放弃Intel(苹果正式发布自研芯片M1)
- 苹果自研芯片跑分对比 A16芯片排名靠后,M1系列霸榜(苹果自研芯片跑分对比)
- X86处理器的梦魇 苹果M1自研芯片到底有多强(苹果M1自研芯片到底有多强)
- 泰剧《爱欲之神》Boom kitkong和Great合体杂志(泰剧爱欲之神Boomkitkong和Great合体杂志)
热门推荐
- sqlserver多表查询(sqlserver 树形结构查询单表实例代码)
- 无盘服务器配置要求(云服务器配置怎么选)
- 修改sqlserver数据库所有者
- 钉钉嵌入web端应用程序(钉钉企业内部H5微应用开发详解)
- nginx反向代理多个server(Nginx反向代理多个服务器的实现方法)
- docker插件容器使用(Docker容器开jupyter不能访问到的解决方法)
- laravel算法(laravel批量生成假数据的方法)
- mysql常用的sql语句大全(mysql建表常用的sql语句汇总)
- mysql的视图和临时表区别(MySQL 内存表和临时表的用法详解)
- 织梦dede怎么获取当前文档的网址(织梦DedeCMS V57 111015升级出现乱码错误解决方法分享)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9