css实现图片卡片文字悬浮动画效果
代码语言:html
所属分类:悬停
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> Izmir - ImageHover CSS Library - Example 1</title> <style> @import url('https://fonts.googleapis.com/css?family=Noto+Sans+HK:300,400,700&display=swap'); html { height: 100%; } /*! CSS Used from demo.css */ body { background-color: #212121; display: flex; justify-content: center; align-items: center; flex-flow: wrap; margin: 0; height: 100%; font-family: 'Noto Sans HK', sans-serif; font-weight: 300; } .wrapper { width: 100%; max-width: 1080px; } .examples { display: flex; flex-wrap: wrap; justify-content: center; } .examples > * { margin: 8px; max-width: 330px; } h4 { font-size: 1.4em; } a { color: #059BC6; } .text { color: #fff; text-align: center; margin-bottom: 30px; } .text h2 { font-weight: 300; font-size: 2em; text-transform: capitalize; } .text h3 { font-weight: 300; font-size: 1.3em; } .text strong { font-weight: 700; color: #059BC6; } /*! CSS Used from izmir.css */ .ls-izmir { --text-color: #ffffff; --primary-color: #00B4DB; --secondary-color: #0083B0; --padding: 1em; --transition-duration: 600ms; --border-margin: 15px; --border-width: 3px; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0