【每日一练】184—CSS 实现的弹窗动画效果

每日一练9个月前发布 admin
1,006 0

昨天,我尝试着用AI来写一个简单的效果,写完后,我跟大家分享了AI写的代码,看完AI写的代码后,我觉得AI取代不了程序员这个职业,毕竟机器不是人,机器只能按照命令行事。

再说了,如果没有了程序员这个可爱的群体,AI除了问题,谁来修复它们?所以,大家不用担心,保持学习的热情,AI永远也取代不了人。

我们要做的就是学习AI,然后合理使用AI就好了。

现在,我们还是一起来看一下今天这个练习的最终效果:

【每日一练】184—CSS 实现的弹窗动画效果

点击【阅读更多】后,我们会看到一个新的弹窗内容,截图如下:

【每日一练】184—CSS 实现的弹窗动画效果

点击右上角的【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;
}
}

写在最后

以上就是每日一练的全部内容,希望今天的小练习对你有用,如果你觉得有帮助的话,请点赞我,关注我,并将它分享给你身边做开发的朋友,也许能够帮助到他。

我是杨小爱,我们明天见。

© 版权声明

相关文章

暂无评论

暂无评论...