서문: HTML, CSS 및 JavaScript를 배운 후 몇 가지 작은 프로젝트를 시작할 수 있습니다. 이 기사에서 논의되는 작은 프로젝트는 Bao Changlian 형제입니다.
✨✨✨Saury Not Dreaming의 블로그입니다
✨✨✨더 알고 싶으시면 제 홈페이지를 방문해 주세요. Saury Does Not Dream-CSDN Blog
먼저 효과를 살펴보겠습니다.
그렇다면 이렇게 작은 사례를 어떻게 구현합니까? 다음에서는 코드의 중요한 부분을 각각 설명하며, 독자는 주석을 통해 코드를 이해할 수 있습니다.
1. 스켈레톤 - HTML 코드
HTML 코드:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>秋刀鱼不做梦</title>
<!-- 引入外部样式表 -->
<link rel="stylesheet" href="./表情.css">
</head>
<body>
<!-- 表情图标的列表 -->
<ul id="emoji">
<!-- 第一层，深度为0.2 -->
<li class="layer" data-depth="0.2">
<!-- 面部 -->
<div class="face"></div>
</li>
<!-- 第二层，深度为0.3 -->
<li class="layer" data-depth="0.3">
<!-- 光泽 -->
<div class="shine"></div>
</li>
<!-- 第三层，深度为0.8 -->
<li class="layer" data-depth="0.8">
<!-- 左眼 -->
<div class="eye left"></div>
</li>
<!-- 第三层，深度为0.8 -->
<li class="layer" data-depth="0.8">
<!-- 右眼 -->
<div class="eye right"></div>
</li>
<!-- 第三层，深度为0.8 -->
<li class="layer" data-depth="0.8">
<!-- 嘴巴 -->
<div class="mouth"></div>
</li>
</ul>
</body>
</html>
물론 HTML 뼈대를 구축한 후에도 지금은 결과를 볼 수 없으므로 수정하겠습니다.
2. 수정 - CSS 코드
CSS 코드:
:root {
--shine: rgb(251, 136, 200); /* 定义自定义属性：光泽颜色 */
--primary-color: rgb(248, 175, 40); /* 定义自定义属性：主色 */
--secondary-color: rgb(230, 63, 2); /* 定义自定义属性：次色 */
--accent-color: rgb(58, 25, 25); /* 定义自定义属性：强调色 */
--black-fade: rgb(120, 40, 6); /* 定义自定义属性：淡化的黑色 */
--dark-blue: rgb(84, 84, 174); /* 定义自定义属性：深蓝色 */
}
* {
padding: 0; /* 重置所有元素的内边距为0 */
margin: 0; /* 重置所有元素的外边距为0 */
list-style: none; /* 去掉列表项的默认样式 */
}
body {
display: flex; /* 采用flex布局 */
align-items: center; /* 垂直方向居中 */
justify-content: center; /* 水平方向居中 */
height: 100vh; /* 高度设为视口高度 */
overflow: hidden; /* 隐藏超出视口的内容 */
background-color: #9197f1; /* 设置背景颜色为淡紫色 */
}
#emoji {
position: relative; /* 相对定位 */
width: 450px; /* 宽度设为450像素 */
height: 400px; /* 高度设为400像素 */
transform: translate3d(0, 0, 0); /* 启用3D转换，保持默认值 */
}
.layer {
position: absolute; /* 绝对定位 */
width: 100%; /* 宽度设为父元素的100% */
height: 100%; /* 高度设为父元素的100% */
}
.face {
position: absolute; /* 绝对定位 */
top: 0; right: 0; bottom: 0; left: 0; /* 四边都设为0以居中 */
margin: auto; /* 自动计算外边距，以保证居中 */
width: 230px; /* 宽度设为230像素 */
height: 230px; /* 高度设为230像素 */
background-color: #FECA32; /* 设置背景颜色为黄色 */
border-radius: 100%; /* 圆形边框 */
box-shadow: inset rgba(0, 0, 0, 0.4) 0 0 30px; /* 内部投影，制造深度感 */
transition: .3s; /* 设置过渡效果时间为0.3秒 */
}
.shine {
position: absolute; /* 绝对定位 */
top: 0; right: 0; bottom: 0; left: 0; /* 四边都设为0以居中 */
margin: auto; /* 自动计算外边距，以保证居中 */
width: 194px; /* 宽度设为194像素 */
height: 206px; /* 高度设为206像素 */
background: linear-gradient(to bottom, #FFFFFF,
rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0)); /* 设置线性渐变背景 */
border-radius: 100%; /* 圆形边框 */
opacity: 0.8; /* 设置不透明度为0.8 */
}
.eye {
width: 24px; /* 眼睛的宽度 */
height: 38px; /* 眼睛的高度 */
background-color: #A1620F; /* 眼睛的背景颜色 */
border-radius: 100%; /* 圆形边框 */
box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px,
rgba(255, 255, 255, 0.2) 0 2px 0 2px; /* 内部和外部的阴影 */
transition: .3s; /* 过渡效果时间为0.3秒 */
}
.eye.left {
position: absolute; /* 绝对定位 */
top: 0; right: 70px; bottom: 40px; left: 0; /* 通过设置边距实现眼睛的位置 */
margin: auto; /* 自动计算外边距，以保证居中 */
}
.eye.right {
position: absolute; /* 绝对定位 */
top: 0; right: 0; bottom: 40px; left: 70px; /* 通过设置边距实现眼睛的位置 */
margin: auto; /* 自动计算外边距，以保证居中 */
}
.left::before {
content: ""; /* 添加伪元素 */
position: absolute; /* 绝对定位 */
z-index: 3; /* 设置堆叠顺序 */
width: 100px; /* 宽度设为100像素 */
height: 85px; /* 高度设为85像素 */
border-radius: 50%; /* 边框半径设为50% */
background: radial-gradient(circle at 0 0, transparent 80%,
var(--black-fade)80%, var(--black-fade)90%, transparent 90%); /* 径向渐变背景 */
bottom: 80px; /* 距底部80像素 */
right: 0px; /* 距右边0像素 */
transform: rotatez(25deg); /* 旋转25度 */
opacity: 0; /* 不透明度设为0 */
}
.right::before {
content: ""; /* 添加伪元素 */
position: absolute; /* 绝对定位 */
z-index: 3; /* 设置堆叠顺序 */
width: 100px; /* 宽度设为100像素 */
height: 85px; /* 高度设为85像素 */
border-radius: 50%; /* 边框半径设为50% */
background: radial-gradient(circle at 100% 0, transparent 80%,
var(--black-fade)80%, var(--black-fade)90%, transparent 90%); /* 径向渐变背景 */
bottom: 80px; /* 距底部80像素 */
left: 0px; /* 距左边0像素 */
transform: rotatez(-25deg); /* 旋转-25度 */
opacity: 0; /* 不透明度设为0 */
}
.mouth {
position: absolute; /* 绝对定位 */
top: 88px; /* 距顶部88像素 */
right: 0; bottom: 0; left: 0; /* 左右和底部设为0以居中 */
margin: auto; /* 自动计算外边距，以保证居中 */
overflow: hidden; /* 隐藏超出元素范围的内容 */
width: 94px; /* 宽度设为94像素 */
height: 48px; /* 高度设为48像素 */
transition: .3s; /* 过渡效果时间为0.3秒 */
}
.mouth:before {
position: absolute; /* 绝对定位 */
top: 0; right: 0; bottom: 10px; left: 0; /* 设置上下左右距离居中 */
margin: auto; /* 自动计算外边距，以保证居中 */
content: ""; /* 伪元素内容为空 */
width: 100%; /* 宽度设为父元素的100% */
height: 100%; /* 高度设为父元素的100% */
background-color: #6E440B; /* 背景颜色设为深棕色 */
border-radius: 100%; /* 圆形边框 */
box-shadow: rgba(255, 255, 255, 0.25) 0 3px 0; /* 阴影效果 */
transform: scale(1); /* 缩放比例设为1 */
}
.mouth:after {
position: absolute; /* 绝对定位 */
top: 0; right: 0; bottom: 26px; left: 0; /* 设置上下左右距离居中 */
margin: auto; /* 自动计算外边距，以保证居中 */
content: ""; /* 伪元素内容为空 */
width: calc(100% - 20px); /* 宽度设为父元素宽度减20像素 */
height: 100%; /* 高度设为父元素的100% */
background-color: #FECA32; /* 背景颜色设为黄色 */
border-radius: 100%; /* 圆形边框 */
box-shadow: rgba(0, 0, 0, 0.8) 0 4px 4px -4px; /* 阴影效果 */
transform-origin: 50% 100%; /* 设置变换的原点为元素的底部中心 */
transform: scale(1.6); /* 缩放比例设为1.6 */
}
/* hover 状态 */
#emoji:hover .face {
background-color: rgb(230, 80, 7); /* 当鼠标悬停时，改变面部背景颜色为橙红色 */
}
#emoji:hover .eye {
height: 30px; /* 当鼠标悬停时，改变眼睛的高度为30像素 */
box-shadow: inset rgba(0, 0, 0, 0.5) 0 6px 12px,
rgba(250, 160, 55, .3) 0 2px 0 2px; /* 当鼠标悬停时，改变眼睛的阴影效果 */
}
#emoji:hover .left,
#emoji:hover .right {
top: 45px; /* 当鼠标悬停时，调整眼睛的上边距为45像素 */
bottom: 40px; /* 当鼠标悬停时，调整眼睛的下边距为40像素 */
}
#emoji:hover .left::before,
#emoji:hover .right::before {
opacity: 1; /* 当鼠标悬停时，显示眼睛的光效 */
bottom: 40px; /* 当鼠标悬停时，调整光效的底部距离为40像素 */
transition: .3s; /* 设置过渡效果时间为0.3秒 */
}
#emoji:hover .mouth {
overflow: visible; /* 当鼠标悬停时，显示超出元素范围的内容 */
top: 120px; /* 当鼠标悬停时，调整嘴巴的顶部距离为120像素 */
width: 84px; /* 当鼠标悬停时，调整嘴巴的宽度为84像素 */
height: 35px; /* 当鼠标悬停时，调整嘴巴的高度为35像素 */
transform: translate3d(0, 0, 0); /* 重置3D转换 */
background: var(--black-fade); /* 背景颜色设为淡化的黑色 */
border-radius: 60%/80%; /* 当鼠标悬停时，调整嘴巴的边框半径 */
box-shadow: inset 0 0 10px 1px black; /* 当鼠标悬停时，设置内部阴影效果 */
}
#emoji:hover .mouth:before {
opacity: 0; /* 当鼠标悬停时，隐藏嘴巴的前景内容 */
}
#emoji:hover .mouth:after {
transform: scale(1); /* 当鼠标悬停时，将嘴巴后景内容缩放至原始大小 */
width: 68px; /* 当鼠标悬停时，调整后景内容的宽度为68像素 */
height: 75px; /* 当鼠标悬停时，调整后景内容的高度为75像素 */
background: linear-gradient(90deg, transparent 45%, var(--black-fade)50%, transparent 55%),
radial-gradient(circle at 50% 10%, rgb(240, 40, 115), var(--shine)55%); /* 设置渐变背景颜色 */
background-repeat: no-repeat; /* 禁止背景图案的重复 */
background-size: 100% 50%, 100% 100%; /* 设置背景图案的大小 */
top: 15px; /* 当鼠标悬停时，调整后景内容的顶部距离为15像素 */
bottom: auto; /* 当鼠标悬停时，禁用底部对齐 */
left: 50%; /* 当鼠标悬停时，将后景内容水平居中 */
margin: auto -34px; /* 当鼠标悬停时，调整后景内容的外边距 */
border-radius: 7px 7px 50% 50%/10% 10% 50% 50%; /* 当鼠标悬停时，调整后景内容的边框半径 */
filter: blur(2px); /* 当鼠标悬停时，应用2像素的模糊滤镜 */
box-shadow: inset 0 -2px 3px 0 mediumvioletred,
inset 0 -5px 10px 7px rgb(240, 40, 115), 0 5px 10px 1px black; /* 当鼠标悬停时，设置阴影效果 */
}
독자들이 마음을 진정시키고 위의 코드를 읽고, 컴파일러를 사용하여 코드의 각 줄의 효과를 단계별로 확인할 수 있기를 바랍니다! 위의 코드를 요약하면 다음과 같습니다.
이 CSS 코드는 다음 기능과 효과를 구현합니다.
색상 변수 정의 :
CSS 사용자 정의 속성(변수)을 사용하여 광택, 기본 색상, 보조 색상, 강조 색상, 희미한 검정색 및 진한 파란색과 같은 색상 세트를 정의합니다. 이러한 변수는 후속 스타일의 통합 관리 및 적용에 사용됩니다.
전역 스타일 설정 :
global
padding을margin0으로 설정하고 목록의 기본 스타일을 제거합니다. 이는 페이지 요소의 초기 스타일이 통일되도록 하고 기본 스타일이 디자인에 영향을 미치지 않도록 하기 위한 것입니다.페이지 레이아웃 :
body라벨의 스타일을 통해 페이지를flex레이아웃으로 설정하고, 내용을 중앙에 세로, 가로로 표시합니다.height: 100vh페이지를 고정하기 위해 스크롤 막대를 숨기는 동안 페이지 높이를 뷰포트 높이로 설정하는 데 사용되었습니다 .이모티콘 구조 및 레이아웃 :
컨테이너는 이모티콘의 전체 크기와 위치를 정의하는 데 사용되며
#emoji, 3D 변환이 활성화되어 후속 애니메이션 효과를 최적화합니다.
layer클래스는 이모티콘의 각 레이어의 기본 스타일을 정의하는 데 사용됩니다.기본 얼굴 스타일 :
face위치, 크기, 배경색, 원형 테두리, 그림자 효과 등 이모티콘의 얼굴을 그리기 위한 클래스를 정의합니다 .얼굴 세부정보 :
shine이 클래스는 그라디언트 및 투명도 적용을 통해 빛과 그림자를 시뮬레이션하여 얼굴에 광택 효과를 만듭니다.
eye클래스는 위치, 크기, 원형 테두리, 그림자 등의 속성을 사용하여 눈의 스타일을 정의합니다. 왼쪽 눈과 오른쪽 눈은 별도로 사용되고 배치.eye.left됩니다.eye.right.
left::before의사 요소 는right::before눈에 반사 효과를 추가했습니다.입 스타일 :
mouth위치, 크기, 배경색, 테두리 반경 및 그림자 효과를 포함하여 입의 모양을 정의하는 데 사용되는 클래스입니다. 입의 추가 세부 사항은::before및 의사 요소를 사용하여 추가되었습니다.::after마우스오버 효과 :
의사 클래스를 사용하여
:hover이모티콘에 마우스 오버 애니메이션을 추가했습니다 . 여기에는 얼굴 색상 변경, 눈 모양 및 그림자 조정, 입 위치 및 모양 변경, 입 안의 복잡한 빛 및 그림자 효과가 포함됩니다.전환 효과 :
대부분의 애니메이션과 스타일 변경에 대해 부드러운 전환 효과가 일반적으로 0.3초로 설정되어 애니메이션을 더욱 유연하고 자연스럽게 만듭니다.
이제 효과를 살펴보겠습니다.
——웃는 얼굴은 마우스의 움직임에 따라 변하지 않는다는 것을 알게 될 것입니다. 이때 몇 가지 대화형 효과를 추가해야 합니다!
3. 상호 작용 - JavaScript 코드
자바스크립트 코드:
<!-- 导入Parallax视差插件 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/parallax/2.1.3/parallax.min.js"></script>
<script>
var options = {
invertX: false, // 水平方向反转
invertY: false, // 垂直方向反转
limitX: 40, // 水平方向限制
limitY: 40// 垂直方向限制
}
var emoji = document.getElementById('emoji'); // 获取元素id为emoji的DOM对象
var parallax = new Parallax(emoji, options); // 创建新的视差对象并传入emoji和options参数
</script>——위의 코드를 작성하면 기사 시작 부분에서 효과를 얻을 수 있습니다! ! ! (효과는 다음과 같습니다)
이것이 이 기사의 전부입니다! ! !