做属于公司的网站有什么好处asp网站做消息提醒功能

当前位置： 首页 > news >正文

做属于公司的网站有什么好处,asp网站做消息提醒功能,西宁市城市道路建设规划网站,卧龙区微网站建设前言#xff1a; 前言#xff1a;在学习完HTML和CSS之后#xff0c;我们就可以开始做一些小项目了#xff0c;本篇文章所讲的小项目为——视觉冲击卡片 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 先让我们看一下效果 前言在学习完HTML和CSS之后我们就可以开始做一些小项目了本篇文章所讲的小项目为——视觉冲击卡片 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 先让我们看一下效果 那么我们如何去实现这样的小案例呢在下文中我们对每一段重要的代码都进行了解释读者可以根据注释对代码进行理解。 1.HTML代码 !DOCTYPE html html langenhead!– 设置文档使用的字符编码为UTF-8 –meta charsetUTF-8!– 响应式设计页面宽度等于设备宽度初始缩放为1.0 –meta nameviewport contentwidthdevice-width, initial-scale1.0!– 网页标题 –titlezjy/title!– 引入样式表视觉冲击卡片.css –link relstylesheet href./视觉冲击卡片.css /headbody!– 网页内容部分 –div classshell!– 第一个卡片 –div classcard!– 卡片内部包裹层 –div classwrapper!– 卡片封面图片 –img src./image/01.png alt classcover-image/div!– 卡片标题文本 –img src./image/text-1.png alt classtitle!– 卡片角色图片 –img src./image/02.png alt classcharacter/div!– 第二个卡片 –div classcard!– 卡片内部包裹层 –div classwrapper!– 卡片封面图片 –img src./image/03.png alt classcover-image/div!– 卡片标题文本 –img src./image/text-2.png alt classtitle!– 卡片角色图片 –img src./image/04.png alt classcharacter/div/div/body/html这段HTML代码是一个基本的网页模板展示了两个卡片card每个卡片包含一个封面图片cover-image、一个标题文本title、以及一个角色图片character。注释部分解释了每个标签的作用和功能。 2.CSS代码 /* 通用样式重置 */

• {padding: 0;margin: 0;box-sizing: border-box; }/* 设置整个页面的样式 / body {width: 100vw; / 页面宽度等于视口宽度 /height: 100vh; / 页面高度等于视口高度 /display: flex; / 使用flex布局 /justify-content: center; / 水平居中 /align-items: center; / 垂直居中 /background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%); / 设置背景为线性渐变色 / }/ 外层容器样式 / .shell {display: flex; / 使用flex布局 /justify-content: center; / 水平居中 /align-items: center; / 垂直居中 / }/ 卡片样式 / .card {width: 270px; / 卡片宽度 /height: 545px; / 卡片高度 /position: relative; / 相对定位用于内部绝对定位元素的参考 /display: flex; / 使用flex布局 /justify-content: center; / 水平居中 /align-items: center; / 垂直居中 /padding: 0 25px; / 内边距 /perspective: 2500px; / 设置透视效果的观察距离 /transition: all 0.5s; / 所有属性变化过渡效果时长为0.5秒 /margin: 0 100px; / 外边距控制卡片之间的间距 / }/ 卡片内部包裹层样式 / .wrapper {transition: all 0.7s; / 所有属性变化过渡效果时长为0.7秒 /position: absolute; / 绝对定位相对于父级卡片 /width: 100%; / 宽度占满父级卡片 /z-index: -1; / 层级设置为低于卡片用于显示卡片上的其他内容 / }/ 卡片封面图片样式 / .cover-image {width: 100%; / 图片宽度占满父级容器 // 可选如果取消注释可能导致图片拉伸变形 // height: 100%; / }/ 卡片标题文本样式 / .title {width: 100%; / 标题文本宽度占满父级容器 /transition: transform 0.7s; / transform属性变化过渡效果时长为0.7秒 / }/ 卡片角色图片样式 / .character {width: 100%; / 图片宽度占满父级容器 /opacity: 0; / 初始设置为透明 /transition: all 0.7s; / 所有属性变化过渡效果时长为0.7秒 /position: absolute; / 绝对定位相对于父级卡片 /z-index: -1; / 层级设置为低于卡片用于显示卡片上的其他内容 / }/ 鼠标悬停时内部包裹层的效果 / .card:hover .wrapper {transform: perspective(900px) translateY(-5%) rotateX(25deg) translateZ(0); / 应用透视效果和旋转效果 /box-shadow: 2px 35px 32px -8px rgba(0, 0, 0, 0.75); / 添加阴影效果 / }/ 卡片内部包裹层的伪元素样式 / .wrapper::before, .wrapper::after {content: ; / 添加伪元素内容 /opacity: 0; / 初始设置为透明 /width: 100%; / 宽度占满包裹层 /height: 80px; / 高度设置为80px /transition: all 0.7s; / 所有属性变化过渡效果时长为0.7秒 /position: absolute; / 绝对定位相对于父级包裹层 /left: 0; / 定位到左边界 / }/ 包裹层的上方伪元素样式 / .wrapper::before {top: 0; / 定位到上边界 /height: 100%; / 高度占满包裹层 // 使用线性渐变背景色 /background-image: linear-gradient(to top,transparent 46%,rgba(12, 13, 19, 0.5) 68%,rgba(12, 13, 19) 97%); }/ 包裹层的下方伪元素样式 / .wrapper::after {bottom: 0; / 定位到下边界 /opacity: 1; / 设置为不透明 // 使用线性渐变背景色 /background-image: linear-gradient(to bottom,transparent 46%,rgba(12, 13, 19, 0.5) 68%,rgba(12, 13, 19) 97%); }/ 鼠标悬停时伪元素的效果 / .card:hover .wrapper::before, .wrapper::after {opacity: 1; / 设置为不透明 / }/ 鼠标悬停时下方伪元素的高度增加 / .card:hover .wrapper::after {height: 120px; / 高度增加到120px / }/ 鼠标悬停时标题文本的位移效果 / .card:hover .title {transform: translate3d(0%, -50px, 100px); / 应用位移和透视效果 / }/ 鼠标悬停时角色图片的显示和位移效果 / .card:hover .character {opacity: 1; / 设置为不透明 /transform: translate3d(0%, -20%, 100px); / 应用位移和透视效果 / }/ 鼠标悬停时整个卡片的位移效果 / .card:hover {transform: translateY(40px); / 卡片垂直位移 / }这段CSS代码实现了以下功能和效果 通用样式重置 ( {…}): 清除了所有元素的内外边距以及盒模型的设置确保样式表现一致性。 页面样式 (body {…}): 设置了整个页面居中显示并使用了线性渐变背景色作为背景。 外层容器样式 (shell {…}): 通过flex布局使得包裹卡片的外层容器在页面中水平和垂直居中显示。 卡片样式 (card {…}): 定义了卡片的基本样式包括尺寸、位置、内边距、透视效果和过渡动画效果。每个卡片具有固定的宽度和高度并且当鼠标悬停在卡片上时会产生动态的变化效果。 卡片内部包裹层样式 (wrapper {…}): 内部包裹层采用绝对定位使得卡片的内容封面图片、标题、角色图片可以在动画效果中自由变换位置和形态。 鼠标悬停效果 (card:hover {…}): 当鼠标悬停在卡片上时通过CSS选择器 .card:hover触发内部元素封面、标题、角色图片的动态效果。例如内部包裹层会应用透视变换和旋转效果标题会有位移效果角色图片会显示和位移等。 卡片内部包裹层的伪元素样式 (wrapper::before, wrapper::after {…}): 为卡片内部的包裹层添加了两个伪元素用于创建上下渐变遮罩效果。这些伪元素在鼠标悬停时透明度变化和高度变化产生渐变效果的动画。
  这样我们的案例就讲解完毕了 以上就是本篇文章的全部内容了~~~