#Css

前端二:CSS

CSS:一:介绍:学名层叠样式表(CadingStyleSheets)是一种用来表现HTML或者XML等文件的样式的计算机语言。让HTML和XML看起来更加美观。语法:<style>标签内定义css样式。内容是{key:value}形式。css位置:为了提高样式的重用。css样式一般推荐在html ...
代码星球 ·2021-01-23

CSS艺术字

一、使用canvas自己画1.脚本部分<scripttype="text/javascript">functiondrawText(){varcanvas=document.getElementById("canvas");varctx=canvas.getContext("2d");ctx.font="3...
代码星球 ·2021-01-23

传入两坐标点,利用div+css画线

上样式生成函数代码lineStyle(x1,y1,x2,y2,lineWidth=4,color='black'){letrectX=x1<x2?x1:x2;letrectY=y1<y2?y1:y2;letrectWidth=Math.abs(x1-x2);letrectHeight=Math.abs(y1...

scss使用经验总结

暂时没写...
代码星球 ·2021-01-22

纯CSS3浮雕质感的立体文字旋转动画

还记得之前分享过一个CSS3 文字3D翻转特效,这个效果让文字有一种立体的视觉效果。今天要分享的这款CSS3文字动画特效更加炫酷,它不仅有立体的3D效果,而且文字整体展现出一种浮雕质感的视觉效果,并且伴随着旋转。效果图如下:在线预览    源码下载实现的代码。html代...

基于CSS3动态背景登录框代码

基于CSS3动态背景登录框代码。这是一款基于jQuery+CSS3实现的带有动画效果的动态背景登陆框特效。效果图如下:在线预览    源码下载实现的代码。html代码:<divclass="htmleaf-container"><divclass="wrappe...

15款css3鼠标悬停图片动画过渡特效

分享15款css3鼠标悬停图片动画过渡特效。这是一款15款不同效果的css3hover动画过渡效果代码。效果图如下:在线预览    源码下载实现的代码。html代码:<divclass="htmleaf-container"><divclass="contain...

基于CSS3鼠标滑过放大突出效果

还记得之前分享过一款CSS3图片悬停放大特效,效果非常不错。今天我们要再来分享一款类似的CSS鼠标滑过放大突出效果,只不过之前那个是图片,这次是色块,其实掌握了其CSS原理,任何网页元素都可以实现这种突出放大的CSS3动画特效。效果图如下:在线预览    源码下载实现的代码。ht...

基于animation.css实现动画旋转特效

分享一款基于animation.css实现动画旋转特效。这是一款基于CSS3实现的酷炫的动画旋转特效代码。效果图如下:在线预览    源码下载实现的代码。html代码:<divclass="wrap"><divclass="mod_bg"><divc...

基于css3 transform实现散乱的照片排列

分享一款基于css3transform实现散乱的照片排列。这是一款简单零散的css3相册排列特效下载。效果图如下:在线预览    源码下载实现的代码。html代码:<divclass="main"><divclass="picpic1"><imgsr...

css | js 实现扩展卡片小demo

1.代码如下<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/>...
代码星球 ·2021-01-22

基于9款CSS3鼠标悬停相册预览特效

基于9款CSS3鼠标悬停相册预览特效里面包含九款不同方式的相册展开特效代码。效果图如下:在线预览    源码下载实现的代码。html代码:<divclass="albums"><divclass="albums-inner"><divclass="a...

纯CSS3悬停图标旋转导航动画代码

分享一款纯CSS3悬停图标旋转导航动画代码。这是一款鼠标移到图标上动画旋转显示导航菜单。效果图如下:在线预览    源码下载实现的代码。html代码:<divid="x_contant"><aclass="xzt1"href="#"><imgsrc=...

16款纯CSS3实现的loading加载动画

分享16款纯CSS3实现的loading加载动画。这是一款实用的可替代GIF格式图片的CSS3加载动画代码。效果图如下:在线预览    源码下载实现的代码。html代码:<divclass="grid"><divclass="cell"><divcl...

基于jQuery CSS3鼠标点击动画效果

分享基于jQueryCSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果。效果图如下:在线预览    源码下载实现的代码。html代码:<divclass="container"><divclass="clearfix"><divclas...
首页上一页...1819202122...下一页尾页