昨天，我尝试着用AI来写一个简单的效果，写完后，我跟大家分享了AI写的代码，看完AI写的代码后，我觉得AI取代不了程序员这个职业，毕竟机器不是人，机器只能按照命令行事。
再说了，如果没有了程序员这个可爱的群体，AI除了问题，谁来修复它们?所以，大家不用担心，保持学习的热情，AI永远也取代不了人。
我们要做的就是学习AI，然后合理使用AI就好了。
现在，我们还是一起来看一下今天这个练习的最终效果：
点击【阅读更多】后，我们会看到一个新的弹窗内容，截图如下：
点击右上角的【X】按钮，可以进行关闭，回到之前的卡片页面。
因为录GIF文件有点大,公号后台禁止上传，所以做了截图处理，如果录视频的话，后台还需要审核，所以，大家想看实际效果，请将代码拷贝到本地进行测试查看。
具体代码如下：
HTML代码：
<!DOCTYPE html>
<html >
<head>
<meta charset=”UTF-8″>
<title>【每日一练】184—CSS 实现的弹窗动画效果</title>
<link rel=”stylesheet” href=”css/style.css”>
</head><body>
<div class=”page”>
<div class=”page__demo”>
<div class=”main-container page__container”>
<article class=”card”>
<header class=”card__header”>
<img class=”card__preview” src=”01.jpg” alt=”Preview img”>
<h3 class=”card__title”><a href=”#popup-article” class=”card__link”>《有钱人和你想的不一样》</a></h3>
</header>
<div class=”card__body”>
<div class=”card__content”>
<p>
《有钱人和你想的不一样》成为有钱人需要懂的五个财富思维，穷人与富人之间的差距到底在哪里？
</p>
</div>
<footer class=”card__footer”>
<a href=”#popup-article” class=”card__link card__readmore”>阅读更多</a>
<div class=”card__meta”>
<span class=”card__meta-label card__meta-comments”>47</span>
<span class=”card__meta-label card__meta-likes”>99</span>
</div>
</footer>
</div>
</article>
</div>
</div>
</div>
<div id=”popup-article” class=”popup”>
<div class=”popup__block”>
<h1 class=”popup__title”>《有钱人和你想的不一样》</h1>
<p>有时候，我在想为什么有的人可以白手起家，从一无所有到亿万富翁，而我们大部分人也一样辛苦工作，却还是需要为钱发愁，直到我把《有钱人和你想的不一样》这本书看完后，我终于明白了我们大部分人为什么要为钱发愁了。</p>
<img src=”01.jpg” class=”popup__media popup__media_right” alt=”The foto of nature”>
<p>因为，我们缺少有钱人的思维方式与行动模式，或者说，我们不像我们想象的那么成功富有，那么就是有些事情我们还不知道。</p>
<p>如果我们具备有钱人的思考方式，像有钱人那样行动做事情，我们会不会也会成为有钱人呢？有钱人的脑袋真的比穷人的脑袋要聪明吗？</p>
<p>今天，我们就一起跟着作者哈维艾克（T. Harv Eker）去深入的了解一下有钱人的思维方式，以及有钱人与穷人之间的根本差距在哪里？看看到底我们为什么还没有成为有钱人？为什么有些人注定会变得富有，有些人却注定一辈子需要为钱奔波？ </p>
<p>作者在书中跟我们分享了17种有钱人的态度和行动方法，在这里，我把其中我认为最为精彩的5个内容分享给你。希望，你通过我的分享，能获得一些启发，能像有钱人那样去思考与行动，最终实现财务自由。 </p>
<p>这个世界上，看不见的东西，它的威力远胜过我们看得见的东西，也许你不太同意这个说法。</p>
<p>想象一棵树，假如这棵树就是我们的生命之树，树上结满了果实，这些果实就是我们的成绩，当我们看到这些果实时，有可能我们会觉得这些果实不够好，数量不够多，果子太小，或者是因为它不好吃。.</p>
<p>因为，我们缺少有钱人的思维方式与行动模式，或者说，我们不像我们想象的那么成功富有，那么就是有些事情我们还不知道。</p>
<p>如果我们具备有钱人的思考方式，像有钱人那样行动做事情，我们会不会也会成为有钱人呢？有钱人的脑袋真的比穷人的脑袋要聪明吗？</p>
<p>今天，我们就一起跟着作者哈维艾克（T. Harv Eker）去深入的了解一下有钱人的思维方式，以及有钱人与穷人之间的根本差距在哪里？看看到底我们为什么还没有成为有钱人？为什么有些人注定会变得富有，有些人却注定一辈子需要为钱奔波？ </p>
<p>作者在书中跟我们分享了17种有钱人的态度和行动方法，在这里，我把其中我认为最为精彩的5个内容分享给你。希望，你通过我的分享，能获得一些启发，能像有钱人那样去思考与行动，最终实现财务自由。 </p>
<p>这个世界上，看不见的东西，它的威力远胜过我们看得见的东西，也许你不太同意这个说法。</p>
<p>想象一棵树，假如这棵树就是我们的生命之树，树上结满了果实，这些果实就是我们的成绩，当我们看到这些果实时，有可能我们会觉得这些果实不够好，数量不够多，果子太小，或者是因为它不好吃。.</p>
<a href=”#” class=”popup__close”>close</a>
</div>
</div></body>
</html>
CSS代码：
.card{
box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 1px 5px 0 rgba(0,0,0,0.12),0 3px 1px -2px rgba(0,0,0,0.2);
max-width: 480px;
background-color: #fff;
}.card__header{
position: relative;
}.card__header:before{
content: “”;
width: 100%;
height: 100%;
background-image: -webkit-linear-gradient(top, transparent 30%, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .7));
background-image: linear-gradient(to bottom, transparent 30%, rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, .7));position: absolute;
left: 0;
bottom: 0;
}.card__title{
font-size: 2.2rem;
font-weight: 400;
color: #fff;
text-transform: uppercase;
line-height: 1.5;padding-left: 2rem;
padding-right: 2rem;
margin-top: 0;
margin-bottom: 0;position: absolute;
bottom: 2rem;
left: 0;
}.card__link{
color: inherit;
text-decoration: none;
}.card__preview{
max-width: 100%;
display: block;
}.card__body{
padding: 3rem 2.5rem 2rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
}.card__content{
-webkit-box-flex: 2;
-ms-flex-positive: 2;
flex-grow: 2;
}.card__footer{
font-size: 1.4rem;
border-top: 1px solid #f0f0f0;
margin-top: 3rem;
padding-top: 2rem;display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}.card__readmore{
text-transform: uppercase;
color: #512da8;
}.card__meta{
-webkit-box-flex: 0;
-ms-flex: none;
flex: none;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}.card__meta-label{
display: inline-block;
padding-left: 2.2rem;background-repeat: no-repeat;
background-size: 1.6rem;
background-position: 1% center;
}.card__meta-label:not(:first-child){
margin-left: 1.5rem;
}.card__meta-comments{
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMjEyMTIxIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTIxLjk5IDRjMC0xLjEtLjg5LTItMS45OS0ySDRjLTEuMSAwLTIgLjktMiAydjEyYzAgMS4xLjkgMiAyIDJoMTRsNCA0LS4wMS0xOHpNMTggMTRINnYtMmgxMnYyem0wLTNINlY5aDEydjJ6bTAtM0g2VjZoMTJ2MnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==);
background-position: 1% 75%;
}.card__meta-likes{
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMjEyMTIxIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgMjEuMzVsLTEuNDUtMS4zMkM1LjQgMTUuMzYgMiAxMi4yOCAyIDguNSAyIDUuNDIgNC40MiAzIDcuNSAzYzEuNzQgMCAzLjQxLjgxIDQuNSAyLjA5QzEzLjA5IDMuODEgMTQuNzYgMyAxNi41IDMgMTkuNTggMyAyMiA1LjQyIDIyIDguNWMwIDMuNzgtMy40IDYuODYtOC41NSAxMS41NEwxMiAyMS4zNXoiLz48L3N2Zz4=);
}/* popup */
.popup{
width: 100%;
height: 100vh;
display: none;position: fixed;
top: 0;
right: 0;
}#popup-article:target{
display: block;
}.popup__block{
height: calc(100vh – 40px);
padding: 5% 15%;
box-sizing: border-box;margin-top: 20px;
overflow: auto;
-webkit-animation: fade .5s ease-out 1.3s both;
animation: fade .5s ease-out 1.3s both;
}.popup:before{
content: “”;
box-sizing: border-box;
width: 100%;box-shadow: inset 0 0 0 20px #f0f0f0;
background: #fff;position: fixed;
top: 50%;
will-change: height, top;
-webkit-animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
animation: open-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) .65s both;
}.popup:after{
content: “”;
width: 0;
height: 2px;
background-color: #f0f0f0;will-change: width, opacity;
-webkit-animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;
animation: line-animation .6s cubic-bezier(0.83, 0.04, 0, 1.16) both;position: absolute;
top: 50%;
left: 0;
margin-top: -1px;
}@-webkit-keyframes line-animation{
0%{
width: 0;
opacity: 1;
}99%{
width: 100%;
opacity: 1;
}100%{
width: 100%;
opacity: 0;
}
}@keyframes line-animation{
0%{
width: 0;
opacity: 1;
}99%{
width: 100%;
opacity: 1;
}100%{
width: 100%;
opacity: 0;
}
}@-webkit-keyframes open-animation{
0%{
height: 0;
top: 50%;
}100%{
height: 100vh;
top: 0;
}
}@keyframes open-animation{
0%{
height: 0;
top: 50%;
}100%{
height: 100vh;
top: 0;
}
}@-webkit-keyframes fade{
0%{
opacity: 0;
}100%{
opacity: 1;
}
}@keyframes fade{
0%{
opacity: 0;
}100%{
opacity: 1;
}
}.popup__title{
margin: 0 0 1em;
}.popup__close{
width: 3.2rem;
height: 3.2rem;
text-indent: -9999px;
position: absolute;background-repeat: no-repeat;
background-position: center center;
background-size: contain;
background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjMDAwMDAwIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSIyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTE5IDYuNDFMMTcuNTkgNSAxMiAxMC41OSA2LjQxIDUgNSA2LjQxIDEwLjU5IDEyIDUgMTcuNTkgNi40MSAxOSAxMiAxMy40MSAxNy41OSAxOSAxOSAxNy41OSAxMy40MSAxMnoiLz4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPjwvc3ZnPg==);
}.popup__media{
margin-bottom: 2rem;
}@media screen and (min-width: 641px){
.popup__title{
font-size: 3.8rem;
}.popup__close{
top: 40px;
right: 40px;
}.popup__media{
max-width: 35%;
}.popup__media_left{
float: left;
margin-right: 3rem;
}.popup__media_right{
float: right;
margin-left: 3rem;
}
}@media screen and (max-width: 640px){
.popup__title{
font-size: 2.2rem;
}.popup__close{
top: 20px;
right: 20px;
}
}@media screen and (min-width: 768px){
html{
font-size: 62.5%;
}
}@media screen and (max-width: 767px){
html{
font-size: 50%;
}
}body{
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
font-size: 1.6rem;
color: #222;
background-color: #512da8;margin: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}p{
margin: 0;
line-height: 1.5;
}p:not(:last-child){
margin-bottom: 1.5rem;
}img{
display :block;
max-width: 100%;
}a{
text-decoration: none;
color: #039be5;
}.page{
min-height: 100vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: distribute;
justify-content: space-around;
}.page__demo{
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}.main-container{
max-width: 1200px;
padding-left: 1rem;
padding-right: 1rem;margin-left: auto;
margin-right: auto;
}.page__container{
margin: auto;
}.footer{
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
font-size: 1.4rem;
}.footer__link{
color: #fff;
}@media screen and (min-width: 361px){
.footer__container{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
}@media screen and (max-width: 360px){
.melnik909{
display: none;
}
}
写在最后
以上就是每日一练的全部内容，希望今天的小练习对你有用，如果你觉得有帮助的话，请点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。
我是杨小爱，我们明天见。
相关文章
