html+css
html+css
一个什么都不会的前端
一个什么都不会的前端开发工程师
展开
-
使用html + css制作简易loading
前几天做小程序和后台管理项目的时候,产品说能否换一种loading,官方的不太好看,emmmmmmmmmmmm,那还能怎么办,只能搞了。这里的loading大部分都是基于css实现1、通过普通的div标签实现<div class="loading-container"></div>css .loading-container{ width: 50px; /*先将loading区域变成正方形*/ height: 50px;原创 2021-01-25 11:34:40 · 1333 阅读 · 0 评论 -
小程序波浪球动画
先看一下效果,波浪的大小会根据数值的变化而不断变化html代码(这里只写和波浪球相关的代码)<view class="charging-ball-container"> <view class="wave-wrapper" style="bottom:{{percent}}%"></view> <view class="percent-txt">{{percent}}%</view></view>css原创 2021-01-15 17:11:48 · 1819 阅读 · 1 评论 -
css实现文字、图片变大变小效果
有时候经常在一些网站上看见一些文字或者图片一会变大一会又变回原来的样子,下面就来实现一下其实很简单,只需要用到css@keyframes规则中的一些属性和animation就可以了,不了解的可以去看一下@keyframes简单介绍首先我们在html里面写一张图片 <img class="my-shop-btn" src="images/shopping-icon.png" />css.my-shop-btn{ position: absolute; z-index: 99;原创 2020-11-11 14:44:19 · 1778 阅读 · 0 评论 -
css通过伪元素实现鼠标经过出现灰色蒙层
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>伪元素</title> <style> .wrapper{ w原创 2020-10-28 12:21:43 · 1438 阅读 · 0 评论 -
css实现三角形、梯形、优惠券样式
首先我们先定义一个空盒子,然后将宽高设置为0,给每一个边border都设置一个颜色,现在他是这样的现在看一下代码 <div class="sanjiao"></div>css:宽和高必须都是0.sanjiao{ width: 0; height: 0; border-top: 50px solid red; border-right: 50px solid black;原创 2020-10-28 11:34:54 · 487 阅读 · 0 评论