【每日一练】12—CSS产品卡片动画效果的实现

写在前面

在软件开发中&＃xff0c;CSS真的是很特别的存在&＃xff0c;严格意义上来讲&＃xff0c;CSS并不是一门编程语言&＃xff0c;表面上看&＃xff0c;它好像很简单&＃xff0c;其实&＃xff0c;在大型的开发项目中&＃xff0c;CSS有多复杂&＃xff0c;只有写过的人才知道。

记得有次&＃xff0c;我跟一个安卓开发的同事聊天&＃xff0c;他问我&＃xff0c;你是怎么学会CSS的呀&＃xff1f;有什么学习技巧吗&＃xff1f;这CSS太复杂了。我说&＃xff0c;其实也没有什么技巧&＃xff0c;就是天天写&＃xff0c;比起你写JAVA&＃xff0c;这CSS还是容易很多。

因为我觉得会写JAVA的人比我这个会写CSS的人厉害多了&＃xff0c;想当年&＃xff0c;老师在学校里教我们JAVA的时候&＃xff0c;我都没有学会&＃xff0c;毕业后&＃xff0c;JAVA都还给老师了。

因此&＃xff0c;关于CSS的学习&＃xff0c;真的没有什么技巧&＃xff0c;就是需要多练习&＃xff0c;多看&＃xff0c;把自己看到的各种好玩又有趣的案例都实现一下&＃xff0c;写得多了&＃xff0c;慢慢也就熟悉了&＃xff0c;我想这个就是学习CSS的技巧吧。

接下来&＃xff0c;我们一起来看看今天的小项目&＃xff0c;效果如下&＃xff1a;

HTML代码&＃xff1a;

算法面试通关40讲

前Facebook工程师带你吃透大厂面试题;前Facebook工程师带你吃透大厂面试题;前Facebook工程师带你吃透大厂面试题前Facebook工程师带你吃透大厂面试题;前Facebook工程师带你吃透大厂面试题;前Facebook工程师带你吃透大厂面试题&＃xff1b;前Facebook工程师带你吃透大厂面试题前Facebook工程师带你吃透大厂面试题;前Facebook工程师带你吃透大厂面试题;前Facebook工程师带你吃透大厂面试题&＃xff1b;学习更多>>

零基础学Python

掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;掌握AI时代的编程语言&＃xff1b;学习更多>>

Vue开发实战

帮助你从0开始搭建大型Vue项目&＃xff1b;掌握Vue核心知识点和实现原理&＃xff1b;熟悉Vue生态及相关工具的使用&＃xff1b;打通前端工程化全链路技能点&＃xff1b;具备开发大型前端项目的能力从0开始搭建大型Vue项目&＃xff1b;掌握Vue核心知识点和实现原理&＃xff1b;熟悉Vue生态及相关工具的使用&＃xff1b;打通前端工程化全链路技能点&＃xff1b;具备开发大型前端项目的能力&＃xff1b;熟悉Vue生态及相关工具的使用&＃xff1b;打通前端工程化全链路技能点&＃xff1b;具备开发大型前端项目的能力&＃xff1b;学习更多>>

CSS代码&＃xff1a;

body
{margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #00a6bc;font-family: &＃39;Poppins&＃39;, sans-serif;
}
.container
{width: 1000px;display: flex;flex-wrap: wrap;justify-content: space-between;
}
.box
{position: relative;width: 300px;height: 400px;background: #000;box-shadow: 0 30px 30px rgba(0,0,0,.5);
}
.box .imgBx
{position: absolute;top: 0;left: 0;width: 100%;height: 100%;
}
.box .imgBx img
{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: 0.5s;
}
.box:hover .imgBx img
{opacity: 0;
}
.box .content
{position: absolute;bottom: 20px;left: 10%;width: 80%;height: 60px;background: #fafafa;transition: 0.5s;overflow: hidden;padding: 15px;box-sizing: border-box;
}
.box:hover .content
{width: 100%;height: 100%;bottom: 0;left: 0;
}
.box .content h3
{margin: 0;padding: 0;font-size: 20px;text-align: center;
}
.box .content p
{margin: 10px 0 0;padding: 0;opacity: 0;line-height: 1.6em;transition: 0.5s;text-align:justify;
}
.box .content p a {color:#222;text-decoration:none}
.box .content p :hover {color:#00a6bc;
}
.box:hover .content p
{opacity: 1;transition-delay: 0.5s;
}

写在最后

其实&＃xff0c;这样的练习还是很实用的&＃xff0c;在视频号上&＃xff0c;我也跟大家分享过一些这样的案例&＃xff0c;具体如下&＃xff1a;

这种案例写多了&＃xff0c;慢慢就会摸索出一些套路&＃xff0c;大家可以去试试&＃xff0c;当然&＃xff0c;同样一种效果&＃xff0c;实现的方式方法有多种&＃xff0c;但是&＃xff0c;我们可以掌握一两种比较常用的方法即可。

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

我是杨小爱&＃xff0c;我们明天见。

学习更多技能

请点击下方公众号