网站开发工具 哪个好,西安网页设计教育培训机构,宽带营销推广方案,crm软件排行榜30个HTMLCSS前端开发案例#xff08;17-20#xff09;鼠标移入文字加载动画效果代码实现效果鼠标悬停缩放效果实现代码效果鼠标移入旋转动画实现代码效果loding加载动画实现代码效果资源包鼠标移入文字加载动画效果
代码实现
!DOCTYPE html
htmlheadCSS前端开发案例17-20鼠标移入文字加载动画效果代码实现效果鼠标悬停缩放效果实现代码效果鼠标移入旋转动画实现代码效果loding加载动画实现代码效果资源包鼠标移入文字加载动画效果
代码实现
!DOCTYPE html
htmlheadmeta charsetutf-8title鼠标移入文字加载动画/titlestyle typetext/cssbody{margin: 0;padding: 0;}/* 清除浮动 */.clearfix::after{content: ;display: block;clear: both;}.box {width: 1200px;/* height: 370px; *//* background-color: red; */margin: 50px auto;}.box .item{width: 280px;height: 370px;/* border: 1px solid blue; *//* background-color: blue; */float: left;margin: 0 10px;position: relative;overflow: hidden;}/* 遮罩层 */.item-mask{width: 280px;height: 370px;background-color: rgba(0, 0, 0, 0);position: absolute;top: 0;left: 0;transition: background-color ease 2s;/* 动画过渡效果 */}.item:hover .item-mask{background-color: rgba(0, 0, 0, 0.5);}.item .item-title{/* border: 1px solid aqua; */position: absolute;top:-50px;left: 20px;color: white;transition: top ease .5s;}.item:hover .item-title{top: 250px;}.item .item-singer{/* border: 1px solid blue; */position: absolute;top: 290px;left: 0px;color: #fff;font-size: 14px;transform: translateX(-100%);/* 刚好向左移动自身的宽度 */transition: all ease .5s;}.item:hover .item-singer{transform: translateX(25px);/* 右移25px */}.item .item-info{/* border: 1px solid aqua; */position: absolute;/* top: 320px; */left: 20px;right: 20px;font-size: 14px;color:white;top: 370px;transition: top ease .5s;}.item:hover .item-info{top: 320px;}/style/headbodydiv classbox clearfixdiv classitemimg srcimages/hover1.jpg alt width280 div classitem-mask/divdiv classitem-title《听闻远方的你》/divdiv classitem-singer演唱刘艺雯/divdiv classitem-info我吹过你吹过的风这算不算相拥我走过你走过的路这算不算相逢/div/divdiv classitemimg srcimages/hover2.jpg alt width280 div classitem-mask/divdiv classitem-title《听闻远方的你》/divdiv classitem-singer演唱刘艺雯/divdiv classitem-info我吹过你吹过的风这算不算相拥我走过你走过的路这算不算相逢/div/divdiv classitemimg srcimages/hover3.jpg alt width280div classitem-mask/divdiv classitem-title《听闻远方的你》/divdiv classitem-singer演唱刘艺雯/divdiv classitem-info我吹过你吹过的风这算不算相拥我走过你走过的路这算不算相逢/div/divdiv classitemimg srcimages/hover4.jpg alt width280div classitem-mask/divdiv classitem-title《听闻远方的你》/divdiv classitem-singer演唱刘艺雯/divdiv classitem-info我吹过你吹过的风这算不算相拥我走过你走过的路这算不算相逢/div/div/div/body
/html
效果 49a3c672-3362-40d3-844f-e48a7405fbb1鼠标悬停缩放效果
实现代码
!DOCTYPE html
htmlheadmeta charsetutf-8title鼠标悬停缩放效果/titlestyle typetext/cssbody {margin: 0;padding: 0;}.clearfix {content: ;display: block;clear: both;}.flower {width: 960px;/* height: 300px; *//* border: 2px solid red; */margin: 100px auto 0;}.flower .item {width: 300px;height: 300px;background-color: aqua;float: left;margin: 0 10px;overflow: hidden;position: relative;}.item img {transition: transform ease .5s;}.item:hover img {transform: scale(1.2);}.item .item-mask {width: 300px;height: 300px;background-color: rgba(0, 0, 0, 0);position: absolute;top: 0;left: 0;transition: all ease .5s;/* 怪异盒模型处理遮罩层偏移问题 也可通过定位解决 */box-sizing: border-box;/* 水平 垂直 阴影羽化 阴影大小 阴影颜色 */box-shadow: 0 0 0 40px rgba(255, 255, 255, 0.5);}.item:hover .item-mask {transform: scale(0.8);background-color: rgba(0, 0, 0, 0.5);border: 5px solid #fff;}.item .title {/* border: 1px solid red; */position: absolute;top: 80px;left: 40px;right: 40px;text-align: center;font-size: 18px;/* font-weight: 700; */color: #fff;transform: scale(1.2);opacity: 0;transition: all ease .5s;}.item:hover .title {transform: scale(1);opacity: 1;}.item .item-info {/* border: 1px solid blue; */position: absolute;top: 110px;left: 40px;right: 40px;color: #fff;font-size: 14px;transform: scale(1.2);opacity: 0;transition: all ease .5s;}.item:hover .item-info {transform: scale(1);opacity: 1;}/style/headbodydiv classflower clearfixdiv classitemimg srcimages/scale1.jpg alt width300div classitem-mask/divdiv classtitle金凤蝶/divdiv classitem-info金凤蝶Papilio machaon Linnaeus又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶属鳞翅目凤蝶科。因其体态华贵花色艳丽而得名。有“能飞的花朵”、“昆虫美术家”的雅号。/div/divdiv classitemimg srcimages/scale2.jpg alt width300div classitem-mask/divdiv classtitle金凤蝶/divdiv classitem-info金凤蝶Papilio machaon Linnaeus又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶属鳞翅目凤蝶科。因其体态华贵花色艳丽而得名。有“能飞的花朵”、“昆虫美术家”的雅号。/div/divdiv classitemimg srcimages/scale3.jpg alt width300div classitem-mask/divdiv classtitle金凤蝶/divdiv classitem-info金凤蝶Papilio machaon Linnaeus又名黄凤蝶、茴香凤蝶、胡萝卜凤蝶属鳞翅目凤蝶科。因其体态华贵花色艳丽而得名。有“能飞的花朵”、“昆虫美术家”的雅号。/div/div/div/body
/html
效果 c4821c15-1ff5-4102-8250-8cef9473870d鼠标移入旋转动画
实现代码
!DOCTYPE html
htmlheadmeta charsetutf-8title鼠标移入旋转动画/titlestyle typetext/cssbody,h3,p{margin: 0;padding: 0;}.box{width: 400px;height: 300px;background-color: red;margin: 100px auto 0;position: relative;/* 相对定位,参考物 */overflow: hidden;}.box:hover img{filter: blur(5px);}.box::after{content: ;width: 500px;height: 0;background-color: rgba(0, 0, 0, 0);position: absolute;left: 0;top: 0;transform-origin: left center;transform: rotate(37deg);transition: all ease .5s;}.box:hover::after{height: 300px;top: -150px;background-color: rgba(0, 0, 0, 0.5);}.box .txt{/* border: 2px solid red; */position: absolute;top: 80px;left: 60px;right: 100px;z-index: 3;/* 改变层级,防止遮罩掩盖文字 */transform: rotate(30deg);transition: all ease .5s;color: #fff;opacity: 0;}.box .txt h3{font-size: 20px;font-weight: 400;margin-bottom: 10px;}.box .txt p{font-size: 14px;line-height: 25px;}.box:hover .txt{transform: rotate(0);opacity: 1;}/style/headbodydiv classboximg srcimages/rotate1.webp alt width400 height300!-- div classmask/div --!-- 也可用mask实现特效 --div classtxth3风景如画/h3p风景如画是“风景”和“如画”的连用意思是美丽的景色如画出来的一样比喻景色像图画一样呈现在眼前/p/div/div/body
/html
效果
效果动态图审核中。。。
loding加载动画
实现代码
!DOCTYPE html
htmlheadmeta charsetutf-8titleloding加载动画/titlestyle typetext/cssbody {margin: 0;padding: 0;}.loading {width: 200px;height: 200px;background-color: skyblue;margin: 100px auto 0;position: relative;}.loading .item {width: 20px;height: 20px;background-color: rgba(255,255,255,0.2);position: absolute;top: 0;left: 50%;margin-left: -10px;transform-origin: 10px 100px;border-radius: 50%;/* 存在逻辑运算 *//* 使用自定义属性来进行运算 */transform: rotate(calc(var(--i)*40deg));animation: loading 1s ease infinite;animation-delay: calc(var(--i)*0.11s);}keyframes loading {/* 0-1s */%0,%50{background-color: rgba(255,255,255,0.2);}/* 时间50.5%-100% */50.5%,100%{background-color: #fff;}}/* .loading .item:nth-child(1) {animation-delay: 0s;}.loading .item:nth-child(2) {animation-delay: 0.11s;}.loading .item:nth-child(3) {animation-delay: 0.22s;}.loading .item:nth-child(4) {animation-delay: 0.33s;}.loading .item:nth-child(5) {animation-delay: 0.44s;}.loading .item:nth-child(6) {animation-delay: 0.55s;}.loading .item:nth-child(7) {animation-delay: 0.66s;}.loading .item:nth-child(8) {animation-delay: 0.77s;}.loading .item:nth-child(9) {animation-delay: 0.88s;} *//style/headbodydiv classloadingdiv classitem style--i:0/divdiv classitem style--i:1/divdiv classitem style--i:2/divdiv classitem style--i:3/divdiv classitem style--i:4/divdiv classitem style--i:5/divdiv classitem style--i:6/divdiv classitem style--i:7/divdiv classitem style--i:8/div/div/body
/html
效果
效果动态图审核中。。。
资源包
代码及其相关图片资源
