he Obamas are most admired

米歇尔成'最受钦佩女性'

Former US first lady Michelle Obama has been named America's "Most AdmiredWoman" in 2018, ending Hillary Clinton's 17-yearwinning streak. Clinton, a former presidential candidate, secretary of state and first lady, came third in the annual Galluppoll, with talk-show host Oprah Winfrey in second.

近日，美国前第一夫人米歇尔?奥巴马当选2018年美国"最受钦佩的女性"，结束了希拉里?克林顿对此头衔长达17年的垄断。曾是美国总统候选人、国务卿及第一夫人的希拉里在此次盖洛普年度民意调查中排名第三，脱口秀主持人奥普拉?温弗瑞位居第二。

Former president Barack Obama was the most admired man for the 11th year in a row. President Donald Trump finished second for the fourth consecutive year. If Obama emerges on top again next year he will tie with the record holder - former president Dwight Eisenhower who won the most admired man title 12 times, Gallup said.

美国前总统巴拉克?奥巴马连续11年被选为"最受钦佩的男性"，现任总统唐纳德?特朗普则连续第4年位居次席。盖洛普称，若明年奥巴马再次获此头衔，他将追平该纪录的保持者——12次赢得"最受钦佩的男性"称号的美国前总统德怀特?艾森豪威尔。

重点词汇

1、admired

英 /?d'ma??d/ 美 /?d'ma??d/

adj. 受人钦佩的；感到羡慕的

v. 羡慕，赞美；钦佩（admire的过去分词）

2、winning streak

连胜

3、poll

英 /p??l/ 美 /pol/

n. 投票；民意测验；投票数；投票所

vt. 投票；剪短；对…进行民意测验；获得选票

vi. 投票

adj. 无角的；剪过毛的；修过枝的

Celebrate New Year with lasers

芬兰用激光秀代替烟花

As public callsto ban fireworks areon the rise, the city of Espoo in southern Finland will be the first city in the country to celebrate the New Year with a laser light show instead offirecrackers.

由于民众禁止燃放烟花的呼声不断高涨，芬兰南部城市埃斯波将成为该国首个以激光秀、而不是燃放烟花来庆祝新年的城市。

In Finland, the New Year is usually celebrated with fireworks, but this is thought to be old-fashioned by the city of Espoo, said Lea Rintala, director of the Culture Services Unit of Espoo. The laser show will start in downtown Espoo at 6:20 pm local time on New Year's Eve.

埃斯波文化服务部门主管莱亚?林塔拉表示，在芬兰，人们通常燃放烟花来庆祝新年，但这种方式对埃斯波市来说已经过时了。激光秀将于当地时间除夕傍晚6时20分在埃斯波市中心开始。

The show will cover an area including the Espoo Cathedral, the nearby Church Park and the river bank. Other light shows may also take place in other parts of the city during the year, according to Rintala.

该表演将覆盖埃斯波大教堂、附近的教堂公园及河岸等区域。据林塔拉介绍，明年市内其他地点也可能举办其他灯光秀。

The public demand for banning consumers from using fireworks has consistentlyincreased in recent years in Finland, aiming to reduce cases of injuries, air pollution, and stress and anxiety in animals caused by fireworks.

近年来，芬兰民众要求禁放烟花的呼声持续高涨，此举旨在减少因烟花导致的受伤事故、空气污染以及使动物产生的焦虑感。

重点词汇

1、calls

n. 电话（call的复数）；呼吁；调用

v. 呼叫（call的三单）

2、on the rise

在上涨；正在上升；在上升；在增加

3、firecracker

英 /'fa??kr?k?/ 美 /'fa??kr?k?/

n. 鞭炮，爆竹

4、consistently

美 /k?n's?st?ntli/

adv. 一贯地；一致地；坚实地

National Film Registry titles

美国国家电影目录'扩员'

侏罗纪公园断背山入选

The National Film Registryis turning 30 and will bring ina new crop offilms ranging from dinosaurs' return from extinction, a cowboys-in-love drama and stories showcasing Native Americans.

美国国家电影目录即将迎来30岁生日，届时将新加入一批影片，内容涵盖广泛，从恐龙自灭绝中归来到西部牛仔同性爱情故事再到美国土著的故事。

The Library of Congress announced that the films "Jurassic Park," "Brokeback Mountain" and "My Fair Lady" are among the 25 movies tapped for preservation this year. The library chose a few more memorable titles such as "The Shining," "Eve's Bayou", "Hud" and "Broadcast News". Others on the list include "Something Good - Negro Kiss" and "Smoke Signals", along with animated films "Hair Piece: A Film for Nappy-Headed People" and "Cinderella".

国会图书馆近日宣布，《侏罗纪公园》、《断背山》、《窈窕淑女》等25部电影被选定为2018年收录到这份电影保护目录的影片。国会图书馆还挑选了几部更加令人难忘的影片，比如《闪灵》、《仲夏夜玫瑰》、《原野铁汉》和《广播新闻》。其他入选影片包括《好东西：黑人之吻》、《烟雾信号》以及动画片《假发》和《仙履奇缘》。

The library has selected movies for preservation because of their cultural, historic and artistic importance since the registry began in 1988. This year's picks bring the total number of films in the registry to 750.

自1988年设立国家电影目录以来，国会图书馆一直选择具有文化、历史和艺术价值的影片加以保护。加上2018年收录的影片，该目录收录的电影总数将达到750部。

重点词汇

1、registry

英 /'red??str?/ 美 /'r?d??stri/

n. 注册；登记处；挂号处；船舶的国籍

2、a crop of

许多，一批，一堆

Esports players burning out

职业电竞选手吃青春饭?

Some of the world's top esportsplayers work as many as 80 hours a week, with much of the time spent onmarathonvideo gamesessionsthat end up taking a physical and mentaltoll. Onehigh-profilegamer, Indy Halpern, says that he sometimes practices for eight hours a day, which often leads to lower-back and wrist pain.

世界上一些顶级电子竞技选手每周工作时间长达80小时，大部分时间花在漫长累人的电子游戏训练上，最终付出了身体和精神上的双重代价。知名电竞玩家印迪?哈尔佩恩表示，他有时每天练习8小时，这常导致下背部和手腕疼痛。

Halpern also outlined the mental risks: "You always have that pressure on your shoulders that you have to perform," he says. Doug Gardner, a sports psychology consultant, recalled seeing "emaciated" players exhausted afterrelentlessgameplay.

哈尔佩恩还提到了心理上的风险，他说："你一直承受着必须表现出色的压力。"据体育心理学顾问道格?加德纳回忆，他曾看到"瘦弱的"队员在没完没了的比赛后精疲力竭的样子。

In 2014, the gaming publication Polygon reported that it was normal for esports players to retire in their mid-20s because youth is a key determinantof excellent motor skills and reaction times - two essential qualities for a top gamer.

游戏行业出版物《多边形》2014年报道称，电竞选手在20多岁就退役是正常现象，因为年轻是出色的操作技能和反应时间的关键决定因素——对于顶级玩家来说，这两种素质至关重要。

重点词汇

1、esport

电子竞技

2、marathon

英 /'m?r?θ(?)n/ 美 /'m?r?,θɑn/

n. 马拉松赛跑；耐力的考验

adj. 马拉松式的；有耐力的

vi. 参加马拉松赛跑

3、session

英 /'se?(?)n/ 美 /'s???n/

n. 会议；（法庭的）开庭；（议会等的）开会；学期；讲习会

4、toll

英 /t??l/ 美 /tol/

n. 通行费；代价；钟声；伤亡人数

vt. 征收；敲钟

vi. 鸣钟；征税

5、high-profile

英 /hai'pr?ufail/

adj. 高调的；备受瞩目的；知名度高的

6、emaciated

美 /?'me??'et?d/

adj. 瘦弱的；憔悴的

v. 憔悴；消瘦下去（emaciate的过去分词）

7、relentless

英 /r?'lentl?s/ 美 /r?'l?ntl?s/

adj. 无情的；残酷的；不间断的

8、determinant

英 /d?'t??m?n?nt/ 美 /d?'t?m?n?nt/

adj. 决定性的

n. 决定因素；[数] 行列式

ormer President Barack Obama and former First Lady Michelle Obama attend a Hanukkah reception in the East Room of the White House, December 14, 2016, Washington, DC.[Photo/VCG]

>The Obamas are most admired 米歇尔成'最受钦佩女性' Former US first lady Michelle Obama has been named America's "Most Admired Woman" in 2018, ending Hillary Clinton's 17-year winning streak. Clinton, a former presidential candidate, secretary of state and first lady, came third in the annual Gallup poll, with talk-show host Oprah Winfrey in second. Former president Barack Obama was the most admired man for the 11th year in a row. President Donald Trump finished second for the fourth consecutive year. If Obama emerges on top again next year he will tie with the record holder - former president Dwight Eisenhower who won the most admired man title 12 times, Gallup said. 近日，美国前第一夫人米歇尔?奥巴马当选2018年美国"最受钦佩的女性"，结束了希拉里?克林顿对此头衔长达17年的垄断。曾是美国总统候选人、国务卿及第一夫人的希拉里在此次盖洛普年度民意调查中排名第三，脱口秀主持人奥普拉?温弗瑞位居第二。美国前总统巴拉克?奥巴马连续11年被选为"最受钦佩的男性"，现任总统唐纳德?特朗普则连续第4年位居次席。盖洛普称，若明年奥巴马再次获此头衔，他将追平该纪录的保持者——12次赢得"最受钦佩的男性"称号的美国前总统德怀特?艾森豪威尔。

Fireworks explode over Victoria Harbour during New Year celebrations in Hong Kong on January 1, 2018. [Photo/Xinhua]

>Celebrate New Year with lasers 芬兰用激光秀代替烟花 As public calls to ban fireworks are on the rise, the city of Espoo in southern Finland will be the first city in the country to celebrate the New Year with a laser light show instead of firecrackers. In Finland, the New Year is usually celebrated with fireworks, but this is thought to be old-fashioned by the city of Espoo, said Lea Rintala, director of the Culture Services Unit of Espoo. The laser show will start in downtown Espoo at 6:20 pm local time on New Year's Eve. The show will cover an area including the Espoo Cathedral, the nearby Church Park and the river bank. Other light shows may also take place in other parts of the city during the year, according to Rintala. The public demand for banning consumers from using fireworks has consistently increased in recent years in Finland, aiming to reduce cases of injuries, air pollution, and stress and anxiety in animals caused by fireworks. 由于民众禁止燃放烟花的呼声不断高涨，芬兰南部城市埃斯波将成为该国首个以激光秀、而不是燃放烟花来庆祝新年的城市。埃斯波文化服务部门主管莱亚?林塔拉表示，在芬兰，人们通常燃放烟花来庆祝新年，但这种方式对埃斯波市来说已经过时了。激光秀将于当地时间除夕傍晚6时20分在埃斯波市中心开始，该表演将覆盖埃斯波大教堂、附近的教堂公园及河岸等区域。据林塔拉介绍，明年市内其他地点也可能举办其他灯光秀。近年来，芬兰民众要求禁放烟花的呼声持续高涨，此举旨在减少因烟花导致的受伤事故、空气污染以及使动物产生的焦虑感。

Still of Ang Lee's film "Brokeback Mountain" [Photo/VCG]

>National Film Registry titles 美国国家电影目录'扩员' 侏罗纪公园断背山入选 The National Film Registry is turning 30 and will bring in a new crop of films ranging from dinosaurs' return from extinction, a cowboys-in-love drama and stories showcasing Native Americans. The Library of Congress announced that the films "Jurassic Park," "Brokeback Mountain" and "My Fair Lady" are among the 25 movies tapped for preservation this year. The library chose a few more memorable titles such as "The Shining," "Eve's Bayou", "Hud" and "Broadcast News". Others on the list include "Something Good - Negro Kiss" and "Smoke Signals", along with animated films "Hair Piece: A Film for Nappy-Headed People" and "Cinderella". The library has selected movies for preservation because of their cultural, historic and artistic importance since the registry began in 1988. This year's picks bring the total number of films in the registry to 750. 美国国家电影目录即将迎来30岁生日，届时将新加入一批影片，内容涵盖广泛，从恐龙自灭绝中归来到西部牛仔同性爱情故事再到美国土著的故事。国会图书馆近日宣布，《侏罗纪公园》、《断背山》、《窈窕淑女》等25部电影被选定为2018年收录到这份电影保护目录的影片。国会图书馆还挑选了几部更加令人难忘的影片，比如《闪灵》、《仲夏夜玫瑰》、《原野铁汉》和《广播新闻》。其他入选影片包括《好东西：黑人之吻》、《烟雾信号》以及动画片《假发》和《仙履奇缘》。自1988年设立国家电影目录以来，国会图书馆一直选择具有文化、历史和艺术价值的影片加以保护。加上2018年收录的影片，该目录收录的电影总数将达到750部。

China's Invictus Gaming players celebrate after winning the 2018 LOL World Championship final match against European team Fnatic at Munhak stadium in Incheon, South Korea, November 3, 2018. [Photo/IC]

>Esports players burning out 职业电竞选手吃青春饭? Some of the world's top esports players work as many as 80 hours a week, with much of the time spent on marathon video game sessions that end up taking a physical and mental toll. One high-profile gamer, Indy Halpern, says that he sometimes practices for eight hours a day, which often leads to lower-back and wrist pain. Halpern also outlined the mental risks: "You always have that pressure on your shoulders that you have to perform," he says. Doug Gardner, a sports psychology consultant, recalled seeing "emaciated" players exhausted after relentless gameplay. In 2014, the gaming publication Polygon reported that it was normal for esports players to retire in their mid-20s because youth is a key determinant of excellent motor skills and reaction times - two essential qualities for a top gamer. 世界上一些顶级电子竞技选手每周工作时间长达80小时，大部分时间花在漫长累人的电子游戏训练上，最终付出了身体和精神上的双重代价。知名电竞玩家印迪?哈尔佩恩表示，他有时每天练习8小时，这常导致下背部和手腕疼痛。哈尔佩恩还提到了心理上的风险，他说："你一直承受着必须表现出色的压力。"据体育心理学顾问道格?加德纳回忆，他曾看到"瘦弱的"队员在没完没了的比赛后精疲力竭的样子。游戏行业出版物《多边形》2014年报道称，电竞选手在20多岁就退役是正常现象，因为年轻是出色的操作技能和反应时间的关键决定因素——对于顶级玩家来说，这两种素质至关重要。 Find more audio news on the China Daily app.

载说明：原创不易，未经授权，谢绝任何形式的转载

在当今互联网时代，用户体验是至关重要的。当我们在设计网站或应用程序时，一个漂亮、吸引人的界面往往是吸引用户并提高用户满意度的关键因素之一。而一个好看的表单则可以提高用户提交的意愿和效率。

本文将介绍如何使用HTML和CSS创建一个漂亮的毛玻璃输入表单卡片效果，以提高用户的体验和满意度。让我们开始吧！

HTML部分

首先，我们需要决定合适的字体。在我的例子中，我使用的是 Space Mono，你也可以使用 Roboto 或 Poppins。让我们将其导入到你的 HTML 中。

<link
      href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap"
      rel="stylesheet" />

现在是时候使用 HTML 创建结构了。

<body>
  <!-- 背景圆形容器 -->
  <div class="circles">
    <!-- 背景圆形1 -->
    <div class="circle circle-1"></div>
    <!-- 背景圆形2 -->
    <div class="circle circle-2"></div>
  </div>

  <!-- 输入容器 -->
  <div class="container">
    <!-- 标题 -->
    <h1>Enter Your Card Details</h1>

    <!-- 卡片容器 -->
    <div class="card">
      <!-- 卡片 logo -->
      <img class="logo" src="visa.png" />

      <!-- 卡片号码 -->
      <label>Card Number</label>
      <input class="card-number" placeholder="1234 1234 1234 1234" type="text" required maxlength="16" />

      <!-- 卡片详细信息容器 -->
      <div class="container2">
        <!-- 卡片持有人名字 -->
        <div class="name">
          <label>Card Holder</label>
          <input class="card-name" placeholder="ISRAEL ISRAELI" type="text" required />
        </div>

        <!-- 卡片过期日期 -->
        <div class="expiration-date">
          <label>Exp. Date</label>
          <input class="card-name" placeholder="10/25" type="text" maxlength="5" required />
        </div>

        <!-- 卡片 CCV 码 -->
        <div class="ccv">
          <label>CCV</label>
          <input class="card-name" placeholder="123" type="text" maxlength="3" required />
        </div>
      </div>
    </div>
  </div>
</body>

布局代码详细解释（如果你很熟悉了，请忽略）：

• div 标签（class="card"）：这是一个用于显示卡片详细信息的容器，它包含一个 logo 图像和卡片详细信息的输入字段。
• img 标签：这是一个用于显示卡片公司的 logo 图像。
• label 标签：这是一个用于指示输入字段的标签，它包含在输入字段之前。
• input 标签（class="card-number"）：这是一个用于输入卡片号码的文本框，它有一个占位符，指示用户输入正确的卡片号码，必填，最大长度为16。
• div 标签（class="container2"）：这是一个包含卡片详细信息的容器，包含了卡片持有人、过期日期和 CCV 码。
• div 标签（class="name"）：这是一个包含输入卡片持有人名字的容器，它包含一个标签和一个输入字段。
• input 标签（class="card-name"）：这是一个用于输入卡片持有人名字的文本框，必填。
• div 标签（class="expiration-date"）：这是一个包含输入卡片过期日期的容器，它包含一个标签和一个输入字段。
• input 标签（class="card-name"）：这是一个用于输入卡片过期日期的文本框，必填，最大长度为5。
• div 标签（class="ccv"）：这是一个包含输入卡片 CCV 码的容器，它包含一个标签和一个输入字段。
• input 标签（class="card-name"）：这是一个用于输入卡片 CCV 码的文本框，必填，最大长度为3。

关键的CSS部分

现在让我们深入研究 CSS。

现在，首先是背景圆形。我们必须将 border-radius 设为 50%，以使其成为圆形。

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(120deg, #1d976c, #2c3e50);
}

接下来是输入框样式的设置：

1. 对于输入框，我们需要使用 Mono Space 字体和底部边框来获得白色下划线。
2. 占位符是提供输入格式细节的最佳方式。

input {
  font-family: "Space Mono", monospace;
  border: none;
  font-size: 16px;
  height: 26px;
  color: #ffffff;
  background: 0;
  padding: 0;
  width: 0;
  border-bottom: 1px solid white;
  color: white
}

接下来标签设置（label），主要是要设置字体大小和字体。

label {
  color: white;
  font-size: 12px;
  font-weight: normal;
  font-family: "Space Mono", monospace;
  pointer-events: none;
  display: block;
  padding-bottom: 2px;
}

最后我们设置 card 容器的外观和布局

现在是最主要、最有趣的部分，如何使卡片看起来像玻璃。为此，我们只需要三个属性：backdrop-filter: blur(35px)、border: 2px solid rgba(255, 255, 255, 0.1)、box-shadow: 0 0 80px rgba(0, 0, 0, 0.25)。

backdrop-filter 属性将使卡片后面的内容模糊不清。

然后是 border 属性，它将给它一个漂亮的边框和描边。

现在最后但并非最不重要的是，我们要设置 box-shadow 属性，这将产生一个漂亮而干净的阴影效果。

.card {
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 420px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 20px 30px 30px 30px;
  overflow: hidden;
}

最后贴出完整的CSS代码

* {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: "Poppins", sans-serif;
  font-size: 30px;
  font-weight: 300;
  padding-left: 30px;
  padding-bottom: 20px;
  color: #ffffff;
  width: 420px;
  line-height: 1.5em;
  text-align: left;
}

textarea:focus,
input:focus {
  outline: none;
}

html,
body {
  height: 100%;
  width: 100%;
}

body {
  font-family: "Space Mono", monospace;
  background-color: rgb(240, 244, 247);
  background: linear-gradient(-70deg, #202020, #000000);

  margin: 0;
}

.circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(120deg, #1d976c, #2c3e50);
}
.circles {
  position: absolute;
  height: 270px;
  width: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}
.circle-1 {
  height: 300px;
  width: 300px;
  top: 100px;
  left: -50px;
  opacity: 0.8;
}

.circle-2 {
  height: 240px;
  width: 240px;
  bottom: 40px;
  right: -100px;
  opacity: 0.8;
}

.card {
  display: flex;
  flex-direction: column;
  height: 280px;
  width: 420px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(35px);
  border: 2px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 80px rgba(0, 0, 0, 0.25);
  padding: 20px 30px 30px 30px;
  overflow: hidden;
}

.logo {
  height: 80px;
  width: 100px;
  margin-bottom: 20px;
}

.card-number {
  font-size: 30px;
  font-family: "Space Mono", monospace;
  width: 100%;
  height: 50px;
  margin-bottom: 40px;
}

.card-number::placeholder {
  color: #b5b5b5;
  font-size: 30px;
  font-family: "Space Mono", monospace;
}

input::placeholder {
  color: #b5b5b5;
  font-family: "Space Mono", monospace;
}

.name {
  font-family: "Space Mono", monospace;
  padding: 0px 80px 0px 0px;
  margin-right: 40px;
  width: 100px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.expiration-date {
  font-family: "Space Mono", monospace;
  padding: 0px 0px 0px 0px;
  margin-right: 60px;
  width: 80px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.ccv {
  font-family: "Space Mono", monospace;
  padding: 0px 0px 0px 0px;
  margin-right: 0px;
  width: 60px;
  position: relative;
  display: inline-block;
  overflow: hidden;
}

input {
  font-family: "Space Mono", monospace;
  border: none;
  font-size: 16px;
  height: 26px;
  color: #ffffff;
  background: 0;
  padding: 0;
  width: 0;
  border-bottom: 1px solid white;
  color: white;
}

label {
  color: white;
  font-size: 12px;
  font-weight: normal;
  font-family: "Space Mono", monospace;
  pointer-events: none;
  display: block;
  padding-bottom: 2px;
}

.card-name {
  color: white;
  font-size: 16px;
  height: 26px;
  width: 160px;
  border-bottom: 1px solid white;
  color: white;
}

.container2 {
  display: flex;
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
}

结束

通过本文，我们学习了如何使用HTML和CSS创建漂亮的毛玻璃输入表单卡片效果。我们使用了Mono Space字体、bottom border和place-holder属性来为输入框添加样式，同时利用backdrop-filter、border和box-shadow属性为卡片添加了毛玻璃和阴影效果，使整个表单更加美观和有吸引力。

希望本文能够为大家提供一些灵感，同时也帮助大家了解如何使用CSS和HTML制作出吸引人的UI效果。到这里，本案例就介绍到这里，建议大家还是亲自实践下，才能印象深刻。感谢你的阅读。

文章创作不易，如果你喜欢我的分享，别忘了点赞转发，让更多有需要的人看到，最后别忘记关注「前端达人」，你的支持将是我分享最大的动力，后续我会持续输出更多内容，敬请期待。

案例地址地址：https://codepen.io/lalit0111/pen/GRGJYgo

来源：https://medium.com/@algopoint.ltd/how-to-create-a-credit-card-input-using-html-css-glassmorphism-884a659e3f59

作者：AlgoPoint

非直接翻译，有自行改编和添加部分，翻译水平有限，难免有疏漏，欢迎指正