HTML实用小功能
念你那丝微笑
前端开发界的一名小学生,前端知识点很系统化,内容很杂,边界很宽,需要学习的知识多而用的少,
,希望通过博客来记录和加深学习交流,不足之处,欢迎大佬批评指正。
展开
-
CSS图片文字排版03
实现思路主要技术主要使用CSS属性visibility: hidden;将p标签文字隐藏起来,再通过:hover选择器来改变类card的高度,将p标签文字visibility: visible;显示出来。为了更好理解,没有将CSS和HTML分离,需要的话,请自行copy分离,备注挺详细的,需要可以参考一下。实现效果实现代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <tit原创 2020-08-19 22:29:57 · 1166 阅读 · 0 评论 -
CSS实现图片文字排版02
实现思路使用:hover选择器,当鼠标划入时,transform: scale(1.20);将图片放大1.2倍,再改变文字的外边距,达到动态效果。实现效果HTML代码 <div class="food_display"> <!-- 蟹仔粉介绍 --> <div class="box3"> <div class="food_img"> <img src="img/index_food/food_img1.png"原创 2020-08-15 15:39:05 · 2603 阅读 · 0 评论 -
CSS图片文字排版01
实现思路通过clip-path属性剪切不同时刻图片大小,开始,给h2,p,a标签影藏并使用transform: translateY()属性,设置不同的偏移量,通过:hover选择器,当鼠标划入的时候,缩小图片大小,将transform: translateY()偏移量设置为0;通过transition设置过渡时间来实现动画效果。实现效果HTML代码<div class="content-top"> <div class="header"> <h3>北海风原创 2020-08-15 15:02:35 · 1367 阅读 · 0 评论 -
CSS实现炫酷导航栏
实现思路本导航栏的实现,通过使用伪元素:before和:after这两个伪元素在真正页面元素a标签之前和之后添加新内容(边框,背景颜色),使用transition属性设置过渡效果的时间,再使用:hover选择器来显示。效果如下:导航栏效果HTML代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>炫酷导航栏实现</title> <!--原创 2020-08-14 23:07:39 · 6496 阅读 · 1 评论 -
纯CSS实现导航栏下拉动画效果
实现思路导航栏的下拉效果通过在ul的li里再嵌套一个ul,再通过animation属性改变第二导航栏ul的高度来实现导航栏下拉动画效果。老铁没毛病。实现效果:HTML代码<div class="nav"> <ul> <li> <a href="#">奥利给</a> <ul class="son"> <li><a href="#">雷霆嘎巴</a>原创 2020-08-11 00:44:06 · 6254 阅读 · 9 评论