试用CSS模拟Win11记事本界面

马黑黑

*无标题 - 记事本━    口     ×

  文件(F) 编辑(E) 格式(O) 视图(V) 帮助(H)

Hello CSS!|

马黑黑

未完成的项目：

• 滚动条
• 界面在桌面上呈现的立体感
• 其他细节
  

马黑黑

输入光标模拟的不太像，看得出有渐变过程，现实是一闪一闪而已

马黑黑

看到这个，你会不会想在上面输入文字？

马黑黑

一楼代码分享：

1. <style type="text/css">
   
2. 
   
3. .np-main {
   
4.         margin: 10px auto;
   
5.         width: 600px;
   
6.         height: 380px;
   
7.         background: #fff;
   
8.         border:1px solid #b3b3b3;
   
9.         border-radius: 10px;
   
10.         resize: both;
    
11.         overflow: auto;
    
12.         font-family: 'Microsoft Yahei';
    
13. }
    
14. 
    
15. .np-title {
    
16.         height: 30px;
    
17.         line-height: 30px;
    
18.         padding-left: 8px;
    
19.         padding-right: 8px;
    
20.         font-size:15px;
    
21.         margin-top: -1px;
    
22.         background: #46474b;
    
23.         border-radius: 10px 10px 0 0;
    
24.         color: #fff;
    
25. }
    
26. 
    
27. .np-menu {
    
28.         height: 25px;
    
29.         line-height: 25px;
    
30.         font-size: 0.8em;
    
31.         background: #eee;
    
32. }
    
33. 
    
34. .np-pointer {
    
35.         height: 20px;
    
36.         line-height: 20px;
    
37.         font-size: 14px;
    
38.         padding: 2px;
    
39.         color: #000;
    
40. }
    
41. 
    
42. .right { float: right; }
    
43. .np-fl {         animation: np-Flash 1s infinite; }
    
44. 
    
45. @keyframes np-Flash { 100% { color: #fff; } }
    
46. 
    
47. </style>
    
48. 
    
49. <div class="np-main">
    
50.         <div class="np-title">*无标题 - 记事本<span class="right">━    口     <strong>×</strong></span></div>
    
51.         <div class="np-menu">  文件(F)    编辑(E)    格式(O)    视图(V)  帮助(H)</div>
    
52.         <div class="np-pointer">Hello CSS!<span class="np-fl">|</span></div>
    
53. </div>
    

复制代码

红影

马黑黑 发表于 2022-1-11 11:27
看到这个，你会不会想在上面输入文字？

我刚想说，看到这个忍不住就想去输入内容

红影

马黑黑 发表于 2022-1-11 11:26
输入光标模拟的不太像，看得出有渐变过程，现实是一闪一闪而已

这个好像那种一闪一闪的提示符，原来是用语句模拟出来的，很赞

马黑黑

红影 发表于 2022-1-11 13:44
这个好像那种一闪一闪的提示符，原来是用语句模拟出来的，很赞

这个闪的不是很想输入光标，我再挑战一下

马黑黑

红影 发表于 2022-1-11 13:40
我刚想说，看到这个忍不住就想去输入内容

挺有意思的

红影

马黑黑 发表于 2022-1-11 14:03
这个闪的不是很想输入光标，我再挑战一下

饿呢，看到了改进版，哈哈，你这是让人被迷惑么

红影

马黑黑 发表于 2022-1-11 14:03
挺有意思的

是的，这个语句有趣，跟输入法里的光标太像了

马黑黑

红影 发表于 2022-1-11 16:53
是的，这个语句有趣，跟输入法里的光标太像了

animation动画神奇哦

马黑黑

红影 发表于 2022-1-11 16:52
饿呢，看到了改进版，哈哈，你这是让人被迷惑么

你说的执着

加林森

谢谢老黑的教程！

红影

马黑黑 发表于 2022-1-11 17:20
animation动画神奇哦

是你把它用出新花样了

红影

马黑黑 发表于 2022-1-11 17:21
你说的执着

执着出精品

马黑黑

红影 发表于 2022-1-11 20:20
执着出精品

希望如此

马黑黑

红影 发表于 2022-1-11 20:20
是你把它用出新花样了

工具在那里，由人去用

马黑黑

加林森 发表于 2022-1-11 19:43
谢谢老黑的教程！

不客气

加林森

马黑黑 发表于 2022-1-11 22:12
不客气

嗯嗯