建一个wordpress网站成本,投资项目网站建设方案,代理注册公司的风险,企业网站的好处目录
1、从最基本的页面开始
2、添加图像/浮层部分
3、位置调整
4、添加动效
4.1、添加浮层动效
4.2、添加背景动画 根据前面css的学习#xff0c;本篇来实践下前面学习的知识#xff0c;主要实现如下这样的效果。 下面我们一步步实现上面的效果。
1、从最基本的页面开…
目录
1、从最基本的页面开始
2、添加图像/浮层部分
3、位置调整
4、添加动效
4.1、添加浮层动效
4.2、添加背景动画 根据前面css的学习本篇来实践下前面学习的知识主要实现如下这样的效果。 下面我们一步步实现上面的效果。
1、从最基本的页面开始 如下是最基本的一个页面
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS基础学习记录6/titlestyle/style
/headbody/body/html 没错就是啥也没有只是一个最基本的html框架接下来我们开始往里面加代码。 首先加了一个盒子div代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS基础学习记录6/titlestyle* {margin: 0;padding: 0;}body {background-color: antiquewhite;}.box {margin: 0 auto;background-color: chartreuse;margin-top: 45px;width: 200px;height: 200px;}/style
/headbodydiv classbox/div
/body/html 运行效果如下 代码分析 * {margin: 0;padding: 0;} 这是一个通用选择器会匹配所有的html元素这里把margin、padding都设置为0默认会有一个padding、maring。
body {background-color: antiquewhite;}.box {margin: 0 auto;background-color: chartreuse;margin-top: 45px;width: 200px;height: 200px;} 首先使用标签选择器(body)设置了body的背景色然后使用类选择器(.box)创建了一个box类该选择器的效果是创建了一个宽高都是200px的区域同时外边距上边为45px水平居中。
2、添加图像/浮层部分 现在将在box里面添加一张图像以及一个浮层图像是背景浮层则是可以浮动的代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS基础学习记录6/titlestyle* {margin: 0;padding: 0;}body {background-color: antiquewhite;}.box {margin: 0 auto;background-color: chartreuse;margin-top: 45px;width: 200px;height: 200px;}img {width: 200px;height: 200px;}.cover {margin: 0 auto;background-color: rgb(144, 167, 30);width: 200px;height: 200px;}/style
/headbodydiv classboximg src./images/1.jpg /div classcover //div
/body/html 运行效果如下 CSS部分增加了如下代码 img {width: 200px;height: 200px;}.cover {margin: 0 auto;background-color: rgb(144, 167, 30);width: 200px;height: 200px;} 标签选择器img定义了图像的宽高都是200px.cover类选择器定义了一个宽高都是200px的浮层该浮层是要覆盖在图片上的接下来我们调整下浮层的位置让它覆盖在图像上面。
3、位置调整 现在把浮层移动到图像上面为了方便区分给浮层加了个透明度以便透出下面的图片代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS基础学习记录6/titlestyle* {margin: 0;padding: 0;}body {background-color: antiquewhite;}.box {margin: 0 auto;background-color: chartreuse;margin-top: 45px;width: 200px;height: 200px;position: relative;}img {width: 200px;height: 200px;}.cover {margin: 0 auto;background-color: rgb(144, 167, 30);width: 200px;height: 200px;opacity: 0.8;position: absolute;top: 0;left: 0;}/style
/headbodydiv classboximg src./images/1.jpg /div classcover //div
/body/html 运行效果如下 相比之前的代码增加了如下部分定位的代码 4、添加动效 现在来到精彩部分我们将添加鼠标移动到图像上时的动效。
4.1、添加浮层动效 添加浮层动效前我们先调整下浮层的位置CSS中.cover的left为100%效果如下 现在我们要实现鼠标移动到box范围时浮层会执行动画移动到图像上图像首先会隐藏代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS基础学习记录6/titlestyle* {margin: 0;padding: 0;}body {background-color: antiquewhite;}.box {margin: 0 auto;background-color: chartreuse;margin-top: 45px;width: 200px;height: 200px;position: relative;overflow: hidden;}img {width: 200px;height: 200px;}.cover {margin: 0 auto;background-color: rgb(144, 167, 30);width: 200px;height: 200px;opacity: 0.8;position: absolute;top: 0;left: 100%;transition: all 0.5s;}.box:hover .cover{left: 0;}/style
/headbodydiv classboximg src./images/1.jpg /div classcover //div
/body/html .box增加了CSS代码overflow: hidden;使得超出box的部分会被隐藏实现动画主要是新增了如下代码 .cover里面新增的transition: all 0.5s;表示所有属性都参与动画执行时间是0.5秒不要少了后面的s选择器 .box:hover .cover表示当鼠标经过box范围时将会选择后代.cover而.cover将属性left设置为0结果是动画从右边出现移动到与图像重合。
4.2、添加背景动画 添加了背景动效的代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS基础学习记录6/titlestyle* {margin: 0;padding: 0;}body {background-color: antiquewhite;}.box {margin: 0 auto;background-color: chartreuse;margin-top: 45px;width: 200px;height: 200px;position: relative;overflow: hidden;}img {width: 200px;height: 200px;transition: all 0.5s;}.cover {margin: 0 auto;background-color: rgb(144, 167, 30);width: 200px;height: 200px;opacity: 0.8;position: absolute;top: 0;left: 100%;transition: all 0.5s;}.box:hover .cover {left: 0;}.box:hover img {transform: scale(1.2);}/style
/headbodydiv classboximg src./images/1.jpg /div classcover //div
/body/html 与添加浮层动效类似主要是添加了如下CSS代码 位于img中的CSS代码transition: all 0.5s;表面img的所有属性都参与动画时间是0.5s而选择器.box:hover img则表示鼠标经过box范围时触发img的动效CSS代码transform: scale(1.2);表面图片放大1.2倍。 至此完成了一开始提到了动效。完整代码如下
!DOCTYPE html
htmlheadmeta charsetutf-8titleCSS基础学习记录6/titlestyle* {margin: 0;padding: 0;}body {background-color: antiquewhite;}.box {margin: 0 auto;background-color: chartreuse;margin-top: 45px;width: 200px;height: 200px;position: relative;overflow: hidden;}img {width: 200px;height: 200px;transition: all 0.5s;}.cover {margin: 0 auto;background-color: rgb(144, 167, 30);width: 200px;height: 200px;opacity: 0.8;position: absolute;top: 0;left: 100%;transition: all 0.5s;}.box:hover .cover {left: 0;}.box:hover img {transform: scale(1.2);}/style
/headbodydiv classboximg src./images/1.jpg /div classcover //div
/body/html
